Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Subscribe to our newsletter

Advertise on LowEndTalk.com

Latest LowEndBox Offers

    (Per)sonal Grid System - Fixed, Fixed-Fluid & Fluid Layout
    New on LowEndTalk? Please read our 'Community Rules' by clicking on it in the right menu!

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

    DotALDotAL Member
    edited August 2013 in General

    Hello,

    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 state and its not actually meant for production sites.

    The grid system includes 3 different layouts + 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

    Push/Pull/Offsets:

    push-(number)

    pull-(number)

    offset-(number)

    (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 :) let me know.

    Thank you.

    Sign In or Register to comment.