An overview of the most popular CSS Frameworks
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 bootstrapFor yarn
$ yarn add bootstrapAnd composer
$ composer require twbs/bootstrap:5.0.1Bootstrap 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.
Related Articles
Foundation for sites is the core CSS framework for styling websites. Foundation for Emails is a framework for designing responsive email templates, while MotionUI is a tool that allows developers to use CSS animations.
There are a couple of ways to install and use Foundation. The default CSS download has four parts, available through download links.
- The complete version – this means everything in the framework, including vanilla JS.
- Essential components – a lighter version.
- Custom elements – define the sizes of columns, colors, and font sizes you might need and download them.
- SASS compiler – which is Foundation built using SCSS.
You can also install Foundation with Package Managers available on npm, Bower, Meteor, and Composer. Please find the various commands here.
To install with Foundation CLI using the Node-powered CLI
$ npm install --global foundation-cli
# or sudo npm install --global foundation-cliThen create a new Foundation project using
$ foundation new When Foundation installation finishes, there is a Foundation folder with app.css, foundation.css, and foundation.min.css files. We add these files to the head of the HTML document.
<!doctype html>
<html lang="en">
<head>
<title>Foundation CSS</title>
<link rel="stylesheet" href="css/foundation.css" />
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>For developers who prefer not to download the package but access it using a CDN link, they will add this code instead to the <head> of their HTML document.
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous"> To create a grid, we use a row class to create a horizontal block containing vertical columns. Then add divs with a column. The breakpoints uses a prefix .small, .medium and .large. The digits added to the prefix specifies the number of points a column should take at any breakpoint.
<div class="row">
<div class="small-2 large-4 columns">2pts</div>
<div class="small-4 large-4 columns">4pts</div>
<div class="small-6 large-4 columns">6pts</div>
</div>There are three equal columns across large screens, taking up 4pts each. On a small screen, the first column is 2pts, the second is 4, and the third is 6, all adding up to 12.
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@latestTo 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.cssThis 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.htmlThe 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@nextThis 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.
