Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass

Una cuadricula simple adaptable a diferentes pantallas, mejorada con Sass

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En este tutorial vamos a construir un sistema de cuadrícula simple y adaptable a pantallas usando CSS. Una vez que sepamos cómo funciona, lo mejoraremos con Sass, aprendiendo algunas características básicas de Sass a lo largo del camino.

Introducción al CSS

Vamos a examinar rápidamente cómo será nuestro sistema de cuadrícula. Hay maneras más inteligentes de construir cuadrículas, que son menos intrusivas en el marcado necesario, pero esta rejilla nos da una gran oportunidad de practicar técnicas de Sass simples, pero útiles. Utiliza un elemento de envoltura, luego otros elementos dentro de los que actúan como filas, luego más elementos dentro de los que actúan como nuestras columnas.

Un poco psicodelico, pero entiendes la idea...

Grid.css

Para empezar, todo lo que necesitamos es un archivo CSS, por lo que abrir un nuevo documento en su editor de código y nombrelo "grid.css".

Lo primero que vamos a agregar es una regla de reinicio global y box-sizing. Esto asegurará que el padding aplicado a nuestros elementos se añada dentro de sus dimensiones calculadas, lo que nos da mucha más libertad para definir anchos de columna.

A continuación agregaremos una regla para asegurarse de que las imágenes utilizadas se comporten con fluidez.

El envoltorio

Ahora algunas reglas para asegurarse de que nuestro elemento wrapper se comporte.

Nota: Tenga en cuenta que estamos trabajando en móvil primero. Nuestro contenedor comienza con un ancho de ventana de 100%, pero lo modificaremos para pantallas más grandes.

Las filas

Todos nuestros elementos de fila hacen que contenga las columnas, cerciorándose de que los grupos de columnas se separen correctamente. Añadamos algunas reglas generales de .clearfix a nuestros elementos del contenedor y fila.

Nota: No tenemos que nombrar estos elementos .wrapper, .row y .column, podemos ser mucho más creativos que eso. Estos nombres son muy claros para los propósitos de este tutorial.

Las columnas

