Posts

Flexible and Modular CSS Framework – Not Just a Grid

Not Just a Grid – flexible and modular CSS framework designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

Not Just a Grid includes separate stylesheets covering multi-column layouts, typography, forms, tables and user experience enhancement.

There are individual demos to show each of the core elements: Grid, Typography, Tables, Forms, User Experience and Helpers.

Flexible and modular CSS framework

Included in download is a range of common images that are used for both visual styling and user interface enhancement.

Not just a Grid is licensed under the MIT license.

The Square Grid CSS Framework

The Square Grid – a simple CSS framework for designers and developers, based on 35 equal-width columns.

As other CSS frameworks, the Square Grid aims to speed up your web development process and take care of any cross-browser compatibility issues.

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, …

Square grid CSS framework

Fluid CSS/LESS Framework – Centage

Centage CSS Framework – a CSS framework based on less.js, that takes full advantage of it’s advanced features like mixins, variables and nesting.

Centage does not use pixel values, everything expands and shrinks according to browser width, remaining in visual balance, and does not add anything to your xhtml markup. It’s end result is pure, robust CSS.

View DEMO

Fluid CSS framework - Centage

Note: Centage! is currently in alpha release state and might have bugs. It’s not fully tested with IE, so you might encounter problems.

Flexible Grid System with Common Styles – FEM CSS Framework

FEM CSS Framework – is a 12 column grid system based on 960 Grid System with basic styles for forms, tables, menus, and the Grey Box method to background boxes easy.

All CSS modules compressed are about 10kb, and only the grid about 6.5kb. Tested in IE (6, 7, 8), Opera, Gecko (Firefox) and Webkit (Safari, Chrome) browsers.

The project is hosted at Github. Download contains the different CSS modules, examples, templates in Photoshop and Fireworks, a printer ready sketch and other resources.

CSS grid system - FEM CSS framework

Extremely Lightweight Typography Focused CSS Framework – Atatonic

Atatonic CSS Framework – as vertical rhythm is one of the most important things in design, this lightweight CCS framework has it’s main focus on typography, with added grid support.

The main goal of this project is to provide a solid base to start with every project. The combined file is only 5kb (gzipped~3kb).

View DEMO , or checkout the code

atatonic css framework

Atatonic CSS Framework is still very young. Extra features will be added as plugins, like a stylesheet for forms, icons for buttons, better form controls and maybe some GUI standards such as dialogs, bars, buttons and more.

Emastic – CSS Framework

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

It’s:

  • Lightweight (compressed weight less then 4kb)
  • Personalized width of the page in (em,px,%)
  • Use of fixed and fluid columns in the grid.
  • Elastic Layout with “em”s

Tested with IE 5.5/6/7, Firefox 2/3, Opera 9.23/9.5, Safari 3.1 (Win/MAC)

emastic css framework

Boilerplate: A simple CSS framework

A stripped down version of Blueprint which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions.

If you prefer:{ float: left; width: 240px; margin-right: 110px; } over class=”column span-2 append-1″

then you’re in the right place.
CSS Framework