Share
Este tutorial está dirigido a comenzar con Neat; Un marco de cuadrícula semántico construido para Sass y Bourbon..
Bourbon Neat mantiene su marca limpia, evitando que se confunda con las clases de grilla, columna y fila. En su lugar, aprovecha los mixins, y al aplicar sus diversos mixins a su marca existente, puede crear diseños flexibles y con capacidad de respuesta. Vamos a explorar los mixins más esenciales:
Nota: Para instalar y comenzar con Bourbon Neat, eche un vistazo al tutorial anterior Bourbon Neat: Semantic, Unopinionated, Responsive Grids.
Esta mezcla es para determinar el contenedor de su diseño, o envoltorio. Aplique esto a un elemento y Neat lo centrará automáticamente en la ventana gráfica (agregando margen izquierdo: auto / margen derecho: auto), despeja los flotadores y aplica el especificado $ ancho máximo. Es una combinación opcional (aunque se recomienda) y puede tener varios elementos contenedores externos en una sola página. Lo único que no puedes hacer es anidarlos..
El contenedor exterior contiene su rejilla. Dentro de ella, su cuadrícula puede abarcar tantas columnas como se especifique en su configuración de cuadrícula archivo a través del $ rejillas-columnas variable (que por defecto es de 12 columnas). Todos los elementos en una fila deben sumar el número total de columnas especificadas en esta variable.
En el siguiente ejemplo ficticio, verás que el envase elemento envuelve un par de aparte y artículo etiquetas Abarcan 3 y 9 columnas respectivamente y agregan hasta 12 columnas como se especifica en mi configuración. Si tuviera que revisar esa cantidad de columnas, el diseño ciertamente se rompería. Pensar en contenedor exterior La mezcla es el requisito previo más probable para agregar diseños de cuadrícula consistentes dentro de elementos de contenedor.
Haml:
"html .container% a un lado Aparte: 3 columnas% artículo Artículo: 9 columnas
% aparte Aparte: 3 columnas% artículo Artículo: 9 columnas
% aparte Aparte: 3 columnas% artículo artículo: 9 columnas "
Hablar con descaro a:
"css body background-color: blanco
.contenedor + contenedor exterior color de fondo: # f5f5f5
Aparte, relleno de artículos: 10 px de margen inferior: 20 px de altura: 100 px
aparte + columnas-span (3) color de fondo: # 81d4fa
artículo + columnas de separación (9) + color de fondo omega: # e64a19 "
Los colores de fondo en este ejemplo hacen que sea más fácil ver cómo encajan las piezas. Y no te preocupes por la omega mezcla en este punto; todo será revelado a su debido tiempo.
En tus _grid-settings Sass parcial también puede especificar una $ ancho máximo Variable Sass que define el ancho máximo que debe abarcar el contenido de su página. Por ejemplo, Neat viene con un cambio fácil $ ancho máximo ajuste de 1088px (convertido a em) fuera de la caja.
También existe la opción de proporcionar a esta mezcla un argumento para un $ local-max-width Si quieres que un determinado elemento contenedor tenga un diferente anchura máxima que el conjunto a nivel mundial en configuración de cuadrícula. Aquí, usted puede proporcionar píxel, em o porcentaje argumentos Las columnas de su cuadrícula dentro de ese contenedor ajustan su ancho automáticamente, pero el número de columnas permanece igual.
Hablar con descaro a:
css .container + external-container (800px) color de fondo: # f5f5f5 o
css .container + contenedor externo (80%) color de fondo: # f5f5f5
Si eres nuevo en el diseño con grillas, deberías buscar en el excelente Desorden de pedidos: Principios de rejilla para diseño web de Khoi Vinh. Lo recomiendo altamente. Un concepto que debe comprender de inmediato es que usted construye sus diseños de cuadrícula a través de una serie de columnas que se extienden por toda la página..
El uso básico de esto es super sencillo con Neat. Usted elige un elemento y le dice cuántas columnas debe abarcar dentro del número total de $ rejillas-columnas. Déjame mostrarte lo básico.
Haml:
"html .container% aside.first Primero: 2 columnas% article.second Segundo: 10 columnas
% aparte. Tercer Tercero: 4 columnas% artículo. Cuarto Cuarto: 8 columnas
% aparte. quinta quinta: 6 columnas% artículo. sexta sexta: 6 columnas
% aparte.sevenh Séptimo: 8 columnas% artículo.º Octavo octavo: 4 columnas
% aparte.noveno Noveno: 10 columnas% article.tenth Décimo: 2 columnas "
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + contenedor exterior color de fondo: # f5f5f5
Aparte, relleno de artículos: 10 px de margen inferior: 20 px de altura: 100 px
Color de fondo del artículo: # e64a19
Aparte del color de fondo: # 81d4fa
.primeras + columnas-span (2) .third + span-columnas (4) .fifth + span-columnas (6) .seventh + span-columnas (8) .ninth + span-columnas (10)
.segundo + columnas-span (10) .fourth + span-columnas (8) .sixth + span-columnas (6) .thighth + span-columnas (4). décimo + span-columnas (2)
.segundo, .fourth, .sxtth, .eighth + omega "
Como puedes ver, cada fila consiste en un azul aparte a la izquierda y uno rojo artículo Elemento a la derecha. El diseño no se rompe, porque dentro del elemento contenedor externo su número total de columnas y su ancho suman 12 (como se define en $ rejillas-columnas) uniformemente.
La parte más interesante es que no es necesario agregar ninguna información de estilo a su marca, ya que esto está relacionado con su capa de presentación, solo define cómo se compone su cuadrícula dentro de sus archivos Sass. Preocupaciones limpiamente separadas. Todos los diseñadores sanos que tocan tu trabajo después de que te quieran por no contaminar el contenido con información de estilo.
Una ventaja adicional es que puede nombrar las clases en su marca de cualquier manera que desee o necesite. Nadie toma estas decisiones por ti, lo cual es una bendición sin ningún disfraz..
De vez en cuando puede ser útil anidar rápidamente elementos de cuadrícula dentro de otro.
Hablar con descaro a:
css .some-parent-element + span-columns (10) .some-nested-element + span-columns (5 de 10)
Supongamos que tiene un elemento ancho que abarca 10 columnas y debe incorporar dos elementos más pequeños que abarquen 5 columnas cada uno. En este caso, proporcione los elementos anidados con el tamaño de la columna principal como un argumento para el columnas de expansión mezclar Veamos un ejemplo más concreto..
Haml:
html .container% aside.first Primero: 2 columnas% article.second% article.third Tercero: 5 columnas anidadas% article.fourth Cuarto: 5 columnas anidadas
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + exterior-contenedor fondo-color: # f5f5f5 relleno: parte superior: 15px parte inferior: 15px
Aparte, relleno de artículos: 10 px de margen inferior: 20 px de altura: 100 px
Color de fondo del artículo: # e64a19
Aparte del color de fondo: # 81d4fa
.Primero, .second height: 250px
.segundo + columnas-span (10)
.tercero, .fourth + span-column (5 of 10) color de fondo: oscurecer (# e64a19, 6) margin-top: 25px
.primero + columnas-span (2) relleno superior: 25px "
Otro concepto importante para los novatos que juegan con grillas es el canal. Este es el margen a la derecha, entre los elementos de la cuadrícula, y se crea automáticamente para cada elemento de la cuadrícula en un contenedor, ¡excepto el último! Los canales también se escalan responsivamente si cambia el tamaño de la ventana del navegador. El siguiente ejemplo muestra este espacio entre los elementos de la cuadrícula. La canaleta está representada por el fondo de color gris que viene del contenedor exterior.
Haml:
html .container .first 1 col .second 2 col .third 3 col .fourth 3 col .fifth 2 col .sixth 1 col
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + contenedor exterior color de fondo: # f5f5f5
.primero, .segundo, .third, .fourth, .fifth, .sxtth background-color: # 81d4fa relleno: 10px altura: 200px
.primeras + columnas-span (1)
.segundo + columnas-span (2)
.terceras + columnas-span (3)
.cuarto + columnas-span (3)
.quinta + columnas-span (2)
.sexto + columnas-span (1) "
¿Easy-peasy verdad? Pero adivine qué sucede si duplicamos las columnas duplicando la fila que está justo debajo de ella.?
Oh querido. Entonces, ¿qué pasó aquí? Como el sexto elemento en la primera fila ya no es el último elemento, también obtiene un margen derecho (margen) de forma predeterminada. Permítanme ser muy claro al respecto: para lograr un diseño perfectamente alineado, el último elemento de un contenedor tiene su canal eliminado de forma predeterminada. Debido al margen agregado en el sexto elemento, el ancho de todos los elementos en la primera fila ahora excede el ancho total tu numero de columnas totales puede abarcar por fila y su rejilla se rompe.
Nada demasiado trágico, sin embargo, y la solución es fácil. Simplemente encuentre el elemento que necesita que se elimine ese margen a la derecha y aplique el omega mezclando allí. Hecho!
Haml:
"html .container .first 1 col .second 2 col .third 3 col .fourth 3 col .fifth 2 col .sixth 1 col
.primero 1 col. segundo 2 col. tercer 3 col. cuarto cuarto 3 col. segundo 2 col. sexto 1 col "
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + contenedor exterior color de fondo: # f5f5f5
.primero, .segundo, .third, .fourth, .fifth, .sxtth background-color: # 81d4fa relleno: 10px altura: 200px
.primeras + columnas-span (1)
.segundo + columnas-span (2)
.terceras + columnas-span (3)
.cuarto + columnas-span (3)
.quinta + columnas-span (2)
.sexto + span-columnas (1) + omega "
Ahora, todos los elementos encajan bien, y ninguna de las filas excede su ancho total.
Vamos a dar un paso más. Digamos que tiene un par de filas que deben mostrar imágenes del mismo tamaño de manera uniforme sin romper la cuadrícula. Todo lo que necesitamos es un par de elementos que abarcan el mismo ancho, aquí columnas de separación (2), Y colóquelos en un par de filas. La magia pasa con el argumento que le suministras. omega con:
css img + omega (6n) Aquí, cada sexto. img Al elemento se le quitará su canal derecho y, por lo tanto, se ajusta de manera uniforme a seis 2 columnas Elementos en las 12 columnas del contenedor exterior. ordenado!
Haml:
"html .container% img% img% img% img% img% img
% img% img% img% img% img% img
% img% img% img% img% img% img
"
Hablar con descaro a:
"css color del cuerpo: blanco fondo-color: blanco
.contenedor + contenedor exterior color de fondo: # f5f5f5
img + span-columns (2) + omega (6n) altura: 200px margin-bottom: 5px background-color: # 81d4fa "
¿Quieres solo cuatro elementos por fila? ¡No hay problema! Reducir el argumento a favor omega a 4n. Esta técnica será útil durante el próximo tutorial cuando lleguemos a las cuadrículas de respuesta y cómo puede cambiar su diseño a través de consultas de medios.
Hablar con descaro a:
css img + omega (4n)
Le animo a que juegue un poco con este ejemplo a través de los bolígrafos provistos y tenga una idea de ello. No hay magia aquí, pero no se sorprenda si necesita un poco más de tiempo para comprender sus detalles. Ensucie un poco con los argumentos del omega y no tengo ninguna duda de que quedará claro para usted en un instante..
Últimas palabras de sabiduría: en algunos casos parece importar en qué orden se suministra el columnas de expansión y omega Mixins a los elementos. Mi consejo es aplicar siempre columnas de expansión primero en evitar comportamientos inesperados.
Esta mezcla debe ser rápida. Si desea ajustar un elemento moviéndolo horizontalmente hacia la izquierda o hacia la derecha, puede aplicar el cambio Mixin, y proporcione el número de columnas que debe mover. Puedes usar números enteros o de punto flotante.
Hablar con descaro a:
css .some-element-that-needs-adjusting + shift (n)
Proporcione un número positivo (sin unidad) de columnas para mover el elemento hacia la derecha y viceversa. Detrás de las escenas, Neat aumenta o disminuye los valores de porcentaje de margen izquierdo en el elemento.
Nota: si utiliza cambio sin un argumento, por defecto se cambio (1).
Esta mezcla tiene la misma idea que cambio (usa cambio de contexto debajo del capó) pero está hecho para elementos de cuadrícula que están anidados. He jugado un poco con esto en un ejemplo ficticio con cuadrículas anidadas, pero con toda honestidad logré los mismos resultados usando cambio.
No creo que deba entrar en detalles de cómo funciona esto. Es un poco de ayuda limpiar sus hojas de estilo y darle el ancho de canal por defecto si proporciona la mezcla con defecto como un argumento Nada demasiado sofisticado, pero pensé que lo mencionaría para completar sus opciones para ajustar el espaciado de sus cuadrículas.
Hablar con descaro a:
css .some-element-that-needs-padding + pad (10px 20px 30px por defecto)
Eso es todo lo que necesita saber para comenzar a jugar con las cuadrículas Neat. Estos ejemplos deberían haberle proporcionado una base sólida que le permita construir cualquier cuadrícula que necesite, sin embargo, lo complejo que desee..
El siguiente tutorial cubrirá otra ronda de combinaciones de Neat y también explicará cómo puede usar las consultas de los medios y los puntos de interrupción para ajustar las cuadrículas para cambiar el tamaño de las vistas. Te veo allí!
Accentsconagua