Responsive Design y Arquitectura CSS

Introducción al Responsive Design

En el año 1998 se creó el lenguaje llamado WML (Wireless Markup Language) y un protocolo llamado WPA (Wireless Application Protocol). Ambas tecnologías se volvieron los estándares de los dispositivos móviles de primera generación. Estos protocolos fracasan, ya que en el año 2007 nace el iPhone, el cual se vuelve el estándar de los dispositivos móviles. El iPhone venía con su navegador integrado, Safari.

En 2008 nace la Mobile Web Iniciative, y en 2010 Ethan Marcotte acuñe por primera vez el término de Responsive Design (el concepto).

El Responsive Design tiene 3 principios básicos:

  • Grid flexibles.
  • Imágenes flexibles.
  • Media Queries.

El Responsive Design no sólo es pensar en adaptar el contenido al tamaño de la pantalla, también es considerar:

  • Conexión de red (Wifi, 2G, 3G…)
  • Hardware y Software de los dispositivos.
  • Interacciones (con teclado y ratón, táctiles, por voz…).
  • Accesibilidad web (soporte a discapacidades).

Después del Iphone pasamos sólo de tener CPUs a tener todo tipo de dispositivos de distintos tamaños.

Estrategias de diseño multidispositivo

Más que hablar de Responsive Design hay que hablar de estrategias de diseño multidispositivo.

Estas son algunas universales:

  • Responsive Design – Ethan Marcotte
  • Adaptive Design – Aaron Gustafson (2011)
  • Responsive + Server Side (RESS) – Luke Wroblewsky (2011)
  • Responsible Responsive Design – Scott Jehl (2014)
  • Fluid Design – Trys Mudford (2020): trata de hacer responsive sin utilizar demasiado las Media Queries.

Contenedores flexibles

Es todo elemento en nuestra interfaz web y tienen que ser flexibles y responsives. Veamos nuestro primer ejm

Ejm código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="ejm01.css" />
    <title>Ejm01</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="box-flexible"></div>
  </body>
</html>

Ejm código CSS

[class^="box"] {
  margin: 3remauto;
  background-color: orangered;
}
.box {
  width: 300px;
  height: 300px;
}
.box-flexible {
  width: 50%;
  height: 20vh;
}

Hay otra manera, para ello vamos a utilizar 4 propiedades CSS para los máximos y mínimos tamaños. Son:

  • max-width
  • min-width
  • max-height
  • min-height

Veamos la sintaxis CSS para una tercera caja contenedora.

.box-flexible-2 {
  max-width: 960px;
  min-width: 280px;
  max-height: 480px;
  min-height: 280px;
}

No se debe utilizar width y height con las propiedades de arriba ya que tienen mayor jerarquía, por lo que se van a quedar con los valores de las propiedades de estas. Hay que utilizar unidades relativas para width y height junto con max-width, max-height, min-width y min-height.

Multimedia flexible

Se entiende todo aquello que no es texto, que son las siguientes etiquetas:

  • img
  • audio
  • video
  • iframe
  • canvas
  • svg
  • picture
  • object
  • embed
  • map
  • area

Todo lo que se puede incluir en un iframe se puede incluir en un object y en un embed. La sintaxis para hacer estas etiquetas flexibles es.

Ejm

img, audio, video, iframe, canvas, svg, picture {
 max-width: 100%;
 height: auto
}

Así en base a la anchura calcula la altura y no se deforma el elemento. El ejm completo sería el siguiente.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      img {
        max-width: 80%;
        height: auto;
      }
    </style>
    <title>Ejm02 - Multimedia flexible</title>
  </head>
  <body>
    <h2>Multimedia Flexible</h2>
    <h2>Imágenes Responsive</h2>
    <p>Simplemente adaptamos la imagen al tamaño de su contenedor</p>
    <img src="img/Puestadesol.JPG" alt="Puesta de Sol" />
  </body>
</html>

No es la única manera de hacer un multimedia responsive, hay dos nuevos atributos, llamados srcset y sizes, cuyo propósito es mejorar el rendimiento de la carga al colocar la imagen que mejor corresponde al documento que se está cargando.

srcset y sizes

Estos atributos nos permiten mejorar el rendimiento de la carga colocando la imagen más adecuada, esto lo hará dependiendo de lo que pongamos en el atributo srcset.

