CSS
Frameworks
Web development fundamentals
2022
What is a CSS Framework
Also called a Front-End-Framework
What is a CSS Framework
- Reset Style Sheets
- Grids
- Sometimes icons
- Styling for Tooltips, Buttons and Form elements
- Accordion, Tabs, Slideshow, Modal windows
- CSS helper classes (left, center, hide, ...)
Semantic or Utility based
What are popular frameworks
Bootstrap
- One of the first CSS Frameworks
- Rapid prototyping
- Large Ecosystem
- You can see that it's Bootstrap
Foundation
- More than "just" a CSS Framework
- Super flexible
- More complexity
- Smaller community
Bulma
- Very readable
- Basic Framework
UIkit
- UI-based
- Not easy to modify
- JavaScript needed
Materialize
- If you like the Material Design Style
- Not easy to modify
- JavaScript needed
Pure.CSS
- Super flexible
- Different modules
- No Design included
Skeleton
- Super minimal
- More of a boilerplate
Tailwind
- Utility based
- Very popular
- Corresponding UI Framework available
How to build your own Framework
- Structure your CSS Code
- Use different CSS files
- Components in Figma or XD as starting point
- Find patterns
- Build Util classes
- Use CSS Variables to have a single source of truth
