Llevando a Bourbon Neat: Mixins al siguiente nivel

Ahora que tienes los conceptos básicos en tu haber, en este segundo tutorial sobre Neat mixins me sumergiré un poco más profundo, exploraré otras mixinas e introduciré una función.

Vamos a ver lo siguiente:

Función

• new-breakpoint

Mixins

• reset-layout-direction
• direction-context
• display-context
• reset-display
• fill-parent
• reset-all
• media
• row

media

En los últimos años, la importancia de los diseños flexibles que responden al panorama en constante evolución de los tamaños de pantalla y dispositivos se ha dejado muy en claro. En este sentido, Bourbon Neat le da la espalda, brindándole un enfoque elegante para administrar consultas de medios para sus redes. Mediante el uso de consultas de medios dirigidas inteligentes, su diseño se puede adaptar a una amplia gama de dispositivos sin ensuciar. El diseño receptivo llegó para quedarse y un uso responsable y sostenible de las consultas de medios es el rey.

Algo que hay que evitar es lo que se podría llamar spaghetti de consulta: un lío enredado de consultas de medios que rápidamente se vuelve difícil de mantener. Mantener las consultas de los medios manejables es de crucial importancia. Esta mixin no es un antídoto perfecto, pero definitivamente alienta un enfoque DRY para lidiar con las consultas de medios de forma sensata, especialmente cuando se combina con la nueva función new-breakpoint. ¿Cómo, te escucho preguntar?

Puede escribir bloques de consulta de medios que pueden tomar contextos de cuadrícula. Digamos que tiene dos elementos que suman hasta 12 columnas, como se define en $total-columns dentro de su archivo _grid-settings. Estos elementos abarcan 3 y 9 columnas respectivamente en pantallas de tamaño de escritorio, que permiten contenedores externos de 1088 px de ancho. Para dispositivos más pequeños o tamaños de ventanas, permita que el media [query] mixin sepa en qué tamaño el contexto de 12 columnas necesita cambiar a otro número y ajuste el tamaño de los elementos receptivos dentro de ese nuevo contexto en consecuencia. ¡Auge!

Haml:

1

.container

2

  %aside 3 col / 1 col

3

  %article 9 col / 2 col

Sass:

1

body

2

  color: white

3

  background-color: white

4

5

.container

6

  +outer-container

7

  background-color: #f5f5f5

8

9

aside, article

10

  padding: 10px

11

  margin-bottom: 20px

12

  height: 100px

13

14

aside

15

  +span-columns(3)

16

  background-color: #81d4fa 

17

  +media(max-width 700px, 4)

18

    +span-columns(1)

19

20

article

21

  +span-columns(9)

22

  background-color: #e64a19

23

  +media(max-width 700px, 4)

24

    +span-columns(2)

Aquí proporcioné la media mixin con una característica de medios a través de max-width 700px y un nuevo contexto de cuadrícula de 4 columnas para el max-width de $total-columns del elemento. Habiendo establecido un nuevo contexto de cuadrícula para los elementos a un lado aside y del artículo article para el tamaño de la ventana gráfica de 700px max, solo necesitaba indicar a los elementos cuántas columnas pueden abarcar ahora dentro del nuevo total de 4 columnas.  Personalmente, creo que esto es bastante fácil de leer y fácil de organizar. Se vuelve aún más frío una vez que reutilizas los media contexts (media query / grid context) a través de la nueva función new-breakpoint y los guardas en una variable de Sass.

Nota: Si proporciona esta mezcla con solo un valor de píxel, sin ninguna característica específica de media:

Sass:

1

.some-responsive-element

2

  +span-columns(8)

3

  +media(700px)

4

    +span-columns(4)

luego, Neat usará $default-feature, que es min-width. Además, proporcionar un contexto de cuadrícula es opcional y se establece de manera predeterminada en lo que esté establecido en $total-columns en su _grid-settings parcial.

new-breakpoint

Probablemente se esté preguntando qué pasa con el enfoque DRY que mencioné un par de párrafos antes, ¿verdad? ¡Ese es el espíritu!

Esta útil función Sass personalizada es el Robin para media Batman, lo que evita que se repita una y otra vez. Si desea que sus consultas en los medios sean mucho más legibles y reutilizables, no veo una buena razón por la cual no utilice este compañero para luchar contra los crímenes de media query.

Ya basta de la analogía de Batman. En pocas palabras, todo lo que hace esta función es guardar los contextos de los medios (media query / grid context) a través de variables y le da la oportunidad de reutilizarlos en todas sus mezclas media. ¡Esa es una diablos de una extracción útil! Vamos a ver

Sass:

1

$tablet: new-breakpoint(min-width 768px max-width 1024px 4)

2

3

.some-responsive-element

4

  +span-columns(3)

5

  +media($tablet)

6

    +span-columns(1)