Ejm

<img src="image.png" srcset="image.png 1x, image2.png 1.5px, image3.png 2x">

Ejm completo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejm03 - Imágenes Responsive utilizando srcset</title>
  </head>
  <body>
    <h2>Imágenes Resonsive utilizando srcset</h2>
    <img
      src="img/puestadesol.JPG"
      srcset="
        img/puestadesol.JPG   1x,
        img/puestadesolo2.png 1.5x,
        img/puestadesol3.png  2x
      "
      alt=""
    />
    <img
      src="img/puestadesol.JPG"
      srcset="
        img/puestadesol.JPG   600w,
        img/puestadesol2.png  900w,
        img/puestadesol3.png 1200w
      "
      alt=""
    />
    <!-- PODEMOS UTILIZARLO DE ESTAS DOS MANERAS ARRIBA PUESTAS-->
  </body>
</html>

El atributo sizes es una manera de trabajar con media queries dentro de nuestras imágenes.

Ejm

<img src="img/puestadesol.JPG" srcset="img/puestadesol.JPG 600w, img/puestadesol2.png 900w, img/puestadesol3.png 
sizes="(max-width:480px) 300px, (max-width:600px) 480px, (max-width:768px) 600px. (min-width:1200px) 1200px" 1200w"alt="">

La etiqueta <picture>

Si lo que necesitamos es un cambio de imagen utilizamos la etiqueta <picture>.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejm04 - Etiqueta picture</title>
  </head>
  <body>
    <h2>La etiqueta picture</h2>
    <!-- LOS SOURCES SE CREAN DE MAYOR A MENOR SI NO SE CARGAN LOS SOURCES PONEMOS LA ETIQUETA
    img PARA ASEGURARNOS QUE SE CARGA LA IMAGEN, UTILIZAMOS EL ATRIBUTO media -->
    <picture>
      <source srcset="imggrande.jpg" media="(min-width:1200px" />
      <source srcset="imgmediana.jpg" media="(min-width: 600px" />
      <img src="imgpequena.jpg" alt="" />
      <!-- DEPENDIENDO DEL TIPO SE CARGA UNA IMAGEN U OTRA PARA ELLO SE UTILIZA EL ATRIBUTO type -->
      <picture>
        <source srcset="image.wepb" type="image/webp" />
        <source srcset="image.jpg" type="image/jpg" />
        <img srset="image.png" />
      </picture>
    </picture>
  </body>
</html>

Vídeos responsives

Hay diferentes formas de hacer vídeos responsives. Un vídeo lo hacemos responsive aplicando la siguiente sintaxis CSS

video {
 max-width: 100%;
 height: auto;
}

Con esta sintaxis el vídeo ya se adapta.

Vieja técnica

Existe una vieja técnica para hacer un vídeo responsive, es la siguiente.

<div class="responsive-media">

</div>

La sintaxis CSS es:

.responsive-media {
 position: relative;
 max-width: 100%;
 height: 0;
 padding-bottom: 56.25%;
<-- PANTALLA WIDESCREEN: 16:9 -->
}

.responsive-media > * {
 position: absolute;
 width: 100%;
 height: 100%;
<-- EL padding-bottom LE VA A DAR UNA ALTURA -->
}

Nueva técnica

La nueva forma que tenemos en CSS es la siguiente.

<video class="aspect-radio-16.9">

y el estilo sería

.aspect-radio-16.9 {
 aspect-ratio: 16/9;
}

Podemos dar cualquier formato, por ejm

.aspect-radio-16.9 {
 aspect-ratio: 16/9;
 aspect-radio: 1 / 1;
 aspect-ratio: 9 / 16;
 <-- PODEMOS DARLE EL FORMATO QUE QUERAMOS -->
}

iframes

Se hace el mismo uso que para los vídeos.

Media Queries

Son como preguntas que hacemos al navegador, y dependiendo de estas preguntas, el navegador incluye ciertos estilos.

La sintaxis que se utiliza es

