Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS
Code

Pure.css Ofrece una Alternartiva Interesante a Bootstrap

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Final product image
What You'll Be Creating

¿Qué Es Pure.css?

Mientras que Bootstrap ha asumido una enorme franja de la web, este puede poner una ligera carga en el rendimiento en los sitios que no necesariamente necesitaría para su próximo proyecto. Pure.css es el framework adaptivo de Yahoo; ofrece una alternativa minimalista, bien documentada y flexible.

En este tutorial, voy a presentarte a Pure, "un conjunto de módulos CSS pequeños y adaptivos que usted puede usar en cualquier proyecto web". Revisaremos el conjunto de características y las ventajas de usar Pure y luego recorreremos algunos ejemplos básicos de uso.

Si tiene alguna solicitud de futuros tutoriales o preguntas y comentarios al tutorial de hoy, por favor publíquelos a continuación. También puede contactarme directamente en Twitter @reifman.

Seleccionando una Plataforma

Pure ofrece todas las características comunes que usted necesita en un framework de diseño web estándar. Por lo tanto, si usted está construyendo un tema para WordPress o un sitio web personalizado propio, podría ser una buena opción.

Para los gerentes de proyecto, por lo general es crítico que los proyectos de clientes se construyan con herramientas estándar que sean fáciles de entender y mantener y lo más importante, que es fácil reclutar talento que ya tiene la experiencia en su plataforma. Bootstrap es perfecto para esto. Pure parece bastante simple para mí, de manera que también puede ser un buen punto de partida.

El Resumen de las Características de Pure

Aquí un resumen de los beneficios y características de Pure. Proporciona:

  • una rejilla personalizable y adaptiva
  • menús verticales y horizontales integrados, incluidos menús desplegables
  • botones que funcionan con los elementos <a> y <button>
  • alineamientos flexibles de formularios
  • estilos comunes de tabla
  • una apariencia limpia y minimalista que se puede extender fácilmente

Sin embargo lo más impresionante es que Pure.css es súper pequeño, sólo 4.5KB minimizado + comprimido. A continuación se muestra el espacio que ocupan los distintos componentes de Pure en su entorno de producción:

PureCSS Module Sizes

Pure además está bien probado y funciona en IE 8+, Firefox, Chrome, Safari, iOS 6-8 y Android 4.x.

Además usted todavía puede usarlo con elementos de Bootstrap, agregándolos en donde usted los necesite. Voy a mostrar un ejemplo de esto a continuación.

Pure está basado en Normalize.css, el cual estandariza el rendimiento del framework entre navegadores. Normalize proporciona un restablecimiento CSS predeterminado que:

  • conserva los valores predeterminados útiles
  • normaliza los estilos para una amplia gama de elementos
  • corrige errores e inconsistencias comunes del navegador
  • mejora la usabilidad con sutiles mejoras
  • explica qué hace el código hace usando comentarios detallados

Empezando Con Pure

El sitio web de Pure está construido con su framework, por lo que su código minimalista y bien desarrollado lleva a una guía sencilla de navegar, fácil de usar. Aquí un ejemplo del menú izquierdo de Pure en acción:

Purecss - Get Started

Usted puede agregar Pure a su página por medio del CDN gratuito de Yahoo. Simplemente añada el siguiente elemento <link> al <head> de su página, antes de las hojas de estilo de su proyecto:

Para inicializar el ancho adaptivo de su sitio web, establezca una etiqueta meta para el ancho de pantalla de su dispositivo:

Disposiciones de Diseño

En su página de Layouts, Pure ofrece una muestra de descargas para diferentes páginas de ejemplo para necesidades comunes de aplicaciones:

PureCSS Sample layouts

Puede explorar y descargar cualquiera de ellas bien sea para experimentar con ellas o agregarlas a su aplicación. Éstas incluyen:

  • Blog
  • Correo Electrónico
  • Galería de Fotos
  • Página de aterrizaje
  • Galería de precios
  • Menú Lateral Adaptivo
  • Menú Horizontal-a-Vertical Adaptivo
  • Menú Horizontal-a-Desplegable Adaptivo

La Base de Pure

La Página de Base proporciona un breve antecedente sobre los fundamentos debajo del framework Pure, principalmente Normalize.css:

Normalize.css es un pequeño archivo CSS que proporciona una mejor consistencia entre los navegadores en el estilo predeterminado de los elementos HTML. Es una alternativa moderna y lista para HTML5 al tradicional restablecimiento CSS.

Usted también puede cargar Normalize por separado utilizando el CDN de Yahoo para uso independiente:

Y hay otras pequeñas características básicas tales como clases para pedirle a Pure cargar imágenes de forma adaptiva de acuerdo al tamaño de dispositivo usado:

