logongas

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 14. Sistema de diseño: Globales ======
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.

===== Utility Clases =====
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

<sxh html>
<button boton>Aceptar</button>
</sxh>


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


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


El problema de usar ésto es doble:
  * Es tedioso de escribir.
  * NO permite valores responsivos.

Para evitar eso se han creado las //Utility clases//.

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

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

<sxh css>
.g--font-size-5 {
  font-size:var(--mlt-sys-font-size-5) !important;
}
.g--padding-4 {
  padding:var(--mlt-sys-padding-4) !important;
}
</sxh>

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 [[https://tailwindcss.com/|Tailwind CSS]] es un framework que solo usa //Utility clases//. 

Por otro lado [[https://getbootstrap.com/|Bootstrap]] que está orientado a componentes también ha incorporado //Utility clases// en 
[[https://getbootstrap.com/docs/5.3/utilities/api/|Utility API]] y un ejemplo es [[https://getbootstrap.com/docs/5.3/utilities/spacing/|Spacing]]

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

<sxh css>
.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 */
</sxh>

<note tip>
Y muchas más clases CSS faltarían aun.
</note>


===== Mejorando los globales con SASS =====
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.

<sxh sass>
@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;
    }
  }
}
</sxh>

  * ''@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.

===== Globales responsivos =====
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:

<sxh css>
@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 */
}
</sxh>

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

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).

<note important>
Las clases responsivas también llevan ''!important'' y van **después** de las clases base. Como la base ya tiene ''!important'', si no lo llevan o van antes, gana siempre la base y la clase ''@fulldesktop'' no hace nada.
</note>

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 [[https://www.webstoemp.com/blog/notes-on-using-css-grid-in-production/|Notes on using CSS Grid in production]]

También Bootstrap permite clases responsivas: [[https://getbootstrap.com/docs/5.3/utilities/api/#responsive|Utility API]] indicando ''responsive: true''.

==== Mejorando los globales responsivos con SASS ====
Las clases ''@tablet'', ''@desktop'' y ''@fulldesktop'' son las mismas en cada media query, así que se generan con un mapa de breakpoints:

<sxh sass>
@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;
      }
    }
  }
}
</sxh>

  * 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.


==== Resumen técnicas responsivas ====
En el tema [[clase:daw:diw:css-responsivo|CSS: Responsivo]] vimos varias formas de hacer las cosas responsivas; junto con los globales responsivos, son estas 4:


^ ^  Interno  ^  Externo  ^ 
^  Fluido  | El propio componente decide como se hace responsivo y lo hace de forma fluida al tamaño del dispositivo. | El que usa el componente decide como se hace responsivo y lo hace de forma fluida al tamaño del dispositivo.  |
^  Escalonado  | El propio componente decide como se hace responsivo y lo hace solo para diversos tamaños de pantalla | El que usa el componente decide como se hace responsivo y lo hace solo para diversos tamaños de pantalla |


<note tip>
El tipo **Externo/Escalonado** es el mas normal y es el que usan frameworks como Tailwind o Bootstrap. 
</note>

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

<sxh css>
.titulo {
  font-size: 10vw
}
</sxh>
<sxh html>
<h1 class="titulo">Hola mundo</h1>
</sxh>


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

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

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

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

<sxh html>
            <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>
</sxh>

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

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


===== Ejercicios =====

==== Ejercicio 1 ====
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:

<sxh css>
.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;
}
</sxh>

==== Ejercicio 2 ====
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.

==== Ejercicio 3 ====
Genera las clases globales de las fuentes a partir del mapa ''$fuentes'' del [[clase:daw:diw:sistema-diseno-tokens#ejercicio_2|ejercicio 2 de Sistema de diseño: Tokens]]:

<sxh css>
.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;
}
</sxh>

==== Ejercicio 4 ====
Crea las siguientes clases css:

<sxh 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;
}


</sxh>

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

==== Ejercicio 5 ====
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.

==== Ejercicio 6 ====
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.


==== Ejercicio 7 ====
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