@media screen and (max-width: 480px) and (orientation: portrait) {
// CODIGO CSS QUE PONDREMOS
}
PropiedadDefiniciónmax / min
widthEl ancho del área de visualización.✔️
heightEl alto del área de visualización.✔️
device-widthLa anchura de la superficie de representación del dispositivo.✔️
device-heightLa altura de la superficie de representación del dispositivo.✔️
orientationAcepta los valores de portrait (vertical) y landscape (horizontal).❌
aspect-ratioRelación entre la anchura de la zona de visualización de toda su altura.Por ejemplo: en una computadora de escritorio, se podría consultar si la ventana del navegador se encuentra en una relación de 16:9.✔️
device-aspect-ratioProporción de anchura de la superficie de representación del dispositivo a través de su altura.Por ejemplo: en una computadora de escritorio, se podría consultar si la pantalla está en una relación de 16:9.✔️
colorEl número de bits por componente de color del dispositivo.Por ejemplo, un dispositivo de color de 8 bits podría pasar con éxito una consulta de (color: 8). Dispositivos de color no deben devolver un valor de 0.✔️
color-indexEl número de entradas en la tabla de búsqueda de color del dispositivo de salida.Por ejemplo, @media screen and (min-color-index:256).✔️
monochromeAl igual que el color, la característica monocromática permite ponernos a prueba el número de bits por pixel en un dispositivo monocromático.✔️
resolutionPruebas de la densidad de los píxeles en el dispositivo.Por ejemplo, screen and (resolution:72dpi) or screen and (max-resolution:300dpi).✔️
scanPara la navegación basada en tv, mide si el proceso de exploración es progresiva o escaneo.❌
gridComprueba si el dispositivo es una pantalla basada en la red, como los teléfonos con funciones con una fuente de ancho fijo. Se puede expresar simplemente como (grid).❌

@media screen

Vamos a ver el formato estándar que se definió desde la versión 3 de CSS. En esta ocasión utilizamos @media para cuando demos a imprimir nos imprima con el CSS que le hayamos creado.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @mediaprint {
        @page {
          size: A5 landscape;
        }
        body {
          font-size: 10pt;
          font-family: sans-serif;
          background-color: black;
          color: greenyellow;
        }
      }
    </style>
    <title>Ejm 06 - Media Queries</title>
  </head>
  <body>
    <h2>Ejm 06 - Media Queries</h2>
  </body>
</html>

Para trabajar con la pantalla se utilizar @media screen, veamos un ejm con un mínimo al que empieza a aplicarse CSS

Ejm

@media screen and (min-width: 480px) {
// SE APLICA EL CSS A PARTIR DE 480px
html {
color: black;
}
}
EN MOBILE FIRST SE USA min-width

@media screen and (max-width: 1200px) {

}
EN DESKTOP FIRST SE UTILIZA max-width que es lo máximo, estas son dos técnicas utilizadas para crear CSS.

Cuando comencemos un sitio web con la técnico desktop first, seguir trabajando con dicha técnica, no mezclar mobil first y desktop first.

Cuando cambiar los media queries, breakpoints

Los breakpoints tienen mucha relación con las media queries, es la medida en la cual decido cuando aplicar distintos CSS a mi interfaz.

Los breakpoints que podemos encontrar son los siguientes:

320pxPara dispositivos con pantallas pequeñas, como los teléfonos en modo vertical.
480pxPara dispositivos con pantallas pequeñas, como los teléfonos, en modo horizontal.
600pxTabletas pequeñas, como el Amazon Kindle (600×800) y Barnes & Noble Nook (600×1024), en modo vertical.
768pxTabletas de diez pulgadas como el iPad (768×1024), en modo vertical.
1024pxTabletas como el iPad (1024×768), en modo horizontal, así como algunas pantallas de ordenador portátil, netbook, y de escritorio.
1200pxPara pantallas panorámicas, principalmente portátiles y de escritorio.

Hay veces que se utiliza el ancho de pantalla completo como en los Hero Image. Hay que convertir los breakpoints a Ems, es decir, los pixeles a EMs. Corres el riesgo de que computadoras no se visualicen correctamente.

  • 320px / 16px = 20em
  • 480px / 16px = 30em
  • 600px / 16px = 37em
  • 768px / 16px = 48em
  • 1042px / 16px = 64em
  • 1200px / 16px = 75em

La metaetiqueta viewport

