CSS Frameworks

An overview of the most popular CSS Frameworks

By Ivaylo Ivanov October 27, 2021 Programming, UI/UX Design 15 Minutes

There are two ways of writing maintainable CSS codes: 1) writing everything yourself without any help or template or 2) using a framework and customizing it to personal style.

CSS frameworks are a collection of predefined templates, codes, and APIs accessible to the developer to make coding in CSS easier. CSS frameworks target frequently used elements and styles like buttons, grids, media queries, navigation, etc., to offer shorter code or the convenience of predefined styles.

Why use CSS frameworks

All major CSS frameworks offer a responsive, web-friendly design for small screens (mobile) and large screens (desktops).
CSS framework codes are cross-browser compatible and save time for the developer.

Responsive design and layout consistency across a range of screen ratios are the biggest reasons why CSS developers may turn to frameworks. This article will look at four powerful frameworks, their various features, installation, and how they handle responsiveness and media breakpoints. We aim to show what working with each framework entails, and you can easily pick the one to learn.

Note: All frameworks listed here use a 12-point grid system.

Bootstrap

148,000 Github stars // 22,146,088 websites

Bootstrap is the most popular CSS framework. Developed by Twitter, it was the first framework to prioritize mobile screens using a built-in breakpoint and saved the trouble of developers having to code separately. The mobile friendliness of Bootstrap alone became a massive attraction to developers and led to the building of a strong community and support.
Bootstrap is not just a framework. It comes with many pre-built templates with ready-to-use components that cover all essential features of CSS.

Installing and using Bootstrap can be done in three different ways.

Downloaded Bootstrap files

With this option, we download the files to the local computer. The CSS files are available in different versions for developers to pick – v2.3.2, v3.4.1, v4.6.x, and v5.0.x. The downloaded files also contain minified CSS.
For Sass, we would need a Sass compiler to compile Sass source files into CSS files.

To use it, we will move the files to the directory of our website and manually include them in the head section of the HTML.

<!DOCTYPE html> 
  <head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bootstrap.min.css">
  </head> 
<body>
  <!-- ... --> 
</body> 
</html>

Using a CDN via jsDelivr

The CDN is a hosted, cached version of Bootstrap’s compiled CSS. In this case, we do not need to download the files. Instead, we copy the link and paste it right into the <head> section of the HTML document.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

Package Managers

We could install Bootstrap in our node.js powered app with the npm package

$ npm install bootstrap

For yarn

$ yarn add bootstrap

And composer

$ composer require twbs/bootstrap:5.0.1

Bootstrap offers a mobile-first flexbox grid with six default responsive tiers and breakpoints and many other predefined classes to build a responsive system.

Bootstrap’s 6 grid breakpoint options are a step more than other framework offers, allowing the developer code for the smallest to the biggest screen size available today and to make allowance for tiny variations in viewing port. The breakpoints include:

Extra small (xs), <576px
Small (sm) >=576px
Medium (md) >=768px
Large (lg) >=992px
Extra large (xl) >= 1200px
Extra extra large (xxl) >=1400px

The grid uses a class called row, and inner classes called col.

<div class="container"> 
  <div class="row"> 
    <div class="col"> 
      1 of 3 
    </div> 
    <div class="col"> 
      2 of 3 
    </div> 
    <div class="col"> 
       3 of 3 
    </div>  
  </div>
</div>

This code divides a screen into three equal parts across the entire width of the screen or container. To add a breakpoint for different screens, we use the prefix – xs, sm, md, lg, xl, xxl of the breakpoint and the number of points we need. Remember, the max points are 12.

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-8 col-lg-6">col-sm-8</div> 
    <div class="col-sm-4 col-lg-6">col-sm-4</div> 
  </div> 
</div>

When the code runs on a small screen, one column takes up 8 points and another 4 points. However, on a large screen, it takes up 6 points each, where each column is half of the screen size.
The bootstrap grid also encourages nesting by adding a new .row class and a new set of .col columns within an existing grid.

Foundation CSS

28,900 Github stars // 637,438 websites

Foundation CSS is the second most used framework, breathing in the neck of Bootstrap. It has rich, full-fledged components, utilities, and development tools. Less rigid than Bootstrap, it offers more flexibility in customization and more freedom in design.

Foundation has three main aspects: 1) Foundation for Sites, 2) Foundation for Emails, and 3) MotionUI.

Tailwind CSS

36,000 Github stars // 81,323 websites

Tailwind is a minimalist, lightweight, low-level CSS framework. It does not offer many components, classes, or predefined themes to the developer. It instead provides utility classes, reusable custom components, and more flexibility to create complex designs.
One of Tailwind’s powerful features is its integration with POSTCSS and SASS.

The easiest way to get Tailwind up and running is to access it via the framework’s CDN build with this code in the <head> tag of the HTML document.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

The official website advises against this. Using the CDN build has the following side effects.

You cannot:

customize Tailwind’s default theme

use any directives like @apply, @variants, etc.

enable additional variants like group-focus

install third-party plugins

tree-shake unused styles

