Introduction to Atomic CSS and TailwindCSS

Transcript

1. (ex full-stack Introduction to Atomic CSS and TailwindCSS Vlad Lisovskii 05 May 2020
2. Agenda - Atomic (Functional) CSS - Let’s build a button with TailwindCSS -Showcase of Atomic CSS - Questions
3. Question? Are you familiar with the topic?
4. Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function
5. single-purpose classes naming based on visual function (opposition to semantics)
6. Tailwind it's a utility-first CSS framework for rapidly building custom designs.
7. Tailwind is more than a CSS framework, it's an engine for creating design systems.
8. Demo time Let’s get first impression
9. - No Naming Things - No Context Switching - Scalable CSS architecture - Small CSS size - No JS in runtime - Customizable - Plugings (extensible)
10. How many KB of CSS does this this page need?
11. Facebook uses programmatic way (CSS-in-JS) of AtomicCss
13. Questions?