El viewport es una etiqueta que se incluyó en Safari por Apple. Cuando abrimos un documento HTML. Hay varias propiedades:

  • width
  • height
  • initial-scale
  • minimum-scale (no se llega a utilizar)
  • maximum-scale (no se llega a utilizar)
  • user-scalable: Yes / No (el valor por defecto es Yes), si pones No, bloqueas al usuario para que que haga zoom.

Gris Responsive

En este tema vamos a aprender a hacer una Grid Responsive. Para ello es importante conocer los conceptos de Flexbox CSS. Vamos a dividir nuestra pantalla en 12 elementos de tal manera que tengamos mucho por lo que jugar:

  • 12 = 6 + 6
  • 12 = 4 + 4 + 4

La sumatoria siempre tiene que ser 12. Para saber el porcentaje tan sólo se hace una regla de 3:

  • 12 -> 100%
  • Numero columnas -> x

Vamos a proponer los siguientes tamaños de columna

  • xs: extrasmall – de 0px a 479px – 480res
  • sm: small – de 480px (30em) a 767px – 800res
  • md: medium – de 768px (48em) a 991px – 1024res
  • lg: large – de 992px (62em) a 1199px – 1280res
  • xl: extralarge – +1200px (75em) – 1281res

Vamos a tratar de ponerlos en ems (se dividen los pixeles entre 16, el tamaño estándar de la letra si es de 16px.)

Features queries

Son consultas de las características que le preguntan al navegador si soportan ciertas características. Un ejm es ver si el navegador soporta Grid, se hace la siguiente consulta CSS

EL NAVEGADOR SOPORTA display: grid
@supports (display: grid) {
/* CÓDIGO CSS AQUÍ */
}

EL NAVEGADOR NO SOPORTA display: grid
@supports not (display: grid) { 
/* CÓDIGO CSS AQUÍ */ 
}

SE LE PASAN 2 CONDICIONES QUE SE HAN DE CUMPLIR AMBAS
@supports (display: grid) and (grid-template-columns: subgrid) {
html {
background-color: #333;
color: #fff;
}
}

SE LE PASAN 2 CONDICIONES QUE SE HA DE CUMPLIR UNA DE AMBAS
@supports (display: grid) or (grid-template-columns: subgrid) 
{ 
html { 
background-color: #333; 
color: #fff; 
} 
}

Se utiliza @supports y entre paréntesis la consulta.

Nota: Existe una página que se llama Can I Use para saber si todo funciona ok.

Container queries

Las Container queries permiten redimensionar un contenido en particular. Por ejm una tarjeta que necesite estar en vertical hasta que el tamaño de la imagen tenga cierto valor.

La sintaxis que necesitamos es la siguiente:

.card {
 contain: layout inline-size style;
}

@container (min-width: 600px) {
 .card-container {
  display: flex;
 }
}

Desktop First VS Mobile First

El Responsive Design se basa en 3 normas:

  • Grid Flexible
  • Imágenes flexibles
  • Media Queries

Desktop First

Cuando tienes creada una página web para ordenadores, utilizas esta técnica para ir adaptando dicha página a dispositivos más pequeños. Totalmente recomendable utilizar la técnica Mobile First. Si utilizamos Desktop First se utiliza como breakpoint la propiedad max-width, mientras que con Mobile First se utiliza min-width. Los frameworks (Bootstrap, Fundation) actuales tienen una tecnología Mobile First.

Adaptive Design

El Adaptive Design nos dice que hay que crear Interfaces que se adapten tanto a las características de tamaño de pantalla como a las características generales (conexiones de red, hardware, interacciones…). El Adaptive Design lo usa Facebook. El Adaptive Design conviene en aplicaciones interactivas, como son las redes sociales, no en sitios web informativos. Se hace desde el frontend.

Responsive Design + Server Side Components (RESS)

Lo que indica es que se hagan los cambios desde el backend con Javascript, no desde el frontend como propone la alternativa anterior (Adaptive Design).

Responsible Responsive Design

Es hacer un diseño web responsable. Es como si fuera la evolución del Responsive Design. Lo único que dice es que se agregue Javascript.

Fluid Design