The best recommendation is to install it as a PostCSS plugin:

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

To add it without a PostCSS plugin, use an npx tool to generate a fully compiled Tailwind CSS file.

$ npx tailwindcss-cli@latest build -o tailwind.css

This command will generate a file based on Tailwind’s default configuration called ‘tailwind.css’.

In the head document of our HTML file, we can then add the path to the tailwind.css file.

<!doctype html> 
<html> 
  <head> 
    <!-- ... --> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link href="path/to/tailwind.css" rel="stylesheet"> 
  </head> 
  <body> 
    <!-- ... --> 
  </body> 
</html>

Tailwind CSS allows responsiveness using utility classes. It takes four breakpoints:

sm: min-width 640px. For small screens
md: min-width 768px. For medium screens
lg: min-width 1024px. For large screens
xl: min-width 1280px. For larger screens
2xl: min-width 1536px. For very large screens.

Tailwind uses both flex and grid classes to style layouts. You can find more extensive grid resources on the flexbox and grid here on the Tailwind grid doc.

<!-- flexbox --> 
<div class="flex flex-row ..."> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
</div> 
<!-- CSS grid --> 
<div class="grid grid-cols-3 gap-4"> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
</div>

Both formats create three equal columns. To control the grids at different breakpoints, we will add the breakpoint prefix – either sm, md, lg, xl, or 2xl.

<div class="grid grid-cols-1 md:grid-cols-6">

The breakpoints work for other elements as well. For example, if we want an image to have a width of 16 by default, 32 on medium screens, and 48 on large screens, we will write:

<img class="w-16 md:w-32 lg:w-48" src="...">

Materialize CSS

Materialize is a popular CSS framework developed by Google based on material design. It has an interactive UI component library in addition to animations.
One of Materialize’s distinct features is that it allows a component to be extensible. You can write new rules instead of overwriting the old ones.

Materialize CSS can be either downloaded and installed locally or accessed using a CDN version. The download section has options for Materialize CSS, which is the standard version with both unminified CSS and JavaScript files and a Sass option containing the source SCSS files. The SCSS gives more control over the components to include.

If a developer chooses to download the CSS version, the directory looks like this:

MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

The files are then extracted to the website’s directory and added to the head section of the HTML document.

<!DOCTYPE html> 
<html> 
  <head> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"/> 
  </head> 
  <body> 
  <!-- ... -->
  </body> 
</html>

You can use the CDN link —hosted on Cloudflare —in the head section instead of a downloaded version.

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Another way to have it installed is using npm

$ npm install materialize-css@next

This release contains all source files, including compiled JavaScript and CSS files.

The grid system in Materialize uses a row class as a container.

<div class="row">
  <div class="col s1">
    <div class="card-panel teal lighten-2">1</div>
  </div>
  <div class="col s1">
    <div class="card-panel teal lighten-2">2</div>
  </div>
  <!-- ... -->
  <div class="col s1">
    <div class="card-panel teal lighten-2">12</div>
  </div>
</div>

The code above creates 12 equal numbers of cards with a light teal col css frameworks or. s is the prefix for a small screen, and 1 means it takes up one point on a small screen. The 12 divs go all the way across the screen, taking up one point each.

m is the prefix for a medium screen, l for a large screen, and xl for a very large screen.

<div class="row"> 
  <div class="col s12 m4 l2">
    <p>s12 m4</p>
  </div> 
</div>

On a small display, the column takes up the entire width of the screen. It becomes three columns on a medium size display, and on a large screen, the columns are only 2, each taking half of the screen.

In-line styling overrides the framework styling, but head and external styling will create bugs that are hard to notice.

The downside of CSS frameworks

Newbie developers still struggle with the concept of CSS frameworks and may even find it daunting. Frameworks, in general, offer a lot of features, plugins, and APIs. There is quite a lot to remember and reuse, which is why they struggle with it.
Using CSS frameworks means a developer must know the framework. As seen, the classes and styling are different across frameworks even though they perform the same function.

Some frameworks use jQuery, a JavaScript library favoring interactivity. However, CSS-only developers find it challenging to grasp.
Some frameworks offer little flexibility, making it harder to re-style.
Most CSS frameworks do not cover advanced CSS concepts.

Though frameworks are easy to learn and implement, some frameworks require more advanced knowledge of CSS. A framework like Tailwind uses Sass and PostCSS plugins. Developers with little understanding of Sass must learn it better before enjoying the full benefits.

CSS Frameworks

An overview of the most popular CSS Frameworks

Why use CSS frameworks

Bootstrap

148,000 Github stars // 22,146,088 websites

Downloaded Bootstrap files

Using a CDN via jsDelivr

Package Managers

Foundation CSS

28,900 Github stars // 637,438 websites

Related Articles

More HTML5 and CSS Tutorials

Tailwind CSS

36,000 Github stars // 81,323 websites

Materialize CSS

The downside of CSS frameworks

Author

Are you looking for more interesting articles?

6 benefits of an integrated eCommerce marketing platform

Building your first MVP - Part 1

No code Development Platform for Business: Benefits and Features