El documento describe el concepto de CSS funcional, que implica el uso de clases pequeñas y explícitas para construir componentes. También se mencionan sistemas como Tailwind CSS, Tachyons y Bootstrap 4, junto con ejemplos de implementación y las ventajas y desventajas asociadas. Se ofrecen enlaces para profundizar en el tema y se incluye información de contacto del autor.

1. FUNCTIONAL CSS
OTRA MANERA DE APLICAR ESTILOS

2. FUNCTIONAL CSS
QUIEN SOY
Drupalero, diseñador web,
organizador de contenido.
correo:koffer@gmail.com
Sitios: medioyforma.info

3. FUNCTIONAL CSS
DEFINICIÓN
CSS funcional (a veces denominado
CSS atómico) es la práctica de usar
clases pequeñas, inmutables y
nombradas explícitamente para
construir componentes.

4. FUNCTIONAL CSS
SISTEMAS
Tachyons
Tailwind CSS

5. FUNCTIONAL CSS
TAILWIND CSS

6. FUNCTIONAL CSS
UN EJEMPLO
<div class="card">
<img src="avatar.jpg" alt="Avatar">
<div class="container">
<h4><b>Jose jose</b></h4>
<p>Cantante & principe</p>
</div>
</div>

7. FUNCTIONAL CSS
EJEMPLO EN EL NAVEGADOR

8. FUNCTIONAL CSS
BOOSTRAP 4
<div class="w-25 p-3" >Width 25%</div>
<div class="w-50 p-3" >Width 50%</div>
<div class="w-75 p-3" >Width 75%</div>
<div class="w-100 p-3” >Width 100%</div>
<div class="w-auto p-3">Width auto</div>

9. FUNCTIONAL CSS
VENTAJAS
Desempeño
Consistencia
Sencillez de uso

10. FUNCTIONAL CSS
DESVENTAJAS
Aprendizaje
Medidas y ajustes
Diseño

11. FUNCTIONAL CSS
DUDAS?
Dudas?

12. FUNCTIONAL CSS
ENLANCES
Articulo sobre tema
https://www.browserlondon.com/blog/2019/06/10/functional-css-perils/
Tailwind CSS
https://tailwindcss.com/
Tachyons
https://tachyons.io/
Boostrap 4
https://getbootstrap.com/docs/4.4/utilities/sizing/

13. FUNCTIONAL CSS
MUCHAS GRACIAS
MUCHAS GRACIAS