CSS Frameworks is something we have already written about a few years ago with an extensive list of the best css frameworks anyone can use to get all kinds of features, UI elements, UI layouts, add-on modules, interactions and much more. BootStrap and Foundation are the ones I have been accustomed to for a while, even though you can’t just categorize them into CSS frameworks, they are more of front end frameworks. Since a lot of people don’t have the time to only use the ready made CSS but then write the HTML and JavaScript separately, these BootStrap or Foundation types of frameworks are widely used to make it easier and faster. Now after being into this field for a while… I have realized that I shouldn’t get so comfortable with just one framework and not open up to the new and diverse kind of options available in the market today. Since now the criteria has become like the smallest CSS frameworks, lightweight CSS frameworks, modular CSS frameworks, extended CSS framework and much more, so I jumped into researching all kinds of CSS frameworks which are great based on different aspects.

So the new frameworks (some of them old as well) like Skeleton, Bulma, Gumby (which is now discontinued), Semantic, BluePrint, Pure etc. are worth trying for sure. Some of them claim (and maybe are) better than BootStrap as well. But my focus in this blog is to provide the detailed list of the best and the most lightweight CSS frameworks (not front-end framework) for designers and developers who are keen to keep their site is simple and light.

This blog is an upgrade to an old blog post I wrote on the
Best CSS Frameworks for Designers

1. Pure CSS

purecss lightweight css framework - arunace

Created: Yahoo! Inc.
File Size: 3.8KB* minified & gzipped
Year Launched: 2013
Year Last Updated: 2017

Pure CSS Framework Features

  • PureCSS builds on Normalize.css
  • Loads of customization
  • Allows custom download
  • no JavaScript or jQuery
  • Responsive i.e. can handle layout on all the devices.
  • Provides an option to download non-responsive version also ( mobile specific or desktop specific )
  • Provides layout and styling for native HTML elements, plus the most common UI components.

Download Pure CSS

 

2. Furtive CSS

furtive css framework - arunace

Created by: John Otander
File Size: 2.47kb gzipped
Year Launched: 2014
Year Last Updated: 2017

Furtive CSS Features

  • Micro CSS framework
  • good for novices / beginners, pretty easy to understand and use
  • more focused on the mobiles
  • works well with latest technologies like SVG and flexbox.
  • no JavaScript or jQuery
  • All the dimensions in rem

Download Furtive CSS

 

3. TOAST CSS grid

toast css framework - arunace

Created by: Daniel Eden
File Size: 7.11kb unzipped
Year Launched:
Year Last Updated: 2015

Toast CSS Features

  • “insane, no-nonsense css grid”
  • Only grid system
  • It is best for managing content

Download Furtive CSS

 

4. Skeleton

skeleton css framework - arunace

Created by: Dave Gamache
File size: 11.2kb unzipped
Year Launched:
Year Last Updated: 2014

Skeleton CSS Features

  • No javascript or jquery
  • Lightweight and easy to use.
  • Zero compiling and installation.

Download Skeleton CSS

 

5. Siimple

siimple css framework - arunace

Created by: Josemi Juanes
File size: 10.2 kb unzipped
Year Launched: 2015
Year Last Updated: 2017

Siimple CSS Features

  • Flat design
  • Clean code representation
  • Built in SCSS/SASS
  • 3 different projects (siimple, siimple-color and siimple-layout)
  • (siimple & siimple-color) are available
  • siimple-layout is comming out soon

Download Siimple CSS

 

6. Milligram

milligram css framework - arunace

Created by: CJ Patoilo
File Size: 2kb gzipped
Year Launched: 2015
Year Last Updated: 2017

Milligram Features

  • Minimal design concept
  • Fast and clean code
  • Focuses on higher productivity and better performance
  • More functionality and minimal design

Download Milligram CSS

 

7. Spectre.css

spector css framework - arunace

Created by: Yan Zhu
File size: 10kb gzipped
Year Launched: 2016
Year Last Updated: 2017

Spectre.css Features

  • Lightest, Responsive and Modern
  • All features needed with latest technology
  • Flexbox with responsive layout

Download Spectre.css

 

8. Layers CSS

layers css framework - arunace

Created by: Jerry Jäppinen
File size: 7.6 kb minified and gzipped
Year Launched: 2015
Year Last Updated: 2017

Layers CSS Features

  • Built your own look on web not twitter’s look
  • Normalization and sensible are default
  • no px, color or border pre defined.
  • Good documentation visual representation

Download Layers CSS

 

9. Mini.CSS

mini css framework - arunace

Created by: Angelos Chalaris
File size: less than 7kb gzipped
Year Launched: 2016
Year Last Updated: 2017

Mini.css Features

  • Minimal, responsive and style agnostic
  • Infinitly customizeble
  • It works with all browsers but not all versions
  • It stands between micro and full featured framework

Download Mini.css

 

10. Bulma

bulma css framework - arunace

Created by: Jeremy Thomas
File size: 184kb unzipped
Year Launched: 2016
Year Last Updated: 2017

Bulma CSS Framework Features

  • Modern css framework
  • Needs only one css file
  • Works with node js
  • Built on flex box technology

Download Bulma

 

11. Bijou

bijou css framework - arunace

Created by: Jacob Hart
File size: 2kb gzipped
Year Launched: 2014
Year Last Updated: 2014

Bijou CSS Framework Features

  • Beautiful CSS framework
  • It offers Grid, Typography, Tables, Buttons and alert

Download Bijou

 

12. Base

base css framework - arunace

Created by: Matthew Hartman
File size: 2kb gzipped
Year Launched: 2014
Year Last Updated: 2017

Base CSS Framework Features

  • Builts mobile first to ensure works on all device
  • Solid Foundation
  • Built on normalize 4
  • Cross Browser support
  • Modular Core
  • Automation Sensation
  • Base is very easy to learn and use

Download Base

 

13. IceCream

ice cream css framework - arunace

Created by: Zied Hosni
File size: uncompressed 2.9kb, minified 1.8kb
Year Launched: 2013
Year Last Updated: 2013

IceCream CSS framework Features

  • It only has grid system nothing else

Download IceCream

 

14. Dead Simple Grid

dead simple css framework - arunace

Created by: Vladimir Agafonkin
File size: 250 bytes
Year Launched: 2013
Year Last Updated: 2016

Dead Simple Grid Features

  • Responsive css grid
  • It is micro framework
  • Contains only two class row and color
  • Fluid columns with fixed gutters

Download Dead Simple Grid

 

15. Simple Grid

simple css framework - arunace

Created by: Dallas
File size: 3.63 kb
Year Launched: 2014
Year Last Updated: 2016

Simple Grid Features

  • Responsive CSS grid system only

Download Simple Grid

 

16. Concrete

concrete css framework - arunace

Created by: David Lumley
File size: 2402 bytes unzipped and 709 bytes gzipped
Year Launched: 2015
Year Last Updated: 2015

Concrete Features

  • simple, responsive, ultra lightweight twelve column grid framework
  • It is designed to be easy, simple and small

Download Concrete

 

17. Cardinal CSS

cardinal css framework - arunace

Created by: Chris Bracco
File size: 11.27 kb gzipped
Year Launched: 2013
Year Last Updated: 2016

Cardinal CSS Features

  • It is modular css framework built with performance and scalability in mind
  • Sensible global styles and useful mixins
  • Flexible grid system encapsulated styles
  • easy, simple and small

Download Cardinal CSS