Los modificadores globales (prefijo g--) son clases que se pueden usar con cualquier componente y que solo cambian una cosa usando los tokens de sistema.

Hemos visto como crear las variables para dejar de usar números en nuestras clases CSS pero actualmente para personalizar un componentes se usas unas clases llamadas Utility clases.

Veamos un ejemplo

<button boton>Aceptar</button>

¿Pero que pasa si queremos que un botón en concreto tenga un tamaño mayor? Deberemos añadir style

<button boton style="font-size:var(--mlt-sys-font-size-5);padding:var(--mlt-sys-padding-4)">Aceptar</button>

El problema de usar ésto es doble:

• Es tedioso de escribir.
• NO permite valores responsivos.

Para evitar eso se han creado las Utility clases.

<button boton class="g--font-size-5 g--padding-4">Aceptar</button>

Estas clases tienen el código CSS que habíamos puesto en style

.g--font-size-5 {
  font-size:var(--mlt-sys-font-size-5) !important;
}
.g--padding-4 {
  padding:var(--mlt-sys-padding-4) !important;
}

A estas clases pequeñas que solo hacen una única cosa se le llaman Utility clases y combinándolas se puede tener mucha versatilidad. Sin embargo su uso debe ser usado sin excesos.

El framework CSS Tailwind CSS es un framework que solo usa Utility clases.

Por otro lado Bootstrap que está orientado a componentes también ha incorporado Utility clases en Utility API y un ejemplo es Spacing

El uso de utility clases nos lleva a tener lo siguiente:

.g--font-size-1 {
  font-size: var(--mlt-sys-font-size-1) !important;
}
.g--font-size-2 {
  font-size: var(--mlt-sys-font-size-2) !important;
}
/* ... hasta .g--font-size-11 */

.g--margin-0 {
  margin: var(--mlt-sys-margin-0) !important;
}
/* ... hasta .g--margin-10 */

.g--margin-horizontal-0 {
  margin-left: var(--mlt-sys-margin-0) !important;
  margin-right: var(--mlt-sys-margin-0) !important;
}
.g--margin-vertical-0 {
  margin-top: var(--mlt-sys-margin-0) !important;
  margin-bottom: var(--mlt-sys-margin-0) !important;
}
/* ... hasta .g--margin-horizontal-10 y .g--margin-vertical-10 */

.g--margin-top-0 {
  margin-top: var(--mlt-sys-margin-0) !important;
}
/* ... y lo mismo con bottom, right y left, hasta el 10 */

/* Y las mismas clases con padding: .g--padding-0 ... .g--padding-left-10 */

Las clases g-- son todas iguales cambiando el número, así que se generan con bucles en vez de escribirlas a mano. Además así no hay erratas al copiar y pegar números.

@use "sass:list";

$font-sizes: (10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px, 30px);
$margins: (0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px);

@for $i from 1 through list.length($font-sizes) {
  .g--font-size-#{$i} {
    font-size: var(--mlt-sys-font-size-#{$i}) !important;
  }
}