Vamos a tener un rango de clases de columnas, dependiendo del tamaño de cada una (por ejemplo .column-1 y .column-6. Vamos a utilizar un selector de atributo para orientar y estilo de todos estos de una sola vez.

Este selector dice; Tomar cualquier elemento cuya clase contiene la cadena columna- y aplicar los siguientes estilos. Por lo tanto todos nuestros elementos de la columna flotarán a la izquierda, tendrán un relleno de 1em (esto forma nuestra cuneta y algún espacio vertical) y llenarán el 100% del ancho de la ventana. Por último, la min-height: 1px asegura que la columna se muestre correctamente, incluso si no tiene contenido.

Lo creas o no, ¡ahora tenemos una rejilla! El siguiente marcado es todo lo que necesitamos.

Podemos utilizar cualquier combinación de columnas dentro de las filas, echale un vistazo a la demo para ver lo que debe tener ahora.

Esta captura de pantalla muestra varias columnas más que en el fragmento anterior

Obtener la adaptabilidad web

Esa es nuestra vista móvil, ahora vamos a agregar una consulta de medios para darnos un diseño diferente para pantallas más grandes. Tendrás que determinar puntos de quiebres para tu propia cuadrícula, pero vamos a usar un punto de interrupción arbitrario de 30em.

Cualquier estilo que coloquemos dentro de esta consulta de medios tendrá efecto en pantallas de 30em y más amplias. Usaremos este punto para dividir nuestras columnas en anchos correctos.

% Anchos

¿Qué ancho debería tener cada columna? Eso depende de cuántas columnas tengamos. Para esta demostración voy a trabajar con doce columnas, así que cada una debe ser exactamente una duodécima (1/12) de la envoltura. Para una columna que abarca dos anchos, será dos duodécima, y así sucesivamente. Esto es lo que nos da:

También verá que hemos hecho el elemento .wrapper menos que el ancho completo de la pantalla y le ha dado un max-width. Echa un vistazo a lo que se ha hecho a nuestra rejilla.

Probablemente querrá elegir un relleno más apropiado en su propia cuadrícula

Limpieza de las cosas con Sass

Nuestra cuadricula en CSS funciona, pero ¿qué pasaría si de verdad queríamos dieciséis columnas en nuestra cuadrícula? ¿O aún más? Tendríamos que recalcular cada columna e introducirla manualmente en nuestro archivo CSS cada vez. Sin mencionar que nuestro CSS sería más largo y más largo y más difícil de manejar. Afortunadamente, Sass (o cualquier otro preprocesador) puede ayudarnos.

Configuración de Sass

Este tutorial no se trata de configurar Sass, sino que asume que ya sabes cómo hacerlo. Si ese no es el caso y usted necesita para poner en marcha las cosas y echar un vistazo a Dominar Sass: Lección 1, o SASS y Compass para diseñadores web: Introducción.

Una vez que tenga una configuración de proyecto Sass, siga con el siguiente paso.

Definición de variables

Sass nos va a ayudar a limpiar nuestro CSS en todo tipo de formas, pero lo primero que podemos hacer es extraer cualquier valor útil y almacenarlos en variables. Comience por iniciar un nuevo parcial denominado "_variables.scss"; a un archivo Sass que no será compilado a CSS directamente, pero haremos referencia en nuestros otros archivos.

Estas variables nos dan la cantidad de columnas con las que queremos trabajar; 12 en el momento, pero podría ser fácilmente alterado a 16, tal vez 32 (lo que quieras realmente). También hemos almacenado algunos puntos de quiebre en variables como cadenas, aunque sólo estamos usando una en este momento.

Vamos a utilizar estos en breve, pero primero vamos a configurar algunos mixins.

Mixins

Los mixins de Sass son trozos de código que podemos definir una vez y luego reutilizar en otras partes de nuestro proyecto. Por ejemplo, podríamos tomar el primer conjunto de reglas en las que configuramos border-box y extraemos la mayor parte de eso en un mixin. Comenzamos con:

Entonces sacamos una parte de ella que podemos reutilizar, definiendo un mixin que he llamado "border-box" así:

Entonces, @import nuestras variables y mixins en el principal "grid.scss", utilizando el mixin con una instrucción @include.

@extend Clearfix

Podemos hacer una cosa similar con las reglas de clearfix, como sugiere Sebastian Ekström. En este caso tomamos las reglas de clearfix recomendadas por Nicolas Gallagher y las añadimos a nuestro archivo mixin con un selector marcador de posición (%):

El selector marcador de posición nos permite definir trozos enteros de estilo que sólo salen cuando los extendemos en otros lugares, como este:

Una vez compilado, las pulcras pocas líneas de Sass se ven así:

Usando Nuestras Variables

Hagamos uso de algunas de las variables que creamos, ¿verdad? Para empezar, podemos intercambiar el valor de max-width en el contenedor. Esto:

Se convierte en esto:

Ahora vamos a hacer lo mismo con nuestra consulta de medio. Esta:

será mejorado con nuestra variable $breakpoint-medium:

Nota: verá que hemos envuelto nuestra variable en #{}. Esto se conoce como interpolación. Esto se hace normalmente si necesitamos dar salida a una variable dentro de otra, pero es necesario en este caso porque el compilador de Sass dispara sobre las consultas de medios si @media no es seguido directamente por los paréntesis (). Usted puede leer más sobre esto en Hugo Giraudel Todo lo que Necesita Saber Sobre la Interpolación de Sass.

Para usar nuestra variable final, $grid-columns, necesitamos hacer uso de otra funcionalidad de Sass; Bucles

Bucles de Sass

Nuestras definiciones de ancho de columna son exactamente iguales, aparte de los valores reales. Estará mucho más limpio si publicamos una definición de columna para tantas columnas como necesitamos, cambiando los valores cada vez. Para hacer esto podemos usar un bucle Sass @for, que tiene este aspecto:

Esto se repetirá en 12 iteraciones, y cada vez el valor de $i reflejará ese bucle. Podemos dar salida a $i asi:

Una vez más, notarás que estamos usando #{} alrededor de $i para enviar el valor como una cadena en la cual  estamos añadiendo a la columna .column- selector. Esto nos da lo siguiente cuando se compila:

¡Brillante! Ahora utilicemos algunos cálculos para generar los estilos correctos dentro de estos selectores.

Operadores de Sass

Lo estamos haciendo bien, pero ahora necesitamos mostrar algo como lo siguiente para cada selector:

Ese ancho de columna se calcula como 100% dividido por el número total de columnas, multiplicado por el número de columna. En este caso 100% / 12 * 5 = 41,66667%. Por lo tanto, es el cálculo que debemos aplicar, cambiando los valores relevantes para las variables.

Sass ahora está realizando los cálculos para nosotros, dándonos lo siguiente:

Como un pedazo final para ordenar, podemos usar la variable $grid-columns, en lugar del valor 12:

Ahora, si queremos cambiar el número de columnas, simplemente cambiamos la variable y los cálculos se harán para nosotros. Por ejemplo, cambiar $grid-columns a 4 nos da el siguiente CSS:

Conclusion

Nuestro grid.scss final son 42 líneas de código; Mucho menos que nuestro CSS inicial.

A lo largo de este proceso hemos estudiado las variables Sass, mixins, Marcadores de posición, extend, Bucles, operadores e incluso la interpolación. Este es un conjunto increíblemente potente de características y un gran comienzo si acaba de entrar a Sass.

¿De qué otra manera podría mejorar la red que hemos construido? ¿Qué más agregaría o incluso eliminaría? ¡Háganos saber en los comentarios!

Otras lecturas

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.