Es la última estrategia de diseño multidispositivo. Se empieza a hablar a partir del 2020. Lo que trata es de no usar media queries. Veamos un ejm.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="ejm12fluiddesign.css" />
    <title>Ejm012 - Fluid Design</title>
  </head>
  <body>
    <h2>Grid fluid</h2>
    <section class="fluid-grid">
      <article class="fluid-item">Elemento 1</article>
      <article class="fluid-item">Elemento 2</article>
      <article class="fluid-item">Elemento 3</article>
      <article class="fluid-item">Elemento 4</article>
      <article class="fluid-item">Elemento 5</article>
      <article class="fluid-item">Elemento 6</article>
      <article class="fluid-item">Elemento 7</article>
      <article class="fluid-item">Elemento 8</article>
      <article class="fluid-item">Elemento 9</article>
      <article class="fluid-item">Elemento 10</article>
      <article class="fluid-item">Elemento 11</article>
      <article class="fluid-item">Elemento 12</article>
      <article class="fluid-item">Elemento 13</article>
      <article class="fluid-item">Elemento 14</article>
      <article class="fluid-item">Elemento 15</article>
      <article class="fluid-item">Elemento 16</article>
      <article class="fluid-item">Elemento 17</article>
      <article class="fluid-item">Elemento 18</article>
      <article class="fluid-item">Elemento 19</article>
    </section>
  </body>
</html>

Y el CSS a aplicar

