Awesome CSS libraries, boilerplates and frameworks

by Jean. 19 Comments -

When starting a new project, using a CSS framework or boilerplate can help you save a lot of time. In this article, I have compiled my favorite CSS boilerplates, frameworks and libraries to help you being more efficient when building websites or apps.

Bootstrap


If you want to give your new project a professional look and feel, Bootstrap might be the tool you need. If features a very clean typography, form elements as well as almost all you need to design a modern website.
More info: http://twitter.github.io/bootstrap/index.html

Foundation


Brought to you by Zurb, Foundation is a very interesting tool which is perfect for creating responsive webpages. Foundation comes with a lot of different layout templates so you’ll definitely save many time when starting your new project.
More info: http://foundation.zurb.com/

Compass


Compass is an open-source CSS authoring framework. It uses Sass, an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Definitely worth giving a try!
More info: http://compass-style.org/

Profound Grid


Here is a responsive grid system for fixed and fluid layouts, all built in SCSS. If you’re planning to develop a layout based on a grid, you should definitely have a look at Profound Grid.
More info: http://www.profoundgrid.com/

Kube


Kube is a simple and minimalistic CSS framework based on a flexible grid and beautiful typography. Probably the right tool for you if you’re looking for a lightweight framework with no imposed styling!
More info: http://imperavi.com/kube/

Topcoat


I know that I already wrote about Topcoat a lot on CWC lately, but really, Topcoat is awesome! A great CSS framework if you want to be able to create a professional looking website quickly and easily.
More info: http://topcoat.io/

Skeleton


Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
More info: http://www.getskeleton.com/

Pure CSS


Pure is a set of small modules that you can use as a basis for almost every web project. It features grids, forms elements, menus, tables and a lot more.
More info: http://purecss.io/

KNACSS


KNACSS is a minimalist, responsive and extensible CSS framework to kick-start your HTML/CSS projects.
It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically!
More info: http://www.knacss.com/

Metro UI


Do you like the Windows 8 style? If yes I bet you’ll enjoy Metro UI, a CSS framework which allow you to create websites with a Windows 8 look and feel.
More info: http://metroui.org.ua/

  • http://www.codelabgh.com Joe Twumasi

    Nice list of CSS Frameworks

  • http://www.reloadedcode.com Shahid

    Great and helpful collection.

  • http://www.insoftbrasil.com.br Luiz Antonio Jr

    Very good for starting projects. I will start to use them in my projects. I liked most the purecss which has a cleaner layout and shorter.

    I’v been reading your blog for a few years and have never commented here hehe.

    Thanks for your tips and cheers from Brazil.

  • http://www.ethanhackett.com Ethan

    I love and use foundation all the time. They’re constantly updating it and they’re excellent about fixing bugs and supporting it.

  • http://www.bestskincarezone.com Jamie

    These are wonderful CSS stuff. I will definitely try these!

  • http://www.gitinfosys.com Kavleen Kaur

    Wow! CSS is very useful tool for all web development.

    I’v been reading your blog for a few years and have never commented.

    Thanks for your tips.

  • http://www.arieon.my/main/ Arieon

    Great info. I will gonna try one of these.

  • http://www.eyecreamhq.com Jamie

    You always give essential list of of pointers and new information. These CSS libraries are really great!

  • http://codegeekz.com/ Ceba

    one of the best css libraries and tools list…

  • http://www.bestskincarezone.com Jamie

    Bootstrap and Compass are my most favorite. Pure CSS is another good stuff too.

  • http://www.bestskincarezone.com Jamie

    Bootstrap and Foundation are my favorites too. This is a good list you got here.

  • http://www.bestskincarezone.com Jamie

    That is true. CSS framework is a time saver!

  • http://www.eyecreamhq.com Jamie

    Boostrap and Compass are top on my list. But other names on the list are not bad too.

  • Mittul Chauhan

    I like Bootstrap and compass a lott

  • http://broadcastgorillareview.com/ Tinh Le

    Vote for Bootrap, I really like it :)

  • Marcus Proietti

    I think the gumby framework is a upcoming useful tool. You should give it a try…. http://gumbyframework.com/

  • http://www.greensprocket.com David Tym

    My experience with Foundation 4 has been very positive however there are a couple things that bug me — if only just a little.

    1) ZURB doesn’t use jQuery by default but rather their own JS library. If you’re relying on jQuery for other things you now have overhead for two libraries.

    2) Some customization is made difficult with the pure CSS installation. Sass and its prerequisites like Ruby Installer can be intimidating to the uninitiated.

    Anyway, I don’t wish to put down ZURB as Foundation 4 is an awesome framework and these are just quibbles.

  • http://www.johnslegers.com/ John Slegers

    I didn’t like any of the existing frameworks out there, so I just created my own framework.

    Cascade Framework ( http://cascade-framework.com/ ) combines a very light footprint with feature richness bacause of an ultra-modular OOCSS based architecture. If you only need its core features, you need no more than 2.5Kb of framework code (minified + gzipped).

    If Cascade Framework still isn’t lightweight enough for you, there’s now also a light version with 2kb in total. You can check it out at http://jslegers.github.io/cascadeframeworklight/ .

  • http://www.acgtubetv.com James Sea

    I prefer bootstrap because I am used to it. This is the first time I heard about Foundation.