Diseños algorítmicos

No te pierdas este vídeo de Heydon que profundiza en los diseños CSS. Es fantástico cómo combina conocimientos fundamentales, como la forma en que los elementos fluyen, se ajustan y pueden tener margen con nuevos métodos de diseño como flexbox y grid (con ejemplos específicos). De particular interés es la clara demostración de cómo flexbox y grid ayudan a evitar la necesidad de intervenir constantemente con las consultas de los medios para afectar los diseños responsivos.

Entonces, en lugar de esto…

.sidebar {  float: left;  width: 20rem;}.not-sidebar {  float-right: calc(100% - 20rem);}@media (max-width: 40rem) {  .sidebar, .not-sidebar {    float: none;    width: auto.  }}

…algo como esto:

/* Parent container */.with-sidebar {  display: flex;  flex-wrap: wrap;}.sidebar {  flex-basis: 20rem;  flex-grow: 1;}.not-sidebar {  min-width: 50%;  flex-grow: 600;}

Este tampoco es un video único, el canal de Heydon también tiene videos sobre cómo crear formas inusuales y propiedades personalizadas.