Este tutorial le presentará Pure, una biblioteca CSS hecha de pequeños módulos, que puede ayudarlo a escribir diseños completamente sensibles, de una manera muy rápida y fácil. En el camino, lo guiaré a través de la creación de una página simple para resaltar cómo puede usar algunos de los componentes de la biblioteca.
Por qué crear diseños receptivos?
Durante los últimos años en desarrollo web., Tres Las palabras que rebotan una y otra vez son: Diseño web responsivo (RWD). En este punto, ya debería saber qué es, pero, en caso de que se lo haya perdido, aquí hay algunos recursos para llenar los vacíos:
Artículos sobre WebDesign Tuts+
Cursos en Tuts + Premium
Diseño web responsivo por Ethan Marcotte
Pero la pregunta es: ¿por qué ir responsivo? La respuesta es que no tenemos ningún control sobre qué resolución utilizará el próximo dispositivo cuando visite nuestro sitio web. Ya no podemos mostrar frases como "Mejor vista en resolución 1024x768" (aunque todavía puedes encontrarlas 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 la propagación de dispositivos móviles conectados a Internet. Además, según StatCounter, actualmente ~ 16% de los usuarios están conectados a través de un dispositivo móvil. Ahora no estoy diciendo eso RWD es solo una cuestión de optimizar un sitio web para un tamaño de pantalla determinado, 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 usando..
Dicho esto, también queda claro que no todos trabajamos para una empresa en la que cada persona tiene un rol único (diseñador, desarrollador, evaluador, etc.). Digamos que eres un desarrollador en solitario, que trabajas como freelance y no sabes mucho sobre diseño web. Hay muchas bibliotecas disponibles que pueden acelerar su flujo de trabajo. Los más completos son seguramente Boostrap y Foundation, pero a veces pueden ser excesivos y es posible que necesites algo más pequeño. En estos casos, Yahoo ha lanzado un nuevo proyecto interesante que podemos usar, llamado Pure.
Lo que es puro?
Citando el sitio web de Pure, es un conjunto de módulos CSS pequeños y sensibles que puede utilizar en cada proyecto web. Como se dijo anteriormente, la biblioteca completa es realmente liviana, ya que solo se ha reducido y gZip a 4.2KB, pero para mantener su sitio web aún más ligero, puede incluir solo algunos de los módulos disponibles. Básicamente, está compuesto por los siguientes módulos:
Base
Cuadrícula
Formas
Botones
Mesas
Los menús
Una de las cosas que realmente aprecio de Pure es que se basa en Normalize.css, una biblioteca bien conocida que presenta elementos de forma más consistente y en línea con los estándares modernos y también funciona en navegadores más antiguos. Ya que es realmente pequeño, no ofrece una solución completa para todos sus problemas, pero tiene varios elementos de interfaz de usuario comunes creados previamente que puede encontrar en muchos sitios web en la web. Otra característica interesante de Pure es que es altamente extensible y personalizable. Los autores utilizaron SMACSS para construirlo y todas sus clases comienzan con puro-, para que puedas reconocerlos fácilmente.
Si bien Pure es un proyecto interesante a tener en cuenta, tenga en cuenta que es realmente nuevo y puede que no sea una buena opción para proyectos grandes. 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 marcos más maduros y su documentación también podría mejorarse. Sin embargo, me gustó y, como precursor, tiene la ventaja de estudiar y aprender Pure desde el principio, que podría terminar siendo el próximo proyecto conocido en la web..
Veamos puro en acción
Dicen que una imagen vale más que mil palabras. Para nosotros, como desarrolladores y diseñadores, una demostración con la que podemos jugar es aún mejor. Entonces, para ver qué puede hacer Pure por nosotros, creemos una aplicación de demostración básica. Nuestra demostración consistirá en una página de inicio simple que contiene información sobre mí (a veces mi imaginación me asusta). La imagen de abajo muestra cómo debe verse el resultado final en una pantalla grande:
Y la siguiente imagen, en cambio, muestra cómo se verá en un teléfono inteligente:
Paso 1: Crear el menú horizontal
Como dije, Pure tiene varios elementos comunes creados previamente que puede encontrar en muchos sitios web en la web. Un menú horizontal es seguramente 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 que envuelve una lista desordenada que contiene los enlaces principales de nuestro sitio web. Una vez que se crea la lista, tenemos que mostrarla horizontalmente. Para lograr esto, tenemos que aplicar tres clases a la envoltura de lista (): .menú puro, .menú puro abierto, y .menú-puro-horizontal. La primera clase aplica reglas que son comunes a todos los menús en Pure. los .menú puro abierto clase se utiliza para mostrar (en lugar de ocultar) los elementos de la lista, mientras que .menú-puro-horizontal clase es la responsable de mostrar los elementos de la lista en la misma línea. Tenga en cuenta que por defecto, el menú no está centrado..
Ahora, para mejorar la interfaz de usuario, debemos resaltar el elemento de la lista que enlaza con la página actual. Esto se hace aplicando el .menú puro seleccionado clase a la elemento que desea resaltar. Al hacerlo, el color del texto cambiará de gris a negro..
El código completo de nuestro menú se muestra a continuación:
Paso 2: La descripción del autor
Después del menú, puedes ver que tenemos una "fila" ideal que contiene en el lado izquierdo, una foto y en el lado derecho, una pequeña descripción de mí. Esta "fila", es en realidad un rejilla de respuesta hecho 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 que 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 la cuadrícula se apilan y ocupan el 100% del ancho disponible. Tenga en cuenta que las unidades tienen un ancho del 100%, por lo que si los elementos dentro de ellas tienen un ancho menor, ocuparán solo una 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 la cuadrícula se apilan..
Como se señaló anteriormente, Pure tiene un módulo específico para la gestión de grillas. Para declarar una cuadrícula de respuesta, debe aplicar al contenedor una clase llamada .pure-g-r. Las unidades de la cuadrícula, sin embargo, comparten un nombre similar, .puro-u - * - *, donde la parte final de la clase especifica la cantidad de espacio que ocupará la unidad dada. Por ejemplo, si aplica a un elemento el .puro-u-1-4 clase, se reservará el 25% del ancho disponible, como hice para la foto. Otro ejemplo podría ser .puro-u-2-3 lo que permitirá que la unidad ocupe el 66.6% del espacio de la cuadrícula.
Este sistema de cuadrícula es realmente interesante porque puede ahorrarle mucho tiempo si no sabe cómo administrar flotador, claro, y otras reglas para crear diseños. Además, le ahorrarán todo el dolor de administrar el lado sensible del diseño.
Dicho esto, el código que implementa la primera cuadrícula debería verse así:
Aurelio de rosa
Soy un desarrollador web y de aplicaciones italiano que tiene una licenciatura en Informática y más de 5 años de experiencia en programación para la web utilizando HTML5, CSS3, JavaScript y PHP. Yo uso principalmente el LÁMPARA pila y marcos como jQuery, jQuery Mobile y Cordova (PhoneGap). Mis intereses también incluyen seguridad web, accesibilidad web, SEO y WordPress.
Actualmente trabajo por cuenta propia trabajando con las tecnologías citadas. También soy un blogger habitual para varias redes (SitePoint, Tuts + y FlippinAwesome) donde escribo artículos sobre los temas con los que trabajo habitualmente y más.
Paso 3: La cuadrícula de información
La segunda y última cuadrícula se divide en tres partes iguales. Los creé para mostrarle otros componentes de la biblioteca, para que pueda tener una buena visión general de ellos. 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, exploremos cada unidad de esta cuadrícula sensible.
Paso 4: Una tabla receptiva
Otro de los módulos disponibles en Pure, es Tablas. Como su nombre lo dice, contiene reglas para diseñar un
Elemento y sus hijos. De forma predeterminada, las tablas tendrán un borde vertical aplicado a columnas separadas visualmente. Sin embargo, también puede agregar un borde horizontal, aplicando el .mesa de borde puro clase o mostrar sólo este último utilizando el .mesa-pura-horizontal clase a la
elemento. Además, también puede crear tablas seccionadas para ayudar al usuario a leer los datos. Para lograr esto, tienes dos posibilidades. El primero funcionará en los navegadores que soportan nth-child y consiste en aplicar el .tabla de rayas puras nombre de la clase al
elemento. El segundo, en cambio, funciona en todos los navegadores, incluido Internet Explorer 8 y versiones inferiores, pero es más detallado. Consiste en añadir el .tabla pura impar nombre de clase a todos los demás
elemento. Por razones de compatibilidad, voy por el segundo enfoque..
Actualmente, las tablas tienen un problema cuando se ven en pantallas pequeñas, pero se solucionarán en la próxima versión. Tenga en cuenta que no lo verá en la demostración porque lo arreglé. Cinco para mi.
El código que crea la tabla de bandas se muestra a continuación:
Tabla de precios graciosos
Número de horas
Precio (€)
Seguro (%)
1
30 €
0%
5
135 €
10%
10
255 €
15%
20
480 €
20%
50
1050 €
30%
Paso 5: Un formulario de contacto apilado
Los formularios son otro módulo más de la biblioteca Pure. Le permite mostrar sus formularios en diferentes tipos de estilos. En esta demostración, crearemos un formulario apilado, donde los elementos de entrada están debajo de las etiquetas. Para ello, tenemos que añadir el .forma pura y el .de forma pura apilada clases a la elemento. Entonces tenemos que colocar tanto el etiqueta y el entrada etiquetas dentro de un envoltorio, donde aplicaremos la .grupo de control puro clase y luego poner todos estos envoltorios en una elemento. El botón enviar y reiniciar también tendrá una envoltura, pero su envoltura tendrá la clase .controles puros. Por favor, tenga en cuenta que para el botón Enviar, usamos la clase. .botón primario puro para resaltarlo. La clase citada pertenece al módulo Botones y se utiliza para cambiar el estilo del botón, aplicando un color azul..
Aquí es cómo debe verse el código de su formulario:
Contáctame
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á decorado con un borde negro alrededor. Para usarlo, aplicaremos la envoltura de lista, dos de las tres clases que ya hemos usado en el primer paso, es decir .menú puro y .menú puro abierto. Además, para crear el encabezado, debemos agregar otro elemento y aplicarle el .encabezado de menú puro clase.
El código para este menú se lista a continuación:
Donde encontrarme
Mis perfiles
Gorjeo
LinkedIn
GitHub
Google+
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. Siéntase libre de enviar problemas, emitir solicitudes de extracción y contribuir.
Accentsconagua
Share
