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/

Comments (19) - Leave yours

  1. Luiz Antonio Jr said:

    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.

  2. Ethan said:

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

  3. Marcus Proietti said:

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

  4. David Tym said:

    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.

  5. John Slegers said:

    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/ .

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!