See the Pen flex & margin by goiblas (@goiblas) on CodePen.

See the Pen Before & After grid children by goiblas (@goiblas) on CodePen.

See the Pen Diferentes anchuras en un contendor by goiblas (@goiblas) on CodePen.

See the Pen Diferentes anchuras en un contendor (grid) by goiblas (@goiblas) on CodePen.

See the Pen Especificidad by goiblas (@goiblas) on CodePen.

See the Pen Avatar by goiblas (@goiblas) on CodePen.

See the Pen Selector :not() by goiblas (@goiblas) on CodePen.

See the Pen Navigation animations by goiblas (@goiblas) on CodePen.

1. Flex + margin
2. pseudo elementos son hijos de grid
3. Implementar nuevas alineaciones
4. Nombrar las líneas del grid facilita el responsive y la legibilidad
5. Repetir selector aumenta especificidad
6. [id="identificador"] disminuye especificidad
7. !important es una herramienta
8. border-radius & clip-path para crear formas
9. :not() vs sobreescribir propiedades
10. box-shadow vs border

See the Pen Text truncate flex container by goiblas (@goiblas) on CodePen.

See the Pen Scrollable table by goiblas (@goiblas) on CodePen.

See the Pen SVG Icons by goiblas (@goiblas) on CodePen.

See the Pen Landing by goiblas (@goiblas) on CodePen.

See the Pen Grid cards by goiblas (@goiblas) on CodePen.

See the Pen Grid cards extended by goiblas (@goiblas) on CodePen.

See the Pen Aspect ratio by goiblas (@goiblas) on CodePen.

1. Cortar textos dentro de un flex
2. Tablas con scroll
3. SVG + currentColor
4. Calc para combinar unidades
5. Grid repeat
6. grid-auto-flow: row dense
7. order & z-index
8. padding para mantener el aspecto

See the Pen Modal by goiblas (@goiblas) on CodePen.

See the Pen Accordion by goiblas (@goiblas) on CodePen.

See the Pen Snackbar max-content by goiblas (@goiblas) on CodePen.

See the Pen Font size with CSS Variables by goiblas (@goiblas) on CodePen.

1. Translate relativo al tamaño
2. Scale -1
3. max-content
4. fallback & @supports
5. Variables CSS para tamaño de texto

See the Pen Animation paused + delay negative by goiblas (@goiblas) on CodePen.

See the Pen Grid system by goiblas (@goiblas) on CodePen.

See the Pen Css Variables color & transition by goiblas (@goiblas) on CodePen.

1. Animation paused + delay negativo
2. Gap con margen + Variables CSS
3. Separa color en Variables CSS
4. Animar Variables CSS