Normalize CSS
Normalize: qué es y para qué sirve
Normalize.css es un pequeño fichero CSS que otorga una mejor consistencia entre navegadores en el estilo predeterminado de los elementos HTML. Es una alternativa moderna al tradicional Reset CSS, preparada para HTML5 y que ocupa solo 8 kb.
Cada navegador tiene su propia interpretación de las etiquetas de HTML, y aunque suelen ser bastante similares, siempre hay detalles que marcan la diferencia. La tarea principal de Normalize CSS es mantener el mismo estilo entre los distintos navegadores, eliminando todo el css, y evitando aquellos estilos propios que cada navegador tiene por defecto, como es el caso de los márgenes y paddings. Esto hace que la hoja de estilo de tu proyecto se vea igual independientemente del navegador donde se visualice.
Además de corregir algunos errores y bugs comunes que están fuera del alcance de los resets, Normalize CSS es modular. Esto quiere decir que el proyecto se divide en distintas secciones relativamente independientes, lo que facilita la tarea de determinar exactamente qué elementos necesitan estilos específicos y te da la posibilidad de eliminar secciones que sabes que no serán necesarias para tu proyecto.
Reset css: qué es y para qué sirve
Reset CSS es una colección de reglas CSS utilizada para establecer algunos valores iniciales para el formato de elementos HTML. Su función principal, tal como la de Normalize CSS, es minimizar las diferencias visuales que pueden existir a la hora de mostrar una misma página web en distintos navegadores.
Si eres un desarrollador front-end, probablemente hayas utilizado o al menos oído hablar de Reset CSS, ya que es un archivo muy utilizado a la hora de empezar un proyecto web.
La función principal de Reset CSS (como su nombre lo indica) es resetear todos los estilos predeterminados para de esta forma reducir las inconsistencias entre los navegadores. Por lo general, el reset CSS se agrega inmediatamente cuando comienza el proyecto, para evitar futuros problemas de compatibilidad de los formatos.
Aunque su función es muy similar, podemos encontrar algunas diferencias significativas entre Normalize CSS y Reset CSS.
Normalize CSS vs Reset CSS
Como hemos visto anteriormente, cada navegador tiene sus propios estilos que difieren uno de otros, causando inconsistencias. Ya sabemos que es Normalize CSS y para qué sirve, sus características y atributos, como también Reset CSS, pero ahora el mayor interrogante es, ¿Normalice CSS o Reset CSS?
Utilizar un poco de ambos es una buena estrategia. Darle mayor protagonismo a Normalice CSS, sin dejar de utilizar las ventajas de Reset CSS, sería como aprovechar lo mejor de dos mundos. Dependiendo del proyecto en el que te encuentres, claro; pero es posible que puedas experimentar que tanto uno como el otro pueden fusionarse perfectamente.
CSS Grid, ¿Sirve para realizar diseños responsive?
CSS Grid es un sistema de diseño bidimensional que se utiliza para crear elementos responsive de una aplicación web. Gracias a su uso, es posible realizar un maquetado para diversos navegadores, ya sean para computadoras o teléfonos móviles. Está claro que el diseño de la maquetación debe ser claro, atractivo e intuitivo a la vez y que también no es posible saber en qué formato se visualizará el contenido web; por esto, aquí es donde CSS Grid entra en juego.
Resulta sustancial que los elementos individuales, como cajas de texto, elementos interactivos, entre otros, se distribuyan de forma independiente y clara, teniendo en cuenta las respectivas condiciones de espacio dadas por cada pantalla. Básicamente, un diseño CSS grid ofrece al diseñador web la capacidad de crear contenedores y dentro de estos, elementos, vistos en una rejilla con filas y columnas. En el contenedor, se establecen las propiedades que luego tendrán los elementos y que a su vez en el código fuente del HTML, se generan dichos elementos para ser recogidos dentro de CSS Grid, con el objetivo de disponerlos en la posición deseada.
Respondiendo a la pregunta inicial, una de las principales ventajas de CSS Grid es la flexibilidad de la rejilla, debido a que se puede configurar para que su ajuste sea automático, facilitando la visualización en los diferentes dispositivos. En definitiva, con CSS Grid es posible crear excelentes diseños de manera más rápida y sencilla, ya que siempre se puede analizar dónde aparecerán los elementos en un diseño responsive.
¿Cómo crear una grid de 12 columnas en CSS?
Muchas páginas web se basan en una vista grid o de cuadrícula, lo que significa que la página está dividida en columnas:
Una vista de cuadrícula responsive suele tener 12 columnas y una anchura total del 100%, que se reducirá y ampliará a medida que cambia el tamaño de la ventana del navegador. Sobre esas columnas se colocan los elementos en la página.
Veremos en un ejemplo sencillo cómo crear una grid de 12 columnas en CSS. En unas pocas líneas de código puedes crear esto:
¿Quieres ver el paso a paso? ¡Manos a la obra!
- Estructura el código HTML.
<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</main>
- Agrega algunos estilos básicos.
div {
background-color: #2e6edf;
color: white;
padding: 1rem;
font-size: 22px;
}
- Configura tu diseño en cuadrícula o grid.
main {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-gap: 1rem;
grid-template-rows: 150px 150px;
}
Ahora bien, expliquemos qué significa cada línea del CSS. En la primera se indica que el modo de display de este elemento es grid. Esto quiere decir que los hijos inmediatamente descendientes del main serán parte de la cuadrícula. La declaración display: grid proporciona una cuadrícula de una sola columna, por lo que los elementos se mostrarían uno debajo del otro si solamente se dejara esta línea de código.
Para ver algo que sea similar a una cuadrícula, es necesario añadir columnas. Con grid-template-columns se define el número de columnas y el ancho de cada una. En este caso se han definido 3 columnas de 200px cada una con la función de repetición. Puedes utilizar cualquier unidad de longitud o porcentajes para crear las columnas. También puedes usar la unidad fr para dimensionarlas de manera flexible. Esta unidad representa una fracción del espacio disponible en el contenedor de la cuadrícula.
La siguiente línea, grid-gap, indica la separación entre los elementos de la cuadrícula (en este caso, está expresada en una unidad rem).
Con grid-template-rows se define el número de filas. En este ejemplo se definieron 2 filas de 150px cada una.
Hasta aquí hemos visto un ejemplo sencillo de una grid de 12 columnas en CSS. Pero hay que tener en cuenta que actualmente uno de los aspectos fundamentales es que el diseño sea responsive, es decir, que sea adaptable a todo tipo de dispositivo. ¿Cómo logramos ello? ¡Sigue leyendo!
¿Cómo crear un template con Grid CSS responsive?
Es posible lograr que la grid o cuadrícula sea responsive con las funciones repeat y minmax. De este modo, el diseño se adaptará según la pantalla desde la cual se acceda.
En el punto 3 se explicó un ejemplo de una cuadrícula explícita, que se creó utilizando grid-template-columns y grid-template-rows. También se pueden diseñar cuadrículas implícitas. Estas se crean automáticamente cuando el contenido se agrega fuera de las columnas o filas definidas. Por defecto, tienen un tamaño auto, lo que en general significa que son lo bastante grandes para ajustarse al contenido. Si deseas asignarles un tamaño a las filas o columnas, puedes utilizar las propiedades grid-auto-rows y grid-auto-columns. Por ejemplo, si añades grid-auto-rows con un valor de 150px a tu CSS, las filas que has creado ahora tendrán 150 píxeles de alto:
main {
display: grid;
grid-gap: 1rem;
grid-auto-rows: 150px;
}
Pasaremos ahora a modificar la línea de código de la función grid-template-columns para que la cuadrícula sea responsive. Lo haremos de la siguiente manera:
main {
display: grid;
grid-gap: 1rem;
grid-auto-rows: 150px;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
Con la función repeat, el primer valor que se pasa es la cantidad de veces que deseas que la columna se repita. En este caso, el valor auto-fill le indica al navegador que inserte el número de columnas que sea necesario para rellenar el espacio. Con la función minmax se define un valor dentro de un mínimo y un máximo. Lo que quiere decir en el ejemplo es que el navegador puede ubicar el número de columnas que quepan en el ancho, mientras que su ancho mínimo sea de 15rem. Entonces, cuando la pantalla cambie de tamaño, el navegador modificará automáticamente el número de columnas que haya según el ancho disponible. El máximo 1fr hace que las columnas siempre tengan el mismo ancho una respecto a la otra.
Así luce el ejemplo a medida que el tamaño de la pantalla cambia:
Aplicaciones útiles para trabajar CSS Grid
CSS Grid es una forma de ordenar las áreas de tus páginas en divisiones receptivas. Los contenedores de CSS Grid sirven para demarcar la posición de textos, imágenes, botones y otros elementos del sitio, y las cuadrículas pueden escalar en forma y tamaño. Esta función sirve para estructurar los sitios web, construir estos modelos puede ser una tarea compleja. Veamos a continuación algunas aplicaciones web que te servirán para generar tu código de CSS Grid.
Griddy
Probablemente, Griddy sea el editor de CSS Grids más utilizado entre desarrolladores y diseñadores UX/UI. Con esta herramienta se pueden crear diseños 2D (disposición de elementos en el front-end) configurando columnas, espacios, alineaciones y filas.
- Te permite cambiar el tamaño de columnas y filas usando píxeles (px), fracciones (fr) y porcentajes (%).
- Puedes utilizar diversas unidades para cambiar el tamaño en una sola cuadrícula.
- Puedes probar diferentes opciones para alinear y justificar el contenido de cada cuadrícula
- Podrás visualizar los cambios en la cuadrícula del diseño de tu sitio web en tiempo real, en el momento en que la editas.
.container {
display: grid;
grid-template-columns: 1fr 200px 1%;
grid-template-rows: 2fr 100px;
grid-column-gap: 20px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}
Layoutit
Layoutit, al igual que Griddy, es un generador de CSS Grid interactivo y de código abierto. El mayor beneficio de esta herramienta es que actualiza el código HTML y CSS en tiempo real a la vez que realizas los cambios.
- Esta herramienta pone a disposición del usuario diversas plantillas a partir de las cuales puedes comenzar a editar.
- Trabajar con esta herramienta es sumamente sencillo. Solo debes arrastrar los elementos para conseguir el diseño que deseas obtener.
- Esta herramienta te da la posibilidad de modificar el tamaño de columnas y filas usando píxeles (px), fraccionarios (fr) y porcentajes (%).
CSS GridLayout
CSS Grid Layout es una herramienta que brinda configuraciones que permiten modificar el contenedor de la cuadrícula y los elementos dentro de él, lo cuales es una ventaja en términos de tiempo y practicidad. Se diferencia de las demás herramientas porque brinda códigos en los formatos CSS y JSX, además de brindar algunos componentes de estilo.
- Esta herramienta te da la posibilidad de establecer la configuración del contenedor y del elemento por separado.
- Dispone de varias opciones de cambio de tamaño en comparación con otros generadores de CSS. Siendo posible cambiar el tamaño de filas y columnas usando fr, px, em, rem, vw, vh, %, min-content, max-content, minmax(), repeat() y .auto-fitauto-fill
- Permite alinear el contenido usando las opciones justify-items, align-items, .justify-content y align-content
- El código de salida puede generarse en forma de clases CSS, módulos CSS para admitir JSX y componentes con estilo.
Turing ayuda a los programadores Front-End a conseguir los mejores trabajos
En Turing podemos encontrar una oportunidad de trabajo que combine perfectamente con tu stack tecnológico y tu nivel de experiencia. Somos una empresa remote-first, que da oportunidades de trabajo remoto inigualables a desarrolladores e ingenieros de todo el mundo. No pierdas la oportunidad de potenciar tu talento trabajando con las mejores compañías de tecnología del mundo, accede a nuestra web y se parte de nuestra nube de talento.
