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

https://getbootstrap.com

  • One of the first CSS Frameworks
  • Rapid prototyping
  • Large Ecosystem
  • You can see that it's Bootstrap

Foundation

https://get.foundation

  • More than "just" a CSS Framework
  • Super flexible
  • More complexity
  • Smaller community

Bulma

https://bulma.io

  • Very readable
  • Basic Framework

UIkit

https://getuikit.com

  • UI-based
  • Not easy to modify
  • JavaScript needed

Materialize

https://materializecss.com

  • If you like the Material Design Style
  • Not easy to modify
  • JavaScript needed

Pure.CSS

https://purecss.io

  • Super flexible
  • Different modules
  • No Design included

Skeleton

http://getskeleton.com

  • Super minimal
  • More of a boilerplate

Tailwind

https://tailwindcss.com

  • 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

CSS Frameworks

By Garrit Schaap

Private

CSS Frameworks