Top 5 CSS Frameworks

CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid.

They offer different modules and tools:

  • reset style sheet
  • grid especially for responsive web design
  • web typography
  • set of icons in sprites or icon fonts
  • styling for tooltips, buttons, elements of forms
  • parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
  • equalizer to create equal height content
  • often used CSS helper classes (left, hide)

Modern CSS frameworks use a CSS interpreter like LESS or SASS.

1. Bootstrap by Twitter

Bootstrap - CSS Framework

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.

Go to website

2. Foundation by Zurb

Foundation - CSS Framework

Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Foundation is maintained by ZURB and is an open source project.

Go to website

3. 960 Grid System

960grid - CSS Framework width=

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Go to website

4. Material Design Lite

Material Design Lite - CSS Framework width=

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.

Go to website

5. PureCSS by Yahoo

PureCSS - CSS Framework width=

A set of small, responsive CSS modules that you can use in every web project. Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It’s what you need, without the cruft.

Go to website

The widely used examples are Bootstrap and Foundation, but above lists are the most common used CSS frameworks you can start using in your next projects.

Leave a Reply