@for $i from 0 through list.length($margins) - 1 {
  .g--margin-#{$i} {
    margin: var(--mlt-sys-margin-#{$i}) !important;
  }
  .g--margin-horizontal-#{$i} {
    margin-left: var(--mlt-sys-margin-#{$i}) !important;
    margin-right: var(--mlt-sys-margin-#{$i}) !important;
  }
  .g--margin-vertical-#{$i} {
    margin-top: var(--mlt-sys-margin-#{$i}) !important;
    margin-bottom: var(--mlt-sys-margin-#{$i}) !important;
  }

  @each $lado in (top, bottom, left, right) {
    .g--margin-#{$lado}-#{$i} {
      margin-#{$lado}: var(--mlt-sys-margin-#{$i}) !important;
    }
  }
}

• @for $i from 1 through: Los tamaños de fuente empiezan en 1.
• @for $i from 0 through list.length($margins) - 1: Los márgenes empiezan en 0 (el token --mlt-sys-margin-0), así que se llega hasta la longitud menos uno.
• @each $lado in (top, bottom, left, right): Genera las cuatro clases de cada lado con el mismo código.

Los paddings se generan igual que los márgenes.

Pasemos ahora a ver como poder hacer las cosas responsivas con una simple arquitectura.

Las clases base g--font-size-N son las del apartado anterior. Para cada breakpoint se crea la misma clase con un sufijo, dentro de su media query:

@media (min-width: 576px) {
    .g--font-size-1\@tablet {
        font-size: var(--mlt-sys-font-size-1) !important;
    }
    .g--font-size-2\@tablet {
        font-size: var(--mlt-sys-font-size-2) !important;
    }
    /* ... igual hasta .g--font-size-11\@tablet */
}

@media (min-width: 768px) {
    .g--font-size-1\@desktop {
        font-size: var(--mlt-sys-font-size-1) !important;
    }
    /* ... igual hasta .g--font-size-11\@desktop */
}

@media (min-width: 992px) {
    .g--font-size-1\@fulldesktop {
        font-size: var(--mlt-sys-font-size-1) !important;
    }
    /* ... igual hasta .g--font-size-11\@fulldesktop */
}

<p class="g--font-size-4 g--font-size-8@fulldesktop">Hola mundo</p>

En el ejemplo, por defecto el tamaño de la fuente será --mlt-sys-font-size-4 (16px), pero en resoluciones mayores de 992px será --mlt-sys-font-size-8 (24px).

Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo @tablet , @desktop o @fulldesktop. E indicando en el HTML que tamaño usar según la resolución de la pantalla.

Otro ejemplo de ello lo podemos ver en Notes on using CSS Grid in production

También Bootstrap permite clases responsivas: Utility API indicando responsive: true.

Las clases @tablet, @desktop y @fulldesktop son las mismas en cada media query, así que se generan con un mapa de breakpoints:

@use "sass:list";

$font-sizes: (10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px, 30px);

$breakpoints: (
  'tablet': 576px,
  'desktop': 768px,
  'fulldesktop': 992px
);

@each $nombre, $ancho in $breakpoints {
  @media (min-width: $ancho) {
    @for $i from 1 through list.length($font-sizes) {
      .g--font-size-#{$i}\@#{$nombre} {
        font-size: var(--mlt-sys-font-size-#{$i}) !important;
      }
    }
  }
}

• Las clases base g--font-size-N ya se generan en «Mejorando los globales con SASS»; aquí solo las de cada breakpoint, que tienen que ir después.
• $breakpoints: Cada breakpoint con su ancho mínimo. Para añadir uno nuevo basta con añadirlo al mapa.
• \@: La @ se escapa en el nombre de la clase, igual que en el CSS.

En el tema CSS: Responsivo vimos varias formas de hacer las cosas responsivas; junto con los globales responsivos, son estas 4:

• Interno/Fluido: unidades vw o clamp() en el propio componente, o las tablas con scroll.

.titulo {
  font-size: 10vw
}

<h1 class="titulo">Hola mundo</h1>

• Interno/Escalonado: Se usa en un menú responsivo con hamburguesa.

.titulo {
    font-size: 40px;
}
  
@media (min-width: 768px) {
    .titulo {
        font-size: 55px;
    }
}

<h1 class="titulo">Hola mundo</h1>

• Externo/Fluido: Se usa muy poco. Por ejemplo, con modificadores globales de ancho como los del ejercicio 5:

            <thead>
              <tr>
                <th class="g--min-width-150 g--max-width-200">Author</th>
                <th class="g--min-width-150 g--max-width-200">Title</th>
                <th class="g--min-width-100 g--max-width-150">Year</th>
                <th class="g--min-width-100 g--max-width-150">ISBN-13</th>
                <th class="g--min-width-100 g--max-width-150">ISBN-10</th>
              </tr>
            </thead>

• Externo/Escalonado: Es el que usamos con @tablet o @desktop , etc.

<p class="g--font-size-4 g--font-size-8@tablet">Hola mundo</p>

Usando el mapa $colores de los tokens de sistema, genera las clases globales de color de texto, fondo y borde para todos los colores y tonos:

.g--color-principal-1 {
  color: var(--mlt-sys-color-principal-1) !important;
}
.g--background-color-principal-1 {
  background-color: var(--mlt-sys-color-principal-1) !important;
}
.g--border-color-principal-1 {
  border-color: var(--mlt-sys-color-principal-1) !important;
}

...

.g--border-color-amarillo-9 {
  border-color: var(--mlt-sys-color-amarillo-9) !important;
}

Genera todas las clases globales de padding igual que las de margin del apartado «Mejorando los globales con SASS»: g--padding-N, g--padding-horizontal-N, g--padding-vertical-N y g--padding-top-N, -bottom-, -left- y -right-, de 0 a 10.

Genera las clases globales de las fuentes a partir del mapa $fuentes del ejercicio 2 de Sistema de diseño: Tokens:

.g--font-sans-serif {
  font-family: var(--mlt-sys-font-sans-serif) !important;
}
.g--font-serif {
  font-family: var(--mlt-sys-font-serif) !important;
}
.g--font-monospace {
  font-family: var(--mlt-sys-font-monospace) !important;
}

Crea las siguientes clases css:

.g--bg-color-red {
  background-color:#FF0000 !important;
}
.g--bg-color-green {
  background-color:#00FF00 !important;
}
.g--bg-color-blue {
  background-color:#0000FF !important;
}
.g--bg-color-orange {
  background-color:#FFA500 !important;
}

Y modifícalas con el sufijo @tablet, @desktop y @fulldesktop y repite el ejercicio 6 del tema CSS: Responsivo pero en vez de usar la clase .color-fondo-responsivo uses las clases que acabas de crear

Crea modificadores globales para las siguientes propiedades CSS:

• width
• min-width
• max-width

Los posibles valores de cada uno de ellos serán: 100px, 150px , 200px, 250px, 300px, 350px, 400px, 450px, 500px, 550px, 600px

Crea también otro modificador global para overflow: auto;

Crea una clase BEM para tablas HTML de forma que:

• La tabla tendrá alrededor un borde y un sombreado
• Las cabeceras de la tabla serán de otro color.

Con todo los anterior, haz una página HTML con una tabla en la que:

• Haya columnas que tengan un ancho mínimo y otro máximo
• Haya columnas que tengan un ancho fijo
• Haya una columna que tengan un ancho mínimo
• Que si la tabla no cabe, aparezcan las barras de scroll.

Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con

• @tablet
• @desktop
• @fulldesktop

Modifica el ejemplo de la tabla HTML de forma que las columnas ahora tengan siempre tamaños fijos (es decir no usar min o max), pero que cambien según la resolución de la pantalla.

Haz que las clases de BEM y los modificadores globales que has ido usando durante el curso se puedan usar de forma responsiva con:

• @tablet
• @desktop
• @fulldesktop