Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Construye una interfaz de panel de control modular usando Pure

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Gustavo Valdez Santiago (you can also view the original English article)

El día de hoy vamos a crear una bella y minimalista interfaz de panel de control usando Pure(Ve el proyecto en GitHub), la nueva mini-librería modular de Yahoo!. Vamos a hablar sobre y usar algunos principios de SMACSS (Arquitectura Modular y Escalar para CSS, por sus siglas en ingles). También vamos a usar algunos iconos creados por WeLoveIconFonts.com.

Nota: Antes de que vayamos más lejos, va a haber énfasis mínimo en las gráficas que vamos a crear. Las gráficas son algo mejor implementado con algo más orientado a JavaScript, y con el fin de mantener el enfoque en CSS y JavaScript mínimo, este tutorial va a evadir técnicas de dibujo de graficas en general.

Un Poco Sobre Pure

Pure fue desarrollado por el equipo de Yahoo! y YUI para ser un juego de módulos ligero (Menos de 6k). Piensa de Pure como una extensión de Normalize que también incluye estilos para elementos comunes como cuadriculas, formas, botones, tablas y menús.

pure-base

El equipo de YUI desarrollo Pure para ser un punto de partida, no una solución completa. Desde este punto de partida, se espera que los desarrolladores expandan y creen su propio CSS como una extensión de esta base.

Por este motivo, mucho de lo que vamos a enseñar en este tutorial son técnicas para extender una librería base como es Pure para adaptarse a la funcionalidad necesaria como una interfaz de administrador.

Un Poco Sobre SMACSS

SMACSS, Arquitectura Modular y Escalar para CSS, por sus siglas en inglés, concepto de Jonathan Snook, es una seria de prácticas diseñadas para construir CSS que es fácil de entender, de extender y evita la guerra de especificidad.

pure-smacss

Esto se apoya en no usar IDs para aplicar estilos y limitar la anidación de selectores lo mas posible. La idea básica es que el CSS puede ser categorizado como, base, layout, módulos, estados, y temas. Estructurar CSS bajo estas categorías y las siguientes convenciones de nombres que aluden a estas categorías hacen de SMACCS fácilmente legible y con inmediato significado.

  • Base: no name (default elements, no classes)
  • Layout: .layout, .grid, .grid-column, .grid-column.five.columns
  • Módulos: .btn (module name), .btn-default, .btn-calltoaction; .modal, .modal-header
  • Estados .is-hidden, .is-active (Implica Javascript haciendo cambios en la clase)
  • Temas .theme-background, .theme-border, .font-1, .font-2

Este tipo de clases describen su funcionalidad y categoría. Las reglas de SMACSS son más “guías” y formas de pensar, da un vistazo al código fuente de Pure para ver ejemplos de SMACSS en acción.

Manos a la Obra

Primero, creemos un directorio simple para nuestro proyecto usando HTML5 Boilerplate, y sustituimos Normalize.css por Pure. Para este tutorial, usaremos la CDN YUI de Pure, <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">. También agregaremos Font Awesome, la tipografía colección de iconos de twitter y una línea a nuestro css (Instrucciones tomadas de weloveiconfonts). A través del HTML, veras iconos definidos con clases como “fontawesome-calendar”.

Estamos listos para empezar a diseñar con estas herramientas. Empecemos definiendo el esqueleto en usaremos para nuestros elementos en CSS. Agreguemos esto al ‘body’ de nuestro documento.

We've decided to use a color palette we found on colourlovers called Yellow Tree Frog by user LJK.

Decidimos usar una paleta de colores que encontramos en colourlovers llamada Yellow Tree Frog por el usuario LJK.

pure-frog

A partir de ahora, los vamos a referenciar desde un comentario en la parte superior de nuestro documento CSS.

Tip: Puede servirte empezar usando las palabras clave de colores que define CSS y al final remplazarlas por los códigos hex de los colores para que no tengas que estar copiando y pegando el código hex del color constantemente.

Definiendo el Menú

Pure nos da un fácil de usar módulo de menú que podemos usar para definir un menú para nuestra interfaz. Comenzamos usando la nomenclatura basada en clases para módulos de Pure, siguiendo los principios de SMACSS.

