Construye una interfaz de panel de control modular usando Pure

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.

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.

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”.

/* in main.css */

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

<!-- in index.html, in place of normalize -->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=fontawesome">

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.

<header>
	<nav></nav><!-- this is where our nav menu will go -->
</header>
<section class="dashboard">
	<!-- our dashboard pieces will go here -->
</section>
<footer>
	<!-- copyright information can go here-->
</footer>

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.

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

/*
	red: #E73F3F
	orange: #F76C27
	yellow: #E7E737
	blue: #6D9DD1
	purple: #7E45D3
*/

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.

<nav class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">WebDesignTuts</a>
    <ul>
        <li class="pure-menu-selected"><a href="#">Dashboard</a></li>
        <!-- other items ... -->
    </ul>
</nav>

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.

.pure-menu {
    font-weight: lighter;
}
.pure-menu.pure-menu-fixed {
    position: fixed;
}
.pure-menu.pure-menu-blackbg {
    background: #222;
}
.pure-menu.pure-menu-blackbg .pure-menu-heading:hover {
    color: #efefef;
}
.pure-menu.pure-menu-blackbg a {
    color: #fff;
}
.pure-menu.pure-menu-blackbg a:hover {
    background: #666;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a {
    background: #7E45D3;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a:hover {
    color: #efefef;
}

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)

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”.

.dashboard-piece {
    min-height: 300px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    position: relative;
    padding-bottom: 40px;
}

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.

.dashboard-piece-redbg {
    background-color: #E73F3F;
}
.dashboard-piece-orangebg {
    background-color: #F76C27;
}
.dashboard-piece-yellowbg {
    background-color: #E7E737;
}
.dashboard-piece-bluebg {
    background-color: #6D9DD1;
}
.dashboard-piece-purplebg {
    background-color: #7E45D3;
}
.dashboard-piece-graybg {
    background-color: #798388;
}

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

<section class="dashboard pure-g-r clearfix">
    <div class="pure-u-1 dashboard-piece dashboard-piece-redbg dashboard-piece-logo">
        <h1>
            <svg x="0px" y="0px" width="132.89669167px" height="120px" viewBox="0 0 73.351 82.791" enable-background="new 0 0 73.351 82.791" xml:space="preserve">
                <g><path fill="#FFFFFF" d="M7.372,27.487C-1.903,39.206-2.261,55.13,5.369,67.05c6.858-17.611,15.499-37.423,26.14-55.114
                C21.514,16.159,12.19,21.405,7.372,27.487z M73.333,2.971c-0.11-0.924-0.589-1.7-1.276-2.216C71.4,0.204,70.53-0.084,69.612,0.021
                c0,0-2.738,0.589-7.093,1.704C41.722,21.698,24.654,48.459,11.43,74.155c0.492,0.427,0.991,0.857,1.512,1.268
                c14.784,11.696,36.239,9.194,47.936-5.57C74.349,52.822,73.333,2.971,73.333,2.971z"/></g>
            </svg>
        </h1>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-bluebg">
        <div class="dashboard-content">
            <h2><i class="fontawesome-twitter"></i></h2>
            <p class="dashboard-metric">+20 followers<span class="light"><i class="fontawesome-angle-up"></i>6.8%</span></p>
        </div>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-orangebg">
        <div class="dashboard-content">
            <h2><i class="fontawesome-github"></i></h2>
            <p class="dashboard-metric">
                142 Commits
                <div class="light bar-horizontal">
                    <div class="bar-horizontal-bar" style="width:57%">
                        57% Capacity
                    </div>
                </div>
            </p>
        </div>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-yellowbg">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-check"></i></h2>
                <div class="dashboard-metric">
                    <strong>63 / 90</strong><br><small>Tasks Complete</small>
                </div>
            </p>
        </div>
        <div class="bar-vertical" style="height:70%;"></div>
    </div>
</section>

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.

.dashboard-piece-logo h1 {
    line-height: 100px;
}
.dashboard-piece-logo svg {
    margin-top: 80px;
}
.dashboard-piece h1 {
    line-height: 300px;
    font-size: 3.6em;
    margin: 0;
}
.dashboard-content {
    position: relative;
    z-index: 999;
}
.dashboard-content p {
    font-weight: lighter;
}
.dashboard-content .light {
    opacity: 0.4;
    display: block;
}
.dashboard-content h2 i {
    font-size: 4em;
    opacity: 0.4;
}
.dashboard-metric {
    text-transform: uppercase;
    font-size: 1.6em;
    line-height: 1;
}
.dashboard-metric i {
    margin-right: 0.6em;
}

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

.bar-horizontal {
    height: 36px;
    background-color: rgba(255,255,255,0.4);
    position: relative;
    display: block;
    margin-top: 20px;
}
.bar-horizontal-bar {
    background: #fff;
    height: 36px;
    line-height: 36px;
    color: #444;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    position: absolute;
    top: 0;
    left: 0;
}
.bar-vertical {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: rgba(200,200,200,0.5);
}

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.

<section class="dashboard pure-g-r clearfix">
    <div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-calendar"></i></h2>
                <h3>Upcoming Events</h3>
                <table class="pure-table pure-table-center pure-table-horizontal pure-table-dark">
                    <thead>
                        <tr>
                            <th>With:</th>
                            <th>Where:</th>
                            <th>When:</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John Smith</td>
                            <td>WDTuts Office</td>
                            <td>Jun 20, 9:30AM</td>
                        </tr>
                        <tr class="pure-table-odd">
                            <td>George Bluth</td>
                            <td>Sudden Valley</td>
                            <td>Jun 23, 4PM</td>
                        </tr>
                        <tr>
                            <td>Michael Scott</td>
                            <td>Scranton, PA</td>
                            <td>Jun 24, 2:45PM</td>
                        </tr>
                    </tbody>
                </table>
            </p>
        </div>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-purplebg weather weather-rain">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-umbrella"></i></h2>
                <div class="dashboard-metric">
                    <strong>80% Chance</strong><br><small>of Precipitation</small>
                    <div class="light bar-horizontal">
                        <div class="bar-horizontal-bar" style="width:80%">80%</div>
                    </div>
                </div>
            </p>
        </div>
    </div>
</section>
<footer>
    &copy; 2013 Envato
</footer>

Y las clases de las tablas que extienden a Pure.

.pure-table-center {
    margin: 0 auto;
}
.pure-table-dark { color: #ddd; }
.pure-table-dark .pure-table-odd { color: #444; }

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.

.weather {
    padding-top: 60px;
}
footer {
    background: rgb(20,20,20);
    color: #aaa;
    padding: 10px;
    font-size: 0.6em;
    font-weight: bold;
}

Haciendo la interfaz más responsiva

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

.pure-g-r>[class ^="pure-u"]

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:

<section class="dashboard pure-g-r clearfix">
    <div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">

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.

@media only screen and (max-width:767px) {
    .pure-g-r>[class ^="pure-u"]{width:50%; float: left;}
}
@media only screen and (max-width:480px) {
    .pure-g-r>[class ^="pure-u"]{width:100%; }
}

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.

(function(){
var to;

	function pieceHeights(){
		to = setTimeout(function(){
			$(".pure-g-r").each(function(i,el){
				var contentPieces = $(el).find(".dashboard-piece");
				var max = 0;
				contentPieces.css("min-height","");
				$.grep(contentPieces, function(el,i){
					max = Math.max($(el).outerHeight(),max);
				});
				contentPieces.css("min-height", max);
			});
		}, 400);
	}

	$(window).on("resize", function(){
		clearTimeout(to);
		pieceHeights();
	}).trigger("resize");

}());

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!