7

8

.some-other-responsive-element

9

  +span-columns(9)

10

  +media($tablet)

11

    +span-columns(2)

¡Super legible! Para estar seguro de que estamos en la misma página: aquí proporciona todas las funciones de medios que necesita (pero no comas, dos puntos, or, y, and) más el número de columnas para el nuevo contexto de cuadrícula, luego guárdelo en una variable Sass . Todo lo que queda por hacer es alimentar tus mixins de media con la variable apropiada, y DRY son.

Espero que aprecien lo limpio que esto lee y lo fácil que es ajustar sus diseños para varios puntos de interrupción, todo en un lugar central. Atrás han quedado los días en los que la gestión de toneladas de consultas de medios relacionadas con el diseño podría llevarte rápidamente a una fantástica pelea con tu antiguo yo.

row

Me gustaría tomar un poco de tiempo extra para explorar este. Si no está usando tablas con mucha frecuencia en sus diseños (como probablemente no debería hacerlo, ya que nos besamos los días del uso de tablas para el diseño adiós), este puede ser complicado para saltar de inmediato.

Lo esencial

Usted tiene dos opciones principales para usar este mixin: con la table de argumentos o sin ningún argumento.

Sass:

1

.some-row-element

2

  +row

Cuando se usa una fila row sin el argumento de la tabla table , se agrega un clearfix y $display permanece establecido en default, que es block. Efectivamente, eso significa que todo lo que venga después del elemento designado utilizando fila row necesita comenzar su propio asunto en una "fila" separada.

Sass:

1

.some-table-row-element

2

  +row(table)

Por otro lado, al usar una row(table), lo adivinó, hace que esta fila forme parte de un diseño de tabla. Lo que ocurre debajo del capó, entre otras cosas, es que esta mixin establece la display: table y table-layout: fixed.

Hay una opción más con la que puedes proporcionar esta mezcla. Puede pasar un argumento ($direction con LTR o RTL) que cambie la dirección de su diseño para esa fila en particular.

Sass:

1

.some-row-element

2

  +row($direction: RTL)

Pero empecemos por el principio. El siguiente ejemplo ficticio tiene 16 elementos <img>, los primeros cuatro de los cuales están anidados en un contenedor .row que usa la mixin row. Veamos qué pasa si dejas el argumento table.

Haml:

1

.container

2

3

  .row

4

    %img

5

    %img

6

    %img

7

    %img

8

9

  %img

10

  %img

11

  %img

12

  %img

13

14

  %img

15

  %img

16

  %img

17

  %img

18

19

  %img

20

  %img

21

  %img

22

  %img

Sass:

1

.container

2

  +outer-container

3

  background-color: #f5f5f5

4

5

.row

6

  +row

7

8

img

9

  +span-columns(1)

10

  height: 60px

11

  margin-bottom: 5px

12

  background-color: #e64a19

Como puede ver, el navegador trata los primeros cuatro elementos <img> como parte de una fila, colocando los siguientes elementos <img> en una fila separada. Los elementos debajo del contenedor .rowno están vinculados a una fila en particular y simplemente flotan hacia abajo siempre que tengan espacio disponible para ellos.

Dos contenedores .row dan como resultado el mismo truco, apilados uno encima del otro.

Haml:

1

.container

2

3

  .row

4

    %img

5

    %img

6

    %img

7

    %img

8

9

  .row

10

    %img

11

    %img

12

    %img

13

    %img

14

15

  %img

16

  %img

17

  %img

18

  %img

19

20

  %img

21

  %img

22

  %img

23

  %img

No es demasiado complicado, supongo. Aunque no estoy seguro de lo útil que esto sería, porque instintivamente prefiero usar el mixin omega para tal ocasión. Lo que parece bastante inútil, sin embargo, es usar row(table) aquí. Tendría una columna muy larga que apila los 16 elementos uno encima del otro. Te ahorraré la desagradable captura de pantalla, pero mira el ejemplo en codepen si tienes curiosidad.

Usar fila sin argumento en una tabla

Hasta ahora te he mostrado la mecánica básica de este mixin, especialmente si eres nuevo en el juego. Ahora nos estamos acercando al territorio útil. Juguemos con una mesa real.

Si no ha engañado con tablas antes, le recomiendo activar Google antes de continuar. A continuación hay una pequeña guía de supervivencia para aquellos que necesitan actualizar un par de términos.

Aquí tenemos un elemento de tabla table. Comprende una etiqueta thead, que tiene una fila para mostrar los diversos encabezados de columna a través de las etiquetas th. Debajo encontrará el tbody que contiene los datos reales de cada fila de la tabla (tr) a través de las etiquetas td.

Haml:

1

.container

2

3

  %table

4

5

    %thead

6

      %tr

7

        %th Username

8

        %th User_ID

9

        %th Favorite Pizza

