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

Pure: ¿Qué, Por Qué y Cómo?

by
Difficulty:IntermediateLength:LongLanguages:

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

Este tutorial le presentará a Pure, una biblioteca CSS hecha de pequeños módulos, que puede ayudarle a escribir diseños completamente adaptivos, de una manera muy rápida y fácil. A lo largo del camino, le guiaré a través de la creación de una página sencilla para resaltar cómo puede usar algunos de los componentes de la biblioteca. 


¿Por qué Crear Diseños Adaptivos?

Durante los últimos años en el desarrollo web, tres palabras que están rebotando por ahí, una y otra vez son: Diseño Web Adaptivo (DWA). En este punto usted ya debe saber lo que es, pero, por si acaso se le pasó, aquí hay algunos recursos para llenar los vacíos:

Pero la pregunta es: ¿Por qué hacer diseños adaptivos? La respuesta es que no tenemos ningún control sobre la resolución que el siguiente dispositivo utilizará cuando visite nuestro sitio web. Ya no podemos simplemente mostrar frases como, "Mejor vista a una resolución de 1024x768" (aunque todavía se pueden encontrar en la web). Una de las principales razones de este fenómeno fue el crecimiento en el ancho de los monitores de PC y también de la propagación de dispositivos móviles que están conectados a Internet. Además, con base en StatCounter, actualmente el ~ 16% de los usuarios están conectados a través de un dispositivo móvil. Ahora no estoy diciendo que el DWA es sólo una cuestión de optimizar un sitio web para un determinado tamaño de pantalla, lo que quiero decir es que estamos creando una gran experiencia para los usuarios que visitan nuestro sitio web independientemente de los dispositivos que están utilizando.

Dicho esto, también está claro que no todos trabajamos para una empresa en la que cada persona tiene un rol único (diseñador, desarrollador, probador, etc.). Así que, digamos que usted es un desarrollador solo, trabajando como freelancer y no sabe mucho sobre diseño web. Hay gran cantidad de bibliotecas disponibles que pueden acelerar su flujo de trabajo. Las más completas son sin duda Boostrap y Foundation, pero a veces pueden ser excesivos y es posible que necesite algo más pequeño. En estos casos, un nuevo proyecto interesante ha sido lanzado por Yahoo que podemos utilizar, llamado Pure.


¿Qué es Pure?

Citando el sitio web de Pure, es un conjunto de módulos CSS pequeños y adaptivos que usted puede utilizar en cada proyecto web. Como se dijo antes, la biblioteca completa es realmente ligera, siendo sólo 4.2KB minimizada y comprimida, pero para mantener su sitio web aún más ligero, usted puede incluir sólo algunos de los módulos disponibles. Básicamente, está compuesto de los siguientes módulos:

  • Base
  • Cuadrícula
  • Formularios
  • Botones
  • Tablas
  • Menús

Una de las cosas que realmente aprecio de Pure es que se basa en Normalize.css, una biblioteca bien conocida que procesa los elementos de forma más coherente y en línea con los estándares modernos y también funciona en los navegadores más antiguos.  Dado que es muy pequeño, no ofrece una solución completa a todos sus problemas, pero tiene varios elementos de interfaz de usuario comunes preconfigurados que puede encontrar en muchos sitios web en la red. Otra característica interesante de Pure es que es altamente extensible y personalizable. Los autores usaron SMACSS para construirlo y todas sus clases comienzan con pure-, para que pueda reconocerlas fácilmente.

Aunque Pure es un proyecto interesante para mirar, tenga en cuenta que es realmente nuevo y podría no ser un buen ajuste para grandes proyectos. De hecho, la versión actual (0.2.0 en el momento de escribir este artículo) tiene varios problemas que probablemente no encontraría en los frameworks más maduros y su documentación también podría ser mejorada. Sin embargo, me gustó y siendo un precursor, tiene la ventaja de estudiar y aprender Pure, desde el principio, lo que podría acabar siendo el próximo proyecto bien conocido en la web.


Veamos Pure en acción

Dicen que una imagen vale más que mil palabras. Para nosotros, como desarrolladores y diseñadores, una demo con la que podemos jugar es aún mejor. Por lo tanto, para ver lo que Pure puede hacer por nosotros, vamos a crear una aplicación de demostración básica. Nuestra demo consistirá de una sencilla página que contiene información sobre mí mismo (a veces mi imaginación me asusta). La siguiente imagen muestra el resultado final en una pantalla grande:

Final Result on Desktop

Y la siguiente imagen, en cambio, le muestra cómo se verá en un smartphone:

Final Result on Mobile

Paso 1: Cree el Menú Horizontal

Como dije, Pure tiene varios elementos comunes pre-construidos que se pueden encontrar en una gran cantidad de sitios web en la red. Un menú horizontal es sin duda uno de ellos y nos dará la oportunidad de echar un vistazo a algunas de las clases del módulo de menús.

Para crear esto usando HTML5, usualmente tenemos un elemento <nav> que envuelve una lista no ordenada que contiene los principales enlaces de nuestro sitio web. Una vez creada la lista, debemos mostrarla horizontalmente. Para lograr esto, tenemos que aplicar tres clases al contenedor de lista (<nav>): .pure-menu, .pure-menu-open y .pure-menu-horizontal. La primera clase aplica reglas que son comunes a todos los menús en Pure.  La clase .pure-menu-open se utiliza para mostrar (en lugar de ocultar) los elementos de la lista, mientras que la clase .pure-menu-horizontal es la responsable de mostrar los elementos de la lista en la misma línea. Tenga en cuenta que de forma predeterminada, el menú no está centrado.

Ahora, para mejorar la interfaz de usuario, debemos resaltar el elemento de lista que enlaza a la página actual. Esto se hace aplicando la clase .pure-menu-selected al elemento <li> que desea resaltar. Al hacerlo, el color del texto pasará del gris al negro.

