(Per)sonal Grid System - Fixed, Fixed-Fluid & Fluid Layout

Helloguys, i am new here and i would like to introduce something i have worked this last 24 hours :),

I have been working on a Grid System and well this is the result, the (Per)sonal Grid System. At the moment its in an Alpha/Beta state and its not actually meant for production sites. But from what i have tested so far its pretty stable.

The grid system includes 3 different layouts types + Responsive Design:

  1. Fixed Layout - The most general of the layouts the 960px width layout.
  2. Fixed-Fluid (how i call it) - Its a Width auto (100%) with max-width 1140px (it can be changed).
  3. Fluid - Which is the 90% fluid layout which extends overall 90% of the website.
  4. Responsive Design

Base Grid classes are:

(number)-large column/s
(number)-medium column/s
(number)-small column/s
(number)-nano column/s



(with number i mean a number from one to twelve with words).

The classes help you define the design in different kind of screen size, example, if you would like a (number)-large class to be displayed in another specific size in a different screen size you can just add the class (number)-medium or -small or -nano.

Also fixed-fluid and fluid classes are infinitely nestable (except the fixed in the -large class).

Source-code: https://github.com/sadiqevani/sonal

Demo: http://sadiqevani.com/works/sonal/

PS: if someone is a good designer and would like to work on the UI for this Grid/Framework :slight_smile: let me know.

Thank you.