10

        %th Pet

11

        %th Pet Name

12

        %th Favorite Game

13

14

    %tbody

15

      %tr

16

        %td Joe

17

        %td 112233

18

        %td Pepperoni

19

        %td Cat

20

        %td Gordon

21

        %td Splinter Cell

22

      %tr

23

        %td Jane

24

        %td 223311

25

        %td Mushrooms

26

        %td Dog

27

        %td Fluffy

28

        %td Metal Gear Solid V

29

      %tr

30

        %td Bob

31

        %td 331122

32

        %td Onions

33

        %td Fish

34

        %td Sharky

35

        %td Little Big Planet 2

Sass:

1

body

2

  color: white

3

  background-color: white

4

5

.container

6

  +outer-container

7

  background-color: darken(#f5f5f5, 50%)

8

9

tr

10

  +row()

11

  text-align: center

12

13

th

14

  padding:

15

    top: 10px

16

    bottom: 20px

17

18

td

19

  height: 50px

20

  background: #81d4fa

21

  padding-top: 2px

Esto da como resultado un blob de tabla desagradable, desagradable, que solo abarca hasta el contenido de estas celdas de datos de tabla. Obviamente no es súper útil y es un dolor si quieres arreglarlo manualmente usando un montón de reglas de CSS para arreglar las cosas.

Usando row(table)

fila (tabla)Debería haber una solución simple para este derecho? Agregar table como argumento y display: table y table-layout: fixed ¡ven al rescate! Sin mencionar un poco de fill-parent relleno bajo el capó.

Sass:

1

tr

2

  +row(table)

3

  text-align: center

Nota: Un diseño de tabla fijo como este tiene la ventaja de no solo disponer la tabla más rápido, sino que el ancho de las columnas no depende del contenido de las celdas de la tabla. Obtendrá filas distribuidas uniformemente que abarcan el ancho del contenedor de la mesa. Elimine una celda de datos de la tabla (td) y verá que los otros elementos dividen el espacio en esa fila de manera uniforme:

Sin row

Cerremos con un ejemplo que muestra el comportamiento predeterminado de las tablas sin utilizar la mixin de row en absoluto.

Sass:

1

body

2

  color: white

3

  background-color: white

4

5

.container

6

  +outer-container

7

  background-color: darken(#f5f5f5, 50%)

8

9

tr

10

  text-align: center

11

12

th

13

  padding:

14

    top: 10px

15

    bottom: 20px

16

17

td

18

  height: 50px

19

  background: #81d4fa

20

  padding-top: 2px

Como puede ver, las celdas están espaciadas uniformemente, pero no usan todo el espacio apropiado disponible para ellas. Se orientan al contenido más largo por columna y ajustan sus celdas para alinearse a lo largo de estas líneas.

Disculpas por ser excesivamente prolijo sobre row, pero espero que esta sección haga que los dolores de cabeza que pueda tener con las tablas y las filas sean menos indoloros.

fill-parent

Pasando, Neat ofrece una solución fácil si desea que un elemento complete rápidamente su elemento principal al abarcar el mismo número de columnas. No tiene que proporcionar ningún argumento. Esta combinación no es nada sofisticada, pero puede ser útil cuando se media queries o tablas.

Nota: El uso de span-columns(12) en lugar de fill-parent para abarcar todo el ancho de un contenedor externo no sería el enfoque correcto, simplemente agregaría un equipaje innecesario.

Haml:

1

.container

2

  %aside Aside 3 columns | fill-parent

3

  %article Article 5 columns | fill-parent

Sass:

1

body

2

  color: white

3

  background-color: white

4

5

.container

6

  +outer-container

7

  margin-top: 10px

8

  background-color: #f5f5f5

9

10

aside, article

11

  margin-bottom: 5px

12

  height: 200px  

13

14

aside

15

  +span-columns(3)

16

  +fill-parent

17

  background-color: #81d4fa 

18

19

article

20

  +span-columns(5)

21

  +fill-parent

22

  background-color: #e64a19

Tenga en cuenta que los elementos que utilizan fill-parent ignoran otros elementos en la misma fila y apuntan a abarcar todo el ancho de sus elementos principales sin tener en cuenta a sus vecinos. ¡Creo que este es bastante sencillo, sigamos adelante!

direction-context

Todos los elementos en su cuadrícula Neat tienen un $default-layout-direction que está establecido en LTR (de izquierda a derecha) en settings/_grid.scss. Esto significa que detrás de las escenas, Neat siempre usa un direction-context de left-to-right.

Debajo del capó, esta mezcla no hace nada más que cambiar la dirección de flotación del elemento aplicado. Lo que está claro es que dentro de un contexto direccional, digamos de left-to-right, puede reunir un grupo de elementos de la cuadrícula y cambiar su dirección de right-to-lefta, todos a la vez, en un bloque de código. Una vez más, esta solución hace que las cosas sean más compactas y legibles para usted, así como también más fáciles de entender para alguien que no está familiarizado con un determinado proyecto.

Haml:

1

.container

2

  %aside 3 columns

3

  %article 9 columns

Sass:

1

body

2

  color: white

3

  background-color: white

4

5

.container

6

  +outer-container

7

  margin-top: 10px

8

  background-color: #f5f5f5

9

10

aside, article

11

  margin-bottom: 5px

12

  height: 200px  

13

14

+direction-context(right-to-left)

15

  aside

16

    +span-columns(3)

17

    background-color: #81d4fa

18

19

  article

20

    +span-columns(9)

21

    background-color: #e64a19

Aquí está la misma demostración sin direction-context:

Aquí hay otro ejemplo. Nada nuevo por ahora, es solo que las columnas son del mismo tamaño y también fluyen de right-to-left.

Haml:

1

.container

2

  %aside 3 columns

3

  %article 3 columns

Sass:

1

body

2

  color: white

3

  background-color: white

4

5

.container

6

  +outer-container

7

  margin-top: 10px

8

  background-color: #f5f5f5

9

10

aside, article

11

  margin-bottom: 5px

12

  height: 200px  

13

14

+direction-context(right-to-left)

15

  aside

16

    +span-columns(3)

17

    background-color: #81d4fa

18

19

  article

20

    +span-columns(3)

21

    background-color: #e64a19

El siguiente pequeño truco tiene solo uno de estos tres elementos de columna que usan mixin, y por lo tanto flotan a lados opuestos del contenedor. Nada demasiado mágico, pero podría ser útil tenerlo en tu bolsa de trucos.

Sass:

1

body

2

  color: white

3

  background-color: white

4

5

.container

6

  +outer-container

7

  margin-top: 10px

8

  background-color: #f5f5f5

9

10

aside, article

11

  margin-bottom: 5px

12

  height: 200px  

13

14

15

aside

16

  +span-columns(3)

17

  background-color: #81d4fa

18

19

+direction-context(right-to-left)

20

  article

21

    +span-columns(3)

22

    background-color: #e64a19

Última milla

Esta última sección del tutorial cubre un par de mixins que quería mencionar para completar, pero que trato de evitar porque no siempre me han dado los resultados que esperaba. Si tiene una mejor experiencia en usarlos, hágamelo saber. Además de eso, tres de ellos pronto estarán en desuso:

• reset-display
• reset-layout-direction
• reset-all

reset-layout-direction

No hay mucho que decir sobre este. Imagine que ha cambiado la dirección del diseño por cualquier razón y desea volver a cambiar a $default-layout-direction (de left-to-right). ¡Aquí tienes, se restaura el contexto predeterminado! No se necesita argumento

Sass:

1

.row

2

  +row($direction: RTL)

3

4

.row 

5

  reset-layout-direction

¿Cuándo podría ser útil? ¡Buena pregunta! La documentación dice sobre todo cuando necesitas cambiar de dirección en una sola fila. Yo personalmente no me molestaría demasiado. En primer lugar está programado para ser desaprobado a favor de una mixin de direction, y también me dio un dolor de cabeza sorprendente cuando quería que funcione con media queries.

display-context

Para crear un bloque de código que cambie las propiedades de visualización usadas por mixins dentro de sí mismo, tiene dos opciones que puede pasar a este mixin: block y table. El primero es obvio y la tabla table agrega display: table-cell para usted. table-cell fuerza a un elemento a comportarse como un elemento td.

Sass:

1

+display-context(table)

2

  .some-cell

3

    +span-columns(2)

reset-display

Digamos que ha cambiado la pantalla activa a la tabla table como en el ejemplo anterior, reset-display le ayuda a volver a block fácilmente. No requiere discusión tampoco. La documentación dice que es más útil si se aplica a filas individuales que han cambiado sus valores de visualización.

Sass:

1

.row

2

  +row(table)

3

4

.row 

5

  +reset-display

reset-all

Si desea combinar reset-display y reset-layout-direction de una sola vez, eso es lo que obtendrá con reset-all-no se requieren argumentos. Digamos en alguna fila que cambiaste la pantalla a la table y la $default-layout-direction a RTL y quieres volver atrás.

Sass:

1

.row

2

  +row(table, RTL)

3

4

.row 

5

  +reset-all

Pensamientos finales

Bueno, eso fue muy largo. Gracias por completarlo, y espero que hayas descubierto que es un viaje interesante hacia el territorio de Neat mixin. Sin embargo, hay una cosa más para discutir; es decir, todas las variables que tiene a su disposición para ajustar el marco de trabajo a sus necesidades. El siguiente tutorial es más breve, pero cierra nuestra cobertura de Neat. ¡Te veo allí!