16 Best CSS Frameworks For All Projects Types

January 23, 2011 — 3 Comments

The CSS framework you decide to use shouldn’t ideally be based only on a personal preference, as most web designers tend to do.But Ideally you should choose a framework  that match up on your current web projects factors like complexity and functionality requirements.

In this article you find 16 of the best CSS frameworks including a couple of generators that you could consider for your next project.

1. 960 Grid System

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.

2. Blueprint CSS Framework

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

3. Tiny Fluid Grid

The developer like to call the site “The happy & awesome way to build fluid grid based websites”. Tiny Fluid Grid is a CSS grid framework for creating fluid grids easily and instantly.  It is inspired by the 1KB CSS Grid and enables you to customize the output by defining the number of columns, gutter percentage, min & max width with the help of sliders. Once created, you can preview the grid or download it which includes a demo file with the CSS.

4. The 1KB CSS Grid

Other CSS frameworks try to do everything grid system, style reset, basic typography, form styles. But complex systems are… well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

5. Instant Blueprint

Instant Blueprint is a framework generator that allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster!

6. Less Framework 3

Less Framework is a cross-device CSS grid system based on using inline media queries.  The core idea is to first create a default layout normally, and then additional layouts using inline media queries.

Any browsers incompatible with media queries will simply ignore the additional layouts, and will only use the default one. The additional layouts will inherit any styles given to the default layout, so coding them is a breeze.

All four of the layouts share a common column-width and gutter-width, which makes it easy to design them consistently. Also included are two sets of typography presets composed around a baseline grid of 24 px.

7. The 1140px CSS Grid System

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.  Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.  Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

8. The Square Grid

A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites. The total width of the grid is 994 pixels – which the majority of modern monitors support. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3, 2. The grid is equipped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block.

9. EZ-CSS

It is light (1kb), flexible, browser-friendly and easy to use!  EZ-CSS is a different kind of CSS framework. Authors are not bound to a “grid”. Plus, columns and gutters can be of any width. EZ-CSS works by forcing the final element in the HTML flow to become a block formatting context (EZ-CSS use “hasLayout” for Internet Explorer lt 8).

10. Elastic CSS Framework

A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.

Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code.  This way you don’t have to remember cryptic class names, just express what you want.  Make two, three, four, or auto-columns.  Let Elastic get the width of fixed width columns.  Call for same-height or full-height.

11. Baseline – A Designer Framework

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

12. FEM CSS Framework

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts.  It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.

13. 520 Grid System – A Grid Framework Specialty For Facebook

Now days there are milions of Facebook Pages almost about everything and the Facebook Page creators are trying to impress first time visitors but also fans with attractive and useful content in custom-made FBML tabs.

520 Grid System is 520px wide including 16px left and right margin around container. It is based on 12 grids with 16px gutters with it; 12 is nice number that can be divided with 2, 3, 4 or 6 to get inline columns with equal width.  Presently, 520 Grid System has not included styles for text, tables, forms. But that’s in the developer to do list.

14. iWebKit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

The kit is accessible to anyone even people with little html knowledge and is simple to understand thanks to the included user guide. In a couple of minutes you will have created a professional looking website. iWebKit is thee framework of choice because it is very easy to use, it loads extremely fast, is compatible with all devices & extendable. It is simple html that anyone can edit contrary to some other complicated solutions based on ajax. Remember simplicity is the key!

15. Typogridphy

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.  Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict XHTML, and validate CSS.

16. SenCSS

SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style.

It doesn’t include a layout system littered with silly classes and pre-set grids, so what does SenCSs do for you? SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more. All the stuff that’s almost the same in every project, but that you keep writing again and again …and again.

Framework Tools

About these ads

3 responses to 16 Best CSS Frameworks For All Projects Types

  1. 

    Many of these frameworks are hosted on http://gcdn.org/

  2. 

    for me, the best is http://csshor.us perfect responsive and print friendly too

  3. 
    Jozef Dvorský July 17, 2013 at 6:57 PM

    Check out another interesting solution – Percentage-based – also working in Safari, Opera: http://coolumns.creatingo.com/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s