Si eres como muchos desarrolladores, has tenido tu relleno de marcos CSS basados en cuadrícula. Bueno, estás de suerte porque hoy vamos a ver una nueva versión del concepto de un marco CSS.
EZ-CSS busca abordar muchas de las cosas que odias de los marcos basados en cuadrículas, al tiempo que conserva la funcionalidad de ayudar en la creación de diseños de varias columnas en varios navegadores.
¿Qué es EZ-CSS?
EZ-CSS es un marco CSS desarrollado por Thierry Koblentz. Es similar en concepto a otros marcos que has visto, como 960.gs o Blueprint CSS, pero también es completamente diferente.
La principal diferencia entre EZ-CSS y otros marcos que has visto es que aquí no estás comprometido con una cuadrícula establecida, sino que tienes un gran grado de libertad en el ancho de tus columnas. De hecho, puede crear tantas columnas como desee, de cualquier ancho y con cualquier tamaño de canal.
EZ-CSS también utiliza un diseño de módulo único que permite la creación de prototipos súper rápidos. Hablaremos de esto más adelante, pero básicamente confía en la mayoría de las veces en copiar y pegar piezas precompiladas de un diseño que puede combinar y anidar como quiera para crear un todo complejo.
Los beneficios finales de usar este marco son el tamaño y la simplicidad. El archivo CSS requerido solo tiene alrededor de 1 KB y todo el sistema es mucho más fácil de aprender que otros marcos de trabajo que has visto. La falta de restricciones y trucos adicionales como la inserción de divs para eliminar sus flotadores hace que el flujo de trabajo sea más sencillo con (teóricamente) menos marcas.
EZ.CSS
Lo primero que debe hacer es descargar el archivo ez.css gratuito. Para hacer esto, vaya a la sección de descargas de EZ-CSS y tome ez-min.css. Hay muchos otros archivos opcionales, pero este es realmente el único que necesita para comenzar.
Incluya esto en un directorio con un archivo HTML básico y vincúlelo con el siguiente fragmento de código:
Obviamente, tendrá que personalizar la ruta para que se ajuste a su propia jerarquía de carpetas.
Entendiendo modulos
Como mencioné anteriormente, la funcionalidad principal de EZ-CSS gira en torno a una serie de módulos predefinidos que simplemente copia y pega en su código para definir el diseño.
Hay siete módulos para elegir en la página de diseños del sitio web: Plain Box, 2A, 2B, 3A, 3B, 4A y 4B. Como puede ver en la imagen de abajo, cada módulo contiene 1, 2, 3 o 4 columnas.
Usando estos simples bloques de construcción puedes crear una tonelada de diseños increíblemente complejos. Usted logra esto a través de la anidación. Digamos que utiliza el módulo 2A para crear un diseño de dos columnas y quiere dividir la columna más a la izquierda en tres secciones. Simplemente pegue el código para el módulo 3A dentro del código para el módulo 2A y listo.
También en la página de diseños hay varios diseños precompilados comunes que ya combinan los módulos y, por lo tanto, realizan gran parte del trabajo por usted.
Un ejemplo
Para tener una idea de cómo funciona todo, creemos una maqueta rápida y sucia utilizando el marco EZ-CSS. Básicamente, estaremos construyendo uno de los diseños prefabricados, pero desde cero para que pueda tener una idea del proceso de creación del suyo.
Si siguió los pasos anteriores, debe tener un directorio con un archivo HTML y el archivo ez-min.css. Agregue a esto un archivo style.css y vincúlelo en su HTML. A continuación, toma el texto de la? Caja simple? Módulo y pégalo en el cuerpo de tu CSS.
Importante: Ya que este será nuestro contenedor principal, cambié el? Ez-wr? clase para el? ez-mw? clase. Este centro de pasos alinea todo el diseño, a la izquierda alinea el texto en el contenedor y evita que su nuevo diseño borre cualquier flotante anterior (izquierda).
Añadiendo el encabezado
La primera sección que queremos agregar es un encabezado. Dado que esto se extenderá a lo largo de toda la página, necesitamos otra? Caja simple? Módulo (esta vez abandona la clase ez-wr). Para insertar esto, lo anidamos dentro de la? Ez-mw? div, reemplazando el? ez-box? div que solía estar ahi Esto suena más complejo de lo que realmente es y da como resultado las pocas líneas de código a continuación.
Tenga en cuenta que también incorporé un par de etiquetas de identificación / clase personalizadas para que podamos diseñar estos elementos según nuestras preferencias. No quería diseñar las clases de EZ-CSS existentes porque podría usarlas de manera diferente en todo el sitio.
Estilo de la cabecera
Para tener una idea de cómo está todo esto, vamos a avanzar y agregaremos algunos estilos al encabezado y al cuerpo.
Hay algunas cosas importantes a tener en cuenta aquí. Primero, los diseños predeterminados de EZ-CSS son fluidos. Esto es increíble para algunos propósitos, pero no quería un diseño fluido, así que simplemente apliqué un ancho al contenedor para deshacerme de él. Todo lo demás son solo algunos estilos rápidos y desordenados que puse para darle al encabezado algún tipo de apariencia. Repetiré estos estilos para el pie de página, así que les hice una clase en lugar de una identificación.
El resultado es cualquier cosa menos notable, pero es un comienzo!
Creación de un diseño de 2 columnas
Para agregar algo de contenido, tomaremos el módulo 2A y lo tiraremos dentro del envoltorio principal después del encabezado. Colocaremos algunas imágenes ficticias en la columna izquierda y el texto en la columna derecha.
Todavía no hay escasez de divs (nueve para ser exactos), pero es mejor de lo que era. Al parecer, los contenedores ez-box están en su mayoría allí para un estilo opcional. Tomamos una ruta diferente para nuestro estilo, por lo que no tuvimos que incluirlos. Esto agrega un poco de trabajo adicional a la acción de copiar y pegar, pero en realidad no es mucho. Solo tenga cuidado con los divs que corte y observe cuidadosamente cómo afectan su diseño.
Conclusión
Hace unos días nunca había oído hablar de EZ-CSS, así que todavía estoy tratando de decidir si me gusta. Me gusta que sea una nueva versión de un marco CSS que no es la misma estructura basada en cuadrícula que hemos visto de cincuenta maneras diferentes que en última instancia son las mismas en un nivel conceptual.
Mientras sigo jugando con EZ-CSS para ver qué es posible y qué no, me encantaría escuchar tus pensamientos. Ha demostrado una y otra vez que es más perspicaz que yo en el análisis de la utilidad de estas herramientas en el mundo real, por lo que le estoy devolviendo esta. Aquí hay algunas preguntas para empezar una conversación:
1. ¿EZ-CSS resuelve los problemas que tiene con 960 y otros marcos de cuadrícula?
2. ¿Hay algunos pros y contras que me perdí?
3. ¿Cuáles son algunas restricciones a este sistema?
4. ¿Es EZ-CSS algo que podemos usar en el mundo real o solo para crear prototipos?
¡Ponga sus dos centavos en estos y otros temas relacionados que vengan a su mente!