What's atomic CSS?

Atomic css are functionals css, reuseable, easy to use and maintain.

Transcript

1. Atomic / utility CSS
2. - What’s atomic CSS? 2 - How does it use? - Which are its advantages and disadvantages?
3. What’s atomic CSS? A practice to define single-purpose classes which names are based in visual function. More info https://css-tricks.com/lets-define-exactly-atomic-css/ 3
4. <div class="card">A card</div> 4
5. <div class="card">A card</div> 5
6. <div class="card">A card</div> 6 <div class="padding-sm border-radius-sm bgc-white"></div>
7. Why? 7
8. Let’s see an example with Tailwind CSS
9. For default or all
10. For small devices
11. For middle devices
12. For large devices
13. For extra-large devices
14. Which are its advantages? ⬡ Easy to use and maintain. ⬡ Reusable css ⬡ It’s perfect to responsive web design. 14
15. Which are its disadvantages? ⬡ It takes much time to implement. ⬡ Fill too much classes in HTML. ⬡ You must to learn a framework css. 15
16. “To resume: 16 More info https://medium.com/better-programming/functional-css-meet-tailwind-css-3897da4b63a2 Atomic css are functionals css, reuseable, easy to use and maintain.
17. 17 Thanks! Any questions? You can find me at: @freddy_munive munivef@gmail.com