Note que este menú no va a ser funcional para este tutorial. Viendo la página, podemos percatarnos que nuestro menú fue creado de manera horizontal por defecto. Así que vamos a cambiar el fondo del menú a un negro semitransparente.

Aquí, vemos la aplicación de las convenciones usadas por Pure y SMACSS. Definimos dos nuevas clases, ‘pure-menu-blackbg’ y ‘pure-menu-fixed’, y luego los sub-estilos necesarios para soportar esas clases. Además, creamos algunas clases que remplazan a algunas subyacentes (Como la ya existente ‘pure-menu’ para usar una fuente con menor peso)

pure-menu

Creando Uno de los Módulos

Ahora, vamos a crear un módulo de la interfaz. Vamos a usar algunos estilos básicos para créate nuestros “bloques”.

Ahora que tenemos el modulo base definido, vamos a extender este creando nuevas clases con el prefijo ‘dashboard-piece’. Primero, vamos a crear clases con colores de fondo.

Como siguiente paso, vamos a definir el markup para las diferentes piezas de nuestra interfaz. Incluimos el código para un SVG con el logo de Envato, que vamos a estirar al ancho completo de la cuadricula

pure-envato-logo

Hay mucho que cubrir en el markup anterior. Primero, Estamos usando ‘pure-u-1-3’ (Y otras clases pure-u-*) dentro del elemento row en la cuadricula. Estas clases son parte del sistema de cuadricula de Pure. Para entender estas completamente, lee la documentación completa de la cuadricula de YUI; El concepto básico es que clase de cuadricula pure-u-1-3 es 1/3 parte del ancho completo de la cuadricula; una clase llamada pure-u-3-4 seria 3/4 del ancho total. El modulo con el logo de Envato tiene la clase pure-u-1, que le permite ocupar el ancho completo de la cuadricula.

Los otros elementos de los módulos de la interfaz son usados para mostrar diferentes métricas. Las siguientes reglas CSS son usadas para presentar estas métricas y otras partes internas de los módulos de la interfaz.

pure-modules

También definimos clases para barras horizontales y verticales para separar los módulos de nuestra interfaz.

Finalmente, usamos más de los elementos incluidos en Pure para crear una tabla estilizada para el módulo de “eventos”, y reusamos las clases de barras horizontales para el módulo de clima. Además extendemos estas clases con CSS personalizado. Este es el markup para los dos últimos módulos.

Y las clases de las tablas que extienden a Pure.

Para concluir, queremos agregar un poco de espacio en la parte superior del módulo de clima para que se alinee mejor con el módulo de eventos. A un lado con estas últimas piezas, agregaremos un pie de página sencillo que ira de la mano con el menú de navegación.

Haciendo la interfaz más responsiva

Pure incluye elementos de cuadricula responsivos. Estos están definidos con el siguiente selector.

Este selector puede parecer un poco complicado (Da un vistazo a los 30 selectores de CSS que debes memorizar para un mayor explicación) que primero apunta al hijo directo del elemento “.pure-g-r”. Esos hijos deben tener un atributo de clase que comience con el prefijo “pure-u”. Phew.

Apunta, por ejemplo, a este div:

Este selector es usando dentro de las @media queries para colapsar la cuadricula. Sin embargo, estos elementos unitarios colapsan al 100% debajo de 767px. Pero queremos cambiar esto para permitir que los elementos colapsen al 50% en el rango de 480 y 767. Logramos esto con las siguiente @media queries.

Un toque de Javascript

En ‘main.js’, vamos a agregar un poco de Javascript para asegurarnos que todos los módulos dentro de la misma hilera tengan la misma altura.

Este código Javascript define una función que corre a través de todos los elementos con la clase “dashboard-piece” en cada hilera, y subsecuentemente encuentra el elemento más alto en ella. Ya con esto, asigna esta altura a todos los elementos de la hilera.

Conclusión

Este tutorial solo muestra algunos de los módulos definidos en Pure. Con patrones como los usados en este tutorial, puedes crear CSS escalable, fácil de mantener y fácil de leer. Usando librerías pequeñas como Pure no permite utilizar una solución poderosa, probada y bien documentada o problemas comunes.

¿Qué más harías con Pure? ¡Déjanos saber en los comentarios!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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.