.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fluid-item {
  background-color: black;
  color: wheat;
  margin: 0.2rem;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

Textos fluídos

En esta sección creamos textos fluidos. Veamos la sintaxis. Hay dos técnicas, la primera teniendo varios tamaños de texto.

Vamos a utilizar una web denominada Utopía de la que dejo el link.

Primera técnica

Veamos la sintaxis HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="ejm13textosfluidos.css" />
    <title>Ejm 13 - Textos fluidos</title>
  </head>
  <body>
    <h2>Ejm 13 - Textos fluidos</h2>
    <p class="step--2">Step -2</p>
    <p class="step--1">Step -1</p>
    <p class="step-0">Step 0</p>
    <p class="step-1">Step 1</p>
    <p class="step-2">Step 2</p>
    <p class="step-3">Step 3</p>
    <p class="step-4">Step 4</p>
    <p class="step-5">Step 5</p>
  </body>
</html>

Y la sintaxis CSS que utilizamos

/* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
  --step--2: clamp(0.91rem, calc(0.89rem + 0.1vw), 0.96rem);
  --step--1: clamp(1.09rem, calc(1.05rem + 0.21vw), 1.2rem);
  --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);
  --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem);
  --step-2: clamp(1.89rem, calc(1.71rem + 0.89vw), 2.34rem);
  --step-3: clamp(2.27rem, calc(2.01rem + 1.29vw), 2.93rem);
  --step-4: clamp(2.72rem, calc(2.36rem + 1.83vw), 3.66rem);
  --step-5: clamp(3.27rem, calc(2.75rem + 2.56vw), 4.58rem);
}
.step--2 {
  font-size: var(--step--2);
}
.step--1 {
  font-size: var(--step--1);
}
.step-0 {
  font-size: var(--step-0);
}
.step-1 {
  font-size: var(--step-1);
}
.step-2 {
  font-size: var(--step-2);
}
.step-3 {
  font-size: var(--step-3);
}
.step-4 {
  font-size: var(--step-4);
}
.step-5 {
  font-size: var(--step-5);
}

Secunda técnica

Hay una segunda manera mucho más rápida.

Aplicamos la siguiente sintaxis CSS

body {
font-size: calc(14px + (18 - 14) * ((100vw -300px)/(1400-300)));

14 = tamaño de letra mínimo para tu sitio
18 = tamaño de letra más grande que tú quieras
1400 = tamaño de viewport más grande
300 = tamaño de viewport más pequeño

Elegimos un tamaño de letra mínimo, un tamaño máximo de letra, un tamaño mínimo de pantalla y un tamaño máximo.
}

Por lo tanto la sintaxis completa es

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        font-size: calc(14px + (18 - 14) * ((100vw-300px) / (1400-300)));
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <h2>Ejm de texto Responsive</h2>
    <p>Texto Responsive 1</p>
    <p>Texto Responsive 2</p>
    <p>Texto Responsive 3</p>
    <p>Texto Responsive 4</p>
    <p>Texto Responsive 5</p>
  </body>
</html>

Contenedores fluídos con fluid design

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .box-fluid {
        width: clamp(400px, 60vw, 600px);
        height: clamp(200px, 30vh, 300px);
        background-color: orange;
      }
    </style>
    <title>Box Fluid</title>
  </head>
  <body>
    <h2>Box Fluid</h2>
    <div class="box-fluid"></div>
  </body>
</html>

Con estos tres principios básicos podemos hacer todo lo que necesitemos.

Arquitectura CSS

Vamos a aprender que herramientas podemos utilizar. Estas son las cosas que vamos a ver. Para mantener nuestro código organizado necesitamos un plan, ese plan es la Arquitectura CSS.

Arquitectura es el arte y la técnica de diseñar, proyectar y construir edificios y espacios públicos, según el diccionario. la Arquitectura CSS es un arte y una técnica de diseñar, proyectar y construir. Aplicándolo a CSS, se puede decir que son técnicas que nos ayudan a organizar y mantener nuestro código ordenado, óptimo y escalable. Si desde un inicio trabajamos con buenas prácticas aplicando CSS el código siempre será bueno.

El código debe contar con estas 4 características:

  • Predecible: las reglas se van a comportar como esperamos que lo hagan. Si añadimos una nueva característica, esa no tiene que afectar al resto de secciones. Frameworks como Bootstrap (utility frames) nos ofrecen muchas clases utilitarias que solo afectan a las partes que queremos.
  • Reutilizable: que se pueda utilizar en ciertas secciones o elementos sin que afecte a otros elementos.
  • Estable: deberíamos poder actualizar sin que afecte al resto
  • Escalable:

Debemos diseñar sistemas, no páginas en particular. No pensar en un proyecto en particular, sino diseñar Sistemas. Todos los proyectos tienen los mismos elementos (cabecera, menú, contenido lateral, contenido principal, columnas…).

Tecnología D.R.Y. (Dont repeat yourself / no te repitas a tí mismo)

Esta tecnología nos dice que los componentes que creemos:

  • Cumplen una sola función
  • Son independientes
  • Son autocontenidos
  • Son reutilizables

Herramientas CSS para crear sistemas

  • Metodologías
  • Frameworks
  • Procesadores: tenemos preprocesadores y postprocesadores
  • Guías de estilos: tiene que ver un poco como ordenamos, o como escribir una pequeña documentación para los nuevos desarrolladores que se puedan ir incorporando.

Metodologías CSS

Son unas prácticas que nos permiten organizar y darle nombre a nuestros selectores, de tal manera que si nuestro proyecto escala, vamos a poder controlarlo sin que se nos escape de las manos. Algunas de las metodologías más populares son las siguientes:

Atomic Design tiene el siguiente paradigma:

  • Atomo (las etiquetas HTML) – Moleculas – Organismos – Templates – Páginas

No hay porque utilizar una sola metodología. Trata de conocerlas e implementarlas, y quédate con la que mas te guste o parezca más cómoda.

Frameworks CSS

Son marcos de trabajo que nos ofrecen componentes y utilidades de UI.

  • 960 Grid System: es el padre de todos los Frameworks. Comenzó por 2009. Es el abuelo de Bootstrap, el cual es mantenido por gente que trabaja en Twitter.
  • Skeleton: es un boilerplate.
  • Pure CSS: https://purecss.io. Es una herramienta muy minimalista.
  • Ink: es un framework no muy popular pero ha aguantado el paso de los años. https://ink.sapo.pt. Trabaja con preprocesadores.
  • MUI: no es muy conocido. https://muicss.com. Se puede utilizar con Angular o con React.
  • Semantic UI: no ha despegado del todo. https://semantic-ui.com.
  • Bootstrap: es el rey de los Frameworks. Muchas plantillas de WordPress, Drupal, utilizan Bootstrap. A día de hoy va por la versión 5, que no utiliza JQuery. La 5 trae su librería de iconos. La documentación es muy sencilla. https://getbootstrap.com
  • Tailwind CSS: es un Framework relativamente joven, muy fácil de implementar. https://tailwindcss.com. Los nombres de las clases son muy semánticos, muy fáciles e intuitivos.
  • Foundation: https://get.foundation. Tienen muy buenas prácticas a nivel de sintaxis CSS. Tienen su versión para sitios web y para email marketing. Cualquiera de las secciones tiene videotutoriales. A nivel de componentes está más limitado que Bootstrap.
  • Materialize: https://materializecss.com. Es el primer Framework que dejó de utilizar JQuery.
  • UI Kit: es muy parecido a Mui, es fácil implementarlo a React. Tiene una gran cantidad de componentes.
  • Bulma: es un Framework CSS moderno. https://bulma.io. Puedes o no utilizar Javascript. Es opcional.

Los más importantes son los marcados en Negrita. Los más importantes frameworks a día de hoy son Bootstrap y Tailwind CSS, incluso Fundation que también es muy potente.

A mi sitio personal es mejor no meter Frameworks, ya que es mío, pero para agilizar es interesante utilizar Frameworks. Dependiendo de las necesidades y características podemos utilizar o no Frameworks, y cual de ellos.

Hay que sí o sí dominar los fundamenteos de CSS y los modelos de maquetación.

Cuando nos vamos a decidir a utilizar Framewoks o no depende de las necesidades del proyecto. En nuestro propio sitio web está bien maquetar nosotros mismos nuestro proyecto. Interfaz fácil de usar, minimalista, utilizar en la menor cantidad posible librerías y Frameworks profesionales.

Los elementos de formulario de Material Design son muy vistosos, por lo que se pueden utilizar para proyectos rápidos. NO CASARSE CON UN SÓLO FRAMEWORK.

Procesadores CSS

Pueden ser preprocesadores o postprocesadores CSS. No son lo mismo. Los primeros son herramientas que nos van a permitir tomar un lenguaje. Son metalenguajes. Nos permiten tener como mejor organizado el código CSS de nuestro proyecto.

El mas popular es Sass.

Preprocesadores CSS

Pueden ser:

El estándar actual es Sass con la sintaxis scss.

Postprocesadores CSS

Son herramientas que procesan el CSS y lo optimizan. Pueden ser

Jon no es muy fan ni de pre ni de post procesadores CSS.

Primero aprender HTML, CSS y Javascript antes de aprender a manejar estas herramientas.

Herramientas de automatización

Algunas herramientas que vamos a tener que conocer con el tiempo son

Build Tools

  • Node.js: es un entorno de programación Javascript que nos permite trabajar en el modo de servidor. https://nodejs.org.
  • Grunt: fue uno de los primeros gestores de tareas Javascript. Fue la primera herramienta pero han salido otras que la han ido sustituyendo.
  • Gulp
  • Webpack: es un bundler que nos permite empaquetar o configurar un entorno de programación en React.

Online Tools

Para todas estas herramientas necesitas el uso de la terminal, por lo que lo mejor es aprender bien HTML, CSS y Javascript. Las librerías, los frameworks… van y vienen, las bases son fijas.

Si queremos minimizar nuestra hoja de estilo, copiamos el código creado y lo llevamos a Autoprefixer, nos crea el código nuevo, y lo llevamos a CSS Minifier para minimizar dicho código, y con esto es suficiente.

Guías de estilo que podemos seguir

Es una colección de elementos y reglas preestablecidas que aseguran la consistencia y coherencia de nuestro código. Algunas de ellas son:

Realmente las guías de estilo se aplican a todos los lenguajes.

  • Code Guide: es la favorita de Jon. https://codeguide.co. Está creada por la gente de GitHub.
  • W3C Design System
  • Website Style Guide: es un sitio que recopila guías de estilo de otros sitios. Es como un repositorio..
  • Airbnb CSS / Sass Styleguide: se ha vuelto muy popular.
  • Idiomatic CSS: es una guía de estilos muy minimalista que puede servir.
  • CSS Guidelines: https://cssguidelin.es. Es una de las guías de estilo más populares.

Qué elijo

Si estamos empezando que elegimos:

Lo que tenemos que preocuparnos es en dominar los conceptos de HTML, CSS y Javascript. Una vez dominemos estos conceptos. Un buen comienzo es aprender bien el frontend (HTML, CSS y Javascript). Si ya queremos ser profesionales del Frontend entonces avanzar en tecnologías Frontend.

Scroll al inicio