Spanish (Español) translation by Jorge Montoya (you can also view the original English article)
¿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:
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:
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:
1 |
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> |
Para inicializar el ancho adaptivo de su sitio web, establezca una etiqueta meta para el ancho de pantalla de su dispositivo:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
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:
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:
1 |
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css"> |
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:
1 |
<img class="pure-img" src="..."> |
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:
Y así es como se reduce en una ventana de tamaño de tableta a la mitad:
Y por último una sola columna en un teléfono inteligente:
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:
1 |
<div class="grids-example"> |
2 |
<div class="pure-g"> |
3 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
4 |
<div class="l-box"> |
5 |
<h3>Lorem Ipsum</h3> |
6 |
<p>
|
7 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. |
8 |
</p>
|
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
13 |
<div class="l-box"> |
14 |
<h3>Dolor Sit Amet</h3> |
15 |
<p>
|
16 |
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
17 |
</p>
|
18 |
</div>
|
19 |
</div>
|
20 |
|
21 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
22 |
<div class="l-box"> |
23 |
<h3>Proident laborum</h3> |
24 |
<p>
|
25 |
In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. |
26 |
</p>
|
27 |
</div>
|
28 |
</div>
|
29 |
|
30 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
31 |
<div class="l-box"> |
32 |
<h3>Praesent consectetur</h3> |
33 |
<p>
|
34 |
Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus. |
35 |
</p>
|
36 |
</div>
|
37 |
</div>
|
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
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:
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.
1 |
form class="pure-form pure-form-aligned"> |
2 |
<fieldset>
|
3 |
<div class="pure-control-group"> |
4 |
<label for="name">Username</label> |
5 |
<input id="name" type="text" placeholder="Username"> |
6 |
</div>
|
7 |
|
8 |
<div class="pure-control-group"> |
9 |
<label for="password">Password</label> |
10 |
<input id="password" type="password" placeholder="Password"> |
11 |
</div>
|
12 |
|
13 |
<div class="pure-control-group"> |
14 |
<label for="email">Email Address</label> |
15 |
<input id="email" type="email" placeholder="Email Address"> |
16 |
</div>
|
17 |
|
18 |
<div class="pure-control-group"> |
19 |
<label for="foo">Supercalifragilistic Label</label> |
20 |
<input id="foo" type="text" placeholder="Enter something here..."> |
21 |
</div>
|
22 |
|
23 |
<div class="pure-controls"> |
24 |
<label for="cb" class="pure-checkbox"> |
25 |
<input id="cb" type="checkbox"> I've read the terms and conditions |
26 |
</label>
|
27 |
|
28 |
<button type="submit" class="pure-button pure-button-primary">Submit</button> |
29 |
</div>
|
30 |
</fieldset>
|
31 |
</form>
|
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:
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:
1 |
<table class="pure-table"> |
2 |
<thead>
|
3 |
<tr>
|
4 |
<th>#</th> |
5 |
<th>Make</th> |
6 |
<th>Model</th> |
7 |
<th>Year</th> |
8 |
</tr>
|
9 |
</thead>
|
10 |
|
11 |
<tbody>
|
12 |
<tr class="pure-table-odd"> |
13 |
<td>1</td> |
14 |
<td>Honda</td> |
15 |
<td>Accord</td> |
16 |
<td>2009</td> |
17 |
</tr>
|
18 |
|
19 |
<tr>
|
20 |
<td>2</td> |
21 |
<td>Toyota</td> |
22 |
<td>Camry</td> |
23 |
<td>2012</td> |
24 |
</tr>
|
25 |
|
26 |
<tr class="pure-table-odd"> |
27 |
<td>3</td> |
28 |
<td>Hyundai</td> |
29 |
<td>Elantra</td> |
30 |
<td>2010</td> |
31 |
</tr>
|
32 |
|
33 |
<tr>
|
34 |
<td>4</td> |
35 |
<td>Ford</td> |
36 |
<td>Focus</td> |
37 |
<td>2008</td> |
38 |
</tr>
|
39 |
|
40 |
<tr class="pure-table-odd"> |
41 |
<td>5</td> |
42 |
<td>Nissan</td> |
43 |
<td>Sentra</td> |
44 |
<td>2011</td> |
45 |
</tr>
|
46 |
|
47 |
<tr>
|
48 |
<td>6</td> |
49 |
<td>BMW</td> |
50 |
<td>M3</td> |
51 |
<td>2009</td> |
52 |
</tr>
|
53 |
|
54 |
<tr class="pure-table-odd"> |
55 |
<td>7</td> |
56 |
<td>Honda</td> |
57 |
<td>Civic</td> |
58 |
<td>2010</td> |
59 |
</tr>
|
60 |
|
61 |
<tr>
|
62 |
<td>8</td> |
63 |
<td>Kia</td> |
64 |
<td>Soul</td> |
65 |
<td>2010</td> |
66 |
</tr>
|
67 |
</tbody>
|
68 |
</table>
|
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:
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:
1 |
<div class="pure-menu pure-menu-horizontal"> |
2 |
<ul class="pure-menu-list"> |
3 |
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li> |
4 |
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> |
5 |
<a href="#" id="menuLink1" class="pure-menu-link">Contact</a> |
6 |
<ul class="pure-menu-children"> |
7 |
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li> |
8 |
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li> |
9 |
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li> |
10 |
</ul>
|
11 |
</li>
|
12 |
</ul>
|
13 |
</div>
|
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:
- Utilizando Herramientas con Pure tales como Bower y Grunt
- Personalizando Pure y utilizando fragmentos del código base de manera independiente
- Extendiendo Pure características y clases
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:
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
By
