10 Lightweight and Minimal CSS Frameworks

Sam Deering
Share
The CSS framework should be based on your current web design projects complexity and functionality requirements, and not be based only on a personal preference, as most web designers tend to do. In this post, we collected 10 lightweight and minimal CSS frameworks. Enjoy!Related posts:

 

line CSS Grid Framework

This is the challenge of writing entire CSS layout system with one line CSS class.
1-line-CSS-Grid-Framework.jpg
Source

 

Tiny Fluid Grid

Tiny Fluid Grid ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.
Tiny-Fluid-Grid.jpg
Source

The 1KB CSS Grid

A simple, lightweight approach that doesn’t require a PhD.
The-1KB-CSS-Grid.jpg
Source

 

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.
SenCSs.jpg
Source

FEM CSS Framework

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.
FEM-CSS-Framework.jpg

Baseline

Built with typographic standards in mind, Baseline makes it very easy to develop a website with a pleasing grid and good typography.
Baseline.jpg
Source

Atatonic CSS Framework

Works just like any other grid system, but with only about 10 lines of CSS and has its 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.jpg

 

The Square Grid

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-Square-Grid.jpg
Source

Less Framework 3

Has been built so that you design your default layout as normal, and then all additional layouts using inline media queries.
Less-Framework-3.jpg