Share
Lo que vas a crearSi bien Bootstrap se ha hecho cargo de una gran parte de la web, puede suponer una carga de rendimiento para los sitios que podrían no ser necesarios para su próximo proyecto. Pure.css es el marco de respuesta de Yahoo; Ofrece una alternativa minimalista, bien documentada y flexible..
En este tutorial, te presentaré Pure, "un conjunto de módulos CSS pequeños y sensibles que puedes usar en cada proyecto web". Revisaremos el conjunto de características y las ventajas de usar Pure y luego veremos algunos ejemplos básicos de uso..
Si tiene alguna solicitud para futuros tutoriales o preguntas y comentarios de hoy, por favor publíquelos a continuación. También puedes contactarme en Twitter. @reifman directamente.
Pure ofrece todas las características comunes que necesita en un marco de diseño web estándar. Entonces, ya sea que esté creando un tema para WordPress o un sitio web personalizado, podría ser una buena opción..
Para los gerentes de proyecto, generalmente es fundamental que los proyectos de los clientes se construyan con herramientas estándar que puedan entenderse y mantenerse fácilmente, y lo más importante, que es fácil reclutar el talento que viene con experiencia en su plataforma. Bootstrap es perfecto para esto. Pure me parece lo suficientemente simple como para que también pueda ser un buen punto de partida..
Aquí hay un resumen de los beneficios y características de Pure. Proporciona:
Accentsconagua
Sin embargo, lo más impresionante, Pure.css es super pequeño, solo 4.5KB minified + gzipped. Aquí tiene cuánto espacio ocupan los diferentes componentes de Pure en su entorno de producción:
Pure también está bien probado y funciona en IE 8+, Firefox, Chrome, Safari, iOS 6-8 y Android 4.x.
Y, todavía puedes usarlo con elementos de Bootstrap, agregándolos en donde lo necesites. Voy a mostrar un ejemplo de esto a continuación.
Pure se basa en Normalize.css, que estandariza el rendimiento del marco en todos los navegadores. Normalizar proporciona un restablecimiento de CSS predeterminado que:
El sitio web de Pure está construido con su marco, por lo que su código minimalista y bien desarrollado conduce a una guía fácil de usar y fácil de navegar. Aquí hay un ejemplo del menú izquierdo de Pure en acción:
Puedes agregar Pure a tu página a través del CDN gratuito de Yahoo. Solo agrega lo siguiente elemento en tu pagina , antes de las hojas de estilo de tu proyecto:
Para inicializar el ancho de respuesta de su sitio web, establezca una etiqueta meta para la ventana gráfica al ancho de su dispositivo:
En su página de Diseños, Pure ofrece una muestra de descargas para diferentes páginas de ejemplo para necesidades comunes de aplicaciones:
Puede navegar y descargar cualquiera de los que desee experimentar o agregar a su aplicación. Éstos incluyen:
La página Base proporciona un breve fondo sobre la base debajo del marco Pure, principalmente Normalize.css:
Normalize.css es un pequeño archivo CSS que proporciona una mejor coherencia entre navegadores en el estilo predeterminado de los elementos HTML. Es una alternativa moderna, lista para HTML5, al restablecimiento de CSS tradicional..
También puede cargar Normalize por separado usando el CDN de Yahoo para uso independiente:
Y hay otras características básicas pequeñas, como las clases, que le dicen a Pure que cargue imágenes de forma responsiva por ventana gráfica:
Pero ahora, echemos un vistazo a algunos de los diseños de ejemplo que ofrece Pure.
Las cuadrículas son un aspecto clave de los diseños de sitios web que Pure hace bastante simples. Este es un ejemplo rápido de una cuadrícula pura de cuatro columnas en una pantalla de escritorio:
Y así es como se reduce a la mitad en una ventana gráfica:
Y por último, una sola columna en un teléfono inteligente:
Las rejillas puras constan de dos tipos de clases: rejillas y unidades. Los elementos hijos de divs de grilla deben ser divs de unidad. Tu contenido va dentro de la unidad divs. Las clases de unidades se nombran para representar sus anchos. Por ejemplo, pure-u-1-4 tiene un ancho del 25%..
Aquí está el código para el cuarto de respuesta de arriba:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Dolor Sit Amet
Quis nosrud ejercicio de ullamco labouris is isisi aliquip ex ea commodo consecuat. Duis aute ire dolor en reprehenderit en voluptate velit esse.
Laboratorio proident
In culpa qui officia deserunt mollit anim id est laborum. Incididunt ut labore et dolore magna aliqua. Utilicémoslo y minimicémoslo, quisiéramos practicar el ejercicio ullamco..
Consectetur Praesent
Entero vitae lectus accumsan, egestas dui eget, ullamcorper urn. En feugiat tortor en turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
Como puedes ver arriba,
Puedes aprender más sobre Pure Grids aquí.
Formas
Pure tiene soporte para alinear campos de entrada dentro de formularios y para diseñar campos especializados, tales como:
- Formas en linea
- Formas apiladas
- Formas de dos columnas
- Formas multi-columna (mostrado anteriormente)
- Entradas agrupadas
- Entradas requeridas
- Entradas deshabilitadas
- Entradas de solo lectura
- Entradas redondeadas
- Casillas de verificación y radios
Puedes ver todo esto descrito aquí. Exploremos un formulario de dos columnas, al que Pure se refiere como un formulario alineado:
Utilizando el
forma pura alineadaclase congrupo de control puro (s), Pure garantiza que cada conjunto de campos se coloque correctamente como se muestra arriba.forma>Es una forma bastante simple de construir una forma altamente utilizable y bien diseñada..
Mesas
Pure hace que la construcción y el formateo de tablas también sea bastante fácil. Aquí hay un ejemplo de una tabla con rayas horizontales:
Puede ver la tabla anterior codificada simplemente agregando
tabla pura imparClasifique filas alternativamente a través de su código para cambiar el trazado:
# Hacer Modelo Año 1 Honda Acuerdo 2009 2 Toyota Camry 2012 3 Hyundai Elantra 2010 4 Vado Atención 2008 5 Nissan Sentra 2011 6 BMW M3 2009 7 Honda Cívico 2010 8 Kia Alma 2010 Hay una serie de otros ejemplos de tablas que se muestran aquí..
Los menús
Los menús en Pure también se facilitan fácilmente, incluyendo:
- Menu vertical
- Menú horizontal
- Artículos seleccionados y deshabilitados
- Listas deplegables
- Menú vertical con submenús
- Menú horizontal desplazable
- Menú vertical desplazable
- Menú vertical sensible
- Menú responsivo de desplazamiento horizontal
- Menú horizontal a vertical sensible
Ver todos los menús ilustrados aquí. Así es como codificarías un menú desplegable:
Básicamente, es sólo un
menú-puro-horizontaleslista de menús purosypure-menu-item pure-menu-has-children pure-menu-allow-hovery luego una lista de elementos del menú hijo:
- Casa
- Contacto
- Gorjeo
- Tumblr Blog
Pure proporciona una muestra de JavaScript para implementar funciones de accesibilidad adicionales dentro de sus menús.
Ir más lejos
El sitio web de Pure proporciona algunas guías excelentes para construir en el marco:
- Usando herramientas con Pure como Bower y Grunt
- Personalizando Pure y usando slices del codebase por su cuenta
- Extendiendo características y clases puras
Y puedes explorar combinando piezas de Pure con Bootstrap y JavaScript. Si desea comenzar con el tamaño minimalista y el estilo de Pure, aún puede aprovechar varias características de Bootstrap, solo cargando lo que necesita.
Este es un ejemplo de un diálogo modal de Bootstrap en la parte superior de Pure, que puede ver en la página de la extensión de Pure:
Para concluir
Bootstrap se está convirtiendo en el IBM de los frameworks web. Es responsivo, es un estándar, y no puedes ser despedido por elegirlo (en un contrato reciente, tuvimos que despedir a un desarrollador de temas por no implementar Bootstrap correctamente). Pero, si quieres algo más pequeño, más rápido y más simple, entonces echa un vistazo a Pure.css.
Si lo intentas, házmelo saber sobre tu experiencia en los comentarios a continuación. También puedes contactarme directamente en Twitter @reifman. Y también puede navegar por la página de mi instructor Envato Tuts + para leer mis otros tutoriales.
enlaces relacionados
- El Blog Puro
- Puro en GitHub
- Puro: ¿Qué, por qué y cómo? (Envato Tuts +)
- Comparar con Bootstrap
