Usando módulos CSS puros, Parte 1

Pure es un conjunto de pequeños módulos CSS receptivos creados por Yahoo!. Puede usarlo en su desarrollo web y proyectos.Todo lo que necesitas hacer es Elementos de documentos web de sus fuentes CDN (red de entrega de contenido) La referencia se muestra a continuación:

Esto le da acceso a CSS puro con una huella mínima; el conjunto completo de módulos registra 4,2 KB cuando se comprime y se comprime en un archivo comprimido. La distribución y tamaño de los seis módulos se detallan a continuación:

• Básico 1.2 KB
• Cuadrícula 0.7KB
• Formulario 1.8KB
• botón 0.9KB
• Formulario 0.6KB
• Menú 1.1KB

Estos módulos también se pueden usar individualmente: puede personalizar su implementación a partir de dos «rollups», uno reactivo y otro que no responde, o un archivo zip descargado de GitHub. Esta opción también está disponible si solo desea seleccionar algunos módulos, y revisaré cada módulo para brindarle una descripción general de lo que está disponible para cada selección. Este artículo revisará los módulos Base, Cuadrículas y Formularios, y la segunda parte continuará revisando los módulos Botones, Tablas y Menús.

Pure CSS también proporciona YUI Skin Builder, que puede usar para crear su propio CSS. Es una gran herramienta para crear sus propios temas usando un estilo minimalista (Figura B)Revisaré el generador de máscaras de YUI en detalle en otra publicación de blog futura.

Figura B

También puede usar la composición para extraer módulos CSS puros para que su solicitud recupere un solo archivo, como el ejemplo que se muestra a continuación, se extrae de los módulos base, de cuadrícula y de formulario:

módulo básico

La base del módulo base Pure CSS se basa en Normalize.css, que solo se enfoca en los estilos que deben normalizarse para representar todos los elementos de manera más consistente y cumplir con los estándares de los navegadores modernos. El módulo base maneja fuentes en ems, encabezados, listas ordenadas y desordenadas, comillas en bloque, abreviaturas, direcciones y estilos en línea como punto de partida.Si solo desea utilizar el módulo base, puede hacerlo desde uso de elementos Las siguientes referencias:

cuadrícula

El módulo de cuadrícula de CSS puro proporciona una cuadrícula totalmente receptiva y personalizable con estilos g puros en filas o «cuadrículas» y estilos grid-u-*-* en columnas o celdas; cada lata g pura contiene muchas unidades. Cada unidad puede tener un nombre de clase diferente para indicar su ancho, por ejemplo, pure-u-1-2 tiene un 50% de ancho y pure-u-1-4 tiene un 25% de ancho. La única limitación es que todas las «celdas» son elementos secundarios de «grid», por lo que si tiene un elemento con un nombre de clase pure-u-*, debe estar dentro del elemento principal, por ejemplo, pure-g o pure-gr nombre de la clase. Además, de forma predeterminada, las cuadrículas CSS puras no tienen márgenes ni relleno, por lo que si necesita agregarlas, deberá incorporarlas en subcontenedores. El fragmento de código de muestra que se muestra a continuación destaca el uso del módulo Grid.

El fragmento anterior agrega estilos de contorno con fines ilustrativos de la siguiente manera Figura C:

Si solo desea utilizar el módulo de cuadrícula, puede hacerlo desde uso de elementos Las siguientes referencias:

forma

El módulo de formulario CSS puro solo requiere que agregue el nombre de clase de formulario puro a cualquier

El fragmento de código anterior se muestra a continuación Figura D:

Formularios de varias columnas que utilizan Pure Grids, incluidos los elementos de formulario en formularios apilados:

El fragmento de código anterior se muestra a continuación Figura E:

Si solo desea utilizar el módulo de formulario CSS puro, puede hacerlo desde uso de elementos Las siguientes referencias:

En mi próximo artículo sobre CSS puro, revisaré los módulos de CSS puro para botones, tablas y menús, así como también revisaré brevemente las opciones para ampliar las guías de estilo basadas en las convenciones Scalable and Modular Architecture for CSS (SMACSS). Finalmente, también revisaré algunos diseños comunes proporcionados por el sistema Pure CSS que lo ayudarán a comenzar rápidamente su próximo proyecto de diseño web.