A CSS layout system or CSS framework is a collection of code used by developers to speed up development. Frameworks provide a set of common, tested, cross-browser code. Features often include mobile responsive utilities, grids, buttons and tables.
In this article I’ll cover some of the most popular and outline their advantages and disadvantages when designing for web.
Bootstrap
Twitter developed Bootstrap (previously called Twitter Blueprint) in 2010 and used it for layout for over a year.
Released to the public as Bootstrap in 2011 it has since had 20+ releases.
Bootstrap became responsive as an option in version 2 and mobile-first in version 3.
The current version of Bootstrap is 5.2.0.
Frameworks such as Tailwind do not offer built-in CSS UI components. Bootstrap does. Using provided markup you can create components including navbars, tabs, spinners, toasts etc.
Advantages of Bootstrap include:
- It allows quick design of prototypes
- It is cross-browser compatible
- It is responsive by default
- It allows code reuse and prevents CSS duplication
Disadvantages of Bootstrap include:
- You will need to use a fair amount of CSS code to override bootstrap styles.
- You need to work hard to make sure all your designs don’t look the same.
Bootstrap is by far the most popular framework. It is used on 3.5 million websites (according to Wappalyser) with sites such as Paypal, Etsy and Gitlab still using it.
Foundation
Zurb developed the Foundation framework as an open source project in October 2011. It is now managed by independent contributors.
Foundation provides responsive functionality including grids and utilities. It also provides CSS UI components following common design patterns.
The framework uses the SCSS (Sass) extension to CSS. This adds power to CSS development and allow re-use of code (something native CSS is quite poor at).
Advantages of using Foundation include:
- More control of the customisation of your website so they don’t develop a similar style.
- More flexibility in layout grids
- Built in libraries for things like form validation, pricing tables etc.
Disadvantages of using Foundation include:
- The developer community for Foundation is smaller than that for Bootstrap.
- Foundation has a somewhat steep learning curve for new developers
Well known brands use Foundation. Companies such as Adobe, Ebay and Disney are using it in production. There are, currently, around 500,000 websites using it (according to builtwith.com).
Tailwind
Tailwind Labs released the Tailwind framework as an Alpha version in 2017. The first public release (1.0) happened in 2019. The current version is 3.
Tailwind considers itself a utility first framework. It does not force developers into patterns, or provide UI components. It provides a set of utility CSS classes that allow you to write your own.
Advantages of using Tailwind include:
- Full control over layout styling. Tailwind does not have a default theme or force a look that you have to override.
- Thousands of built in classes for styling elements mean you often don’t have to write any custom CSS.
- Fantastic mobile responsiveness
- Tiny CSS files
Disadvantages of using Tailwind include:
- Somewhat steep learning curve
- A large number of classes per element can be confusing
- No UI components built in
Tailwind does not have built in components. TailwindUI and Preline can provide these.
High profile clients are using Tailwind including Laravel and Sitepoint. Approximately 250,000 websites now use it.
Signalfire develops websites using Tailwind CSS Framework by preference or Bootstrap if required. Tailwind is, in our opinion, the best layout framework available to design a web site or design a ecommerce website.