El código completo de nuestro menú se muestra a continuación:


Paso 2: La Descripción del Autor

Después del menú, se puede ver que tenemos una "fila" ideal que contiene en el lado izquierdo, una foto y en el lado derecho, una pequeña descripción mía. Esta "fila", es en realidad una rejilla adaptiva de dos unidades de cuadrícula, donde la primera envuelve la foto y ocupa el 25% de su espacio, mientras que la segunda envuelve la descripción y ocupa el 75% restante, siempre y cuando el ancho de la pantalla sea mayor que 767px. Por el contrario, si el ancho de la pantalla es igual o menor, las unidades de cuadrícula se apilan y ocupan el 100% de la anchura disponible. Tenga en cuenta que las unidades tienen un ancho de 100%, por lo que si los elementos dentro de ellos son más pequeños en el ancho, ocuparán sólo parte de la unidad. Para ver cómo funciona esto, intente cambiar el tamaño de la ventana y observe cómo la foto no consume el 100% del ancho, mientras que al mismo tiempo, las unidades de cuadrícula se apilan.

Como se mencionó anteriormente, Pure tiene un módulo específico para gestionar las rejillas. Para declarar una rejilla adaptiva, debe aplicar al contenedor una clase denominada .pure-g-r. Las unidades de cuadrícula, en cambio, comparten un nombre similar, .pure-u - * - *, donde la parte final de la clase especifica cuánto espacio ocupará la unidad dada. Por ejemplo, si aplica a un elemento la clase .pure-u-1-4, reservará el 25% del ancho disponible, como hice para la foto. Otro ejemplo podría ser .pure-u-2-3 que permitirá que la unidad ocupe el 66.6% del espacio de la rejilla.

Este sistema de cuadrícula es realmente interesante porque puede ahorrarle mucho tiempo si no sabe cómo manejar float, clear y otras reglas para crear diseños. Además, le ahorrará  todo el dolor de manejar el lado responsivo del diseño.

Dicho esto, el código que implementa la primera cuadrícula debe tener este aspecto:


Paso 3: La Rejilla de Información

La segunda y última cuadrícula se divide en tres partes iguales. Las he creado para mostrarle otros componentes de la biblioteca, para que pueda tener una buena visión general de los mismos. De hecho, la primera unidad tiene una tabla, la segunda tiene un formulario y la tercera tiene un menú vertical.

El siguiente código le muestra cómo dividir la cuadrícula en tres partes:

Ahora, vamos a explorar cada unidad de esta rejilla adaptiva.


Paso 4: Una Tabla Adaptiva

Otro de los módulos disponibles en Pure, es el de las Tablas. Como dice el nombre, contiene reglas para diseñar un elemento <table> y sus hijos. De forma predeterminada, las tablas tendrán un borde vertical aplicado a columnas visualmente separadas. Sin embargo, también puede agregar un borde horizontal, aplicando la clase .pure-table-bounded o mostrar sólo el último utilizando la clase .pure-table-horizontal al elemento <table>. Además, también puede crear tablas zebra para ayudar al usuario a leer los datos. Para lograr esto, usted tiene dos posibilidades. El primero funcionará en navegadores que soportan nth-child y consiste en aplicar el nombre de clase .pure-table-striped al elemento <table>. El segundo, en cambio, funciona en todos los navegadores, incluyendo Internet Explorer 8 y menorES, pero es más detallado. Consiste en agregar el nombre de la clase .pure-table-odd a cada tercer elemento <tr>. Por razones de compatibilidad, voy a ir para el segundo enfoque.

Actualmente, las tablas tienen un problema cuando se ven en pantallas pequeñas, pero se arreglará en la próxima versión. Por favor tenga en cuenta que no lo verá en la demo porque lo arreglé. Choca esos cinco por mí.

El código que crea la tabla zebra se muestra a continuación:


Paso 5: Un Formulario de Contacto Apilado

Los formularios son otro módulo de la biblioteca Pure. Le permite mostrar sus formularios en varios tipos diferentes de estilos. En esta demostración, crearemos un formulario apilado, donde los elementos de entrada están debajo de las etiquetas. Para ello, debemos agregar las clases .pure-form y .pure-form-stacked al elemento <form>. Luego tenemos que colocar tanto la etiqueta <label> y las etiquetas de input dentro de un contenedor, donde aplicaremos la clase .pure-control-group y luego colocaremos todos estos envoltorios en un elemento <fieldset>.  El botón de Enviar y el botón de reinicio tendrán un envoltorio también, pero su envoltorio tendrá la clase .pure-controls. Tenga en cuenta que para el botón Enviar, utilizamos la clase .pure-button-primary para resaltarlo.  La clase citada pertenece al módulo Botones y se utiliza para cambiar el estilo del botón, aplicando un color azul.

A continuación, se muestra como se debe ver el código de formulario:


Paso 6: Un menú Vertical con un Encabezado

El elemento final que aprenderá a crear, utilizando Pure, será un menú vertical con un encabezado. Un menú de este tipo está diseñado con un borde negro, alrededor del mismo. Para usarlo, aplicaremos al contenedor de lista, dos de las tres clases que ya hemos utilizado en el primer paso, es decir, .pure-menu y .pure-menu-open.  Además, para crear el encabezado, debemos añadir otro elemento y aplicarle la clase .pure-menu-heading.

El código de este menú se muestra a continuación:


Conclusión

Así que eso completa esta introducción a Pure. Espero que lo hayan disfrutado. Si desea seguir el desarrollo de Pure, puede visitar su repositorio en GitHub. No dude en enviar problemas, emitir solicitudes de envío y contribuir.

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.