article:
Plugin: CoverScroll
article:
WordPress Magazine Theme: Viewport

1140 css grid

Advertisement

A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.


The markup

<div class="container">
    <div class="row">
        <div class="threecol">
            <p>Column 1</p>
        </div>
        <div class="threecol">
            <p>Column 2</p>
        </div>
        <div class="threecol">
            <p>Column 3</p>
        </div>
        <div class="threecol last">
            <p>Column 4</p>
        </div>
    </div>
</div>


Explanation of the classes and markup

.container
Is a full width div that allows layouts to have a background that spans the full width of the browser. It also contains 20px padding on either side to keep content away from the edges when it becomes fluid. You can just use one big container, or use multiple to break the page horizontally.

.row
Is a row of columns. It centres them and defines the 1140px max-width.

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol
Are the classes for each column. They can be used in any combination within a row that adds up to twelve or less.

.last
The last column within a row also needs this class. It removes the right margin so all the columns fit within the row.


source

Advertisement
Tags: 1140, 1140px, grid, css grid, css, framework, 12 column, fluid, fixed, mobile, media queries, template, iphone, android, fluid grid, 1280 grid, grid system, grid framework

Leave a Comment

No Comment

© Creative3x Ltd.