Pero ahora, echemos un vistazo a algunos de los diseños de ejemplo que proporciona Pure.

Rejillas

Las rejillas son un aspecto clave de las disposiciones de sitio web que Pure hace bastante simple. He aquí un ejemplo rápido de una cuadrícula de cuatro columnas Pure en una pantalla de escritorio:

PureCSS Grids Full Width

Y así es como se reduce en una ventana de tamaño de tableta a la mitad:

PureCSS Grids Half Width

Y por último una sola columna en un teléfono inteligente:

PureCSS Grids Quarter Width

Las Rejillas de Pure consisten de dos tipos de clases: las rejillas y las unidades. Los elementos hijo de los divs de rejilla deben ser divs unitarios. Su contenido va dentro de la divs unitarios. Las clases unitarias se nombran para representar sus anchos. Por ejemplo, pure-u-1-4 tiene una anchura de 25%.

Aquí está el código para el cuarto adaptivo de arriba:

Como se puede ver arriba, <div class="pure-g"> representa la clase de rejilla externa. Luego <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> le indica al navegador que muestre una sola columna para ventanas mínimas, medias columnas para anchura mediana y un cuarto de columna para anchuras grandes.

Usted puede aprender más acerca de las Rejillas de Pure aquí.

Formularios

PureCSS Example Multi Column Form

Pure tiene soporte para alinear campos de entrada dentro de formularios y para dar estilo a campos especializados tales como:

  • Formularios en línea
  • Formularios apilados
  • Formularios de dos columnas
  • Formularios de varias columnas (mostrados arriba)
  • Entradas agrupadas
  • Entradas requeridas
  • Entradas deshabilitadas
  • Entradas de sólo lectura
  • Entradas redondeadas
  • Casillas de Verificación y Botones Radio

Usted puede ver todo esto aquí descrito. Vamos a explorar un formulario de dos columnas, al que Pure se refiere como Formulario Alineado:

PureCSS Example Two Column Aligned Form

Utilizando la clase pure-form-aligned con pure-control-group(s), Pure garantiza que cada conjunto de campos se posicione correctamente como se muestra arriba.

Es una manera muy sencilla de construir un formulario con alta usabilidad y bien posicionado.

Tablas

Pure hace la construcción y el formato de tablas bastante fácil también. He aquí un ejemplo de una tabla rayada horizontalmente:

PureCSS Example Horizontal Striped Tabled

Usted puede ver la tabla arriba codificada simplemente agregando la clase para filas pure-table-odd de forma alterna en su código para cambiar el rayado:

Hay un número de otros ejemplos de Tabla ilustrados aquí.

Menús

Los menús en Pure también se proporcionan de manera sencilla incluyendo:

  • Menú Vertical
  • Menú Horizontal
  • Elementos Seleccionados y Deshabilitados
  • Menús deplegables
  • Menú Vertical con Submenús
  • Menú Horizontal Desplazable
  • Menú Vertical Desplazable
  • Menú Vertical Adaptivo
  • Menú de Desplazamiento Horizontal Adaptivo
  • Menú Horizontal-a-Vertical Adaptivo

Vea todos los menús ilustrados aquí. Así es cómo usted codificaría un menú desplegable:

PureCSS Example Dropdown Menu

Básicamente es solo un pure-menu-list y pure-menu-item pure-menu-has-children pure-menu-allow-hover de un pure-menu-horizontal y luego una lista de elementos de menú hijos:

Pure proporciona ejemplos de JavaScript para implementar características adicionales de accesibilidad dentro de sus menús.

Yendo más Allá

El sitio web de Pure prporciona algunas excelentes guías para la construcción sobre el framework:

Usted puede además explorar la combinación de piezas de Pure con Bootstrap y JavaScript. Si usted desea empezar con la pequeña marca de Pure y su estilo minimalista, aún así puede aprovechar varias características de Bootstrap, solo cargando lo que necesita.

He aquí un ejemplo de un cuadro de diálogo modal Bootstrap sobre Pure, el cual puede ver en la página de extensiones de Pure:

PureCSS Using Pure with Elements of Bootstrap

Concluyendo

Bootstrap se está convirtiendo en la IBM de los frameworks web. Es adaptivo, es un estándar y no le pueden despedir por elegirlo (en un contrato reciente, en realidad tuvimos que despedir a un desarrollador de temas por no implementar correctamente Bootstrap).  Pero si usted desea algo más pequeño, más rápido y más simple entonces revise Pure.css.

Si ustde le da una oportunidad, por favor avíseme acerca de su experiencia en los comentarios a continuación. También puede contactarme directamente en Twitter @reifman. Y además puede navegar por mi página de instructor en Envato Tuts+ para leer mis otros tutoriales.

Enlaces Relacionados

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.