The CSS framework you decide to use should ideally not be based only on a personal preference, as most web designers tend to do. Instead a framework should be based on your current web design projects complexity and functionality requirements. I mean, why would you want to use a one-huge-size-fits-all solution (like YUI, Blueprint or 960.gs, which are, as everybody knows, in there own right fantastic and versatile solutions) on a small or mid sized web project?
Would it not make more sense to use a lighter and easier to use framework? Something that offers only absolute essential tools, something with a shorter learning curve, something that would allow you to implement your prototype faster, debug quicker and, when all of this is put together, will optimize your development time and ultimately improve your productivity. Does that not sound pretty good?
In this article we highlight 15 of the best lightweight CSS frameworks that we feel you could consider for your next project. Looking at all fifteen, as you will see, it is impossible to choose the best, as each one focuses on something different. What they all do have in common is that they all will work perfectly as a good and solid base for any web design project.
So, over to you, we would love to know what your favorite CSS framework is and why…
15 Lightweight and Minimal CSS Frameworks
The recently released 1140px Grid Framework has been designed to fit perfectly with a 1280px screen and becomes fluid for smaller screens and beyond a certain point it uses media queries to serve up a mobile version.
The actual grid consists of twelve columns, evenly divided by either two, three, four or six. It works with all major browsers, with the exception of IE6, which does not support
max-width (it will span the full width of the browser).
The 1140px CSS Grid System/Framework →
The Less Framework 3 has been built so that you design your default layout as normal, and then all additional layouts using inline media queries. Any browsers that are incompatible with media queries will ignore all of the additional layouts, and will only use the default. The additional layouts will inherit any styles given to the default layout, so coding them is a very easy.
All four of the layouts (3, 5, 8 and 13 columns) included in Less Framework 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 24px.
Less Framework 3 →
The Square Grid is a simple CSS framework based on 35 equal-width columns. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3, 2, with the total width of the grid is 994px – which the majority of modern monitors will support.
The grid is equiped 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.
The Square Grid →
EZ-CSS is a light and easy to use framework with which you are not bound to a traditional grid and allows for columns and gutters of any width.
The idea behind EZ-CSS is to force the final “columns” in the flow to become a block formatting context. Doing so creates a fluid container that is both aware of surrounding floats and will contain a float at the same time. Actually, each EZ-CSS container is a block formatting context, the difference being that the final column is width-less. This lack of width prevents rounding issues (e.g., 1/3, 1/3, 1/3) or rounding errors (e.g. 1/2, 1/2 in Internet Explorer lt 7). As a bonus, vertical margins should behave the same in all containers (it will not collapse at the top or bottom of the box).
There is also a version for rapid prototyping, which you can learn more about here: EZ-CSS: Markup for Rapid Prototyping.
The Atatonic CSS Framework works just like any other grid system, but with only about 10 lines of CSS and has it's main focus on typography. The idea behind this project is to provide a solid, yet minimal, base to start every development project.
Atatonic CSS Framework →
Built with typographic standards in mind, Baseline makes it very 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 has been developed to be a quick way to prototype a website and grew up to become a full typographic framework for the web using a “real” baseline grid as its foundation.
Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines —
H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout.
The Elastic CSS Framework is a simple CSS frameworks, based on the printed layout techniques of 4 columns but with the capability to offer unlimited column combinations. and capacity to make elastic, fixed or liquid layouts easily.
Elastic CSS Framework →
The FEM CSS Framework is a fixed layout, based on the 960.gs, but with a twist in its philosophy to make it more flexible and faster to play with boxes. It has only a 12 column grid, with the columns having 10px margin on each side, making a 20px gutter – giving some breathe between boxes.
It is cross browser compatible, having been tested in IE (6, 7, 8), Opera, Gecko (Firefox) and Webkit (Safari, Chrome) browsers.
FEM CSS Framework →
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 without any HTML knowledge) and is simple to understand thanks to the included docs and tutorials.
iWebKit is a great tool because it is very easy to use, extremely fast, compatible & extendable. It is simple HTML that anyone can edit contrary to some other very complicated solutions based on ajax. Simplicity is the key!
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.
It doesn't include a layout system littered with useles classes and pre-set grids, it will do everything else for you: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more. It covers all of the stuff that's almost the same in every project, but that you keep on writing again and again.
The 520 Grid System, build for Facebook page developers, is 520px wide including 16px left and right margin around container. It is based on 12 columns 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 on the developers todo list.
520 Grid System (Framework for Facebook Page Developers) →