article:
WordPress Magazine Theme: Viewport
article:
Tutorial: IPv6

responsive.gs

Advertisement

Responsive Grid System is a fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

12 Column Grid
The 12 column grid is probably the most popular because it has fewer columns to keep track of. It is dividable by 2, 3, 4 and 6 which is usually suitable for just about any project.
download

16 Column Grid
The 16 column grid is only dividable by 2, 4 and 8 but has a column width that is small enough to be used for extra gutter space if needed.
download

24 Column Grid
The 24 column grid is the most flexible of the three because it is dividable by 2, 3, 4, 6, 8 and 12 making it the ultimate templating solution.
download


How It Works

container
Add this class to your page wrapper to center it to the browser window and set the width of the page.

row
Add this class to any element that spans the entire width of your container to clear any floating child elements. Also allows you to define spacing between rows.

col
Add this class to child elements of a row to float left and add the default gutter width. This class must be used in conjuction with one of the span classes below.

span_1, span_2, span_3, span_4, span_5, span_6, span_7, span_8, span_9, span_10, span_11, span_12
Add one of these classes to each col element to set it’s fluid width. On smaller screen sizes these elements will default to stack vertically.

clr, group
Add either of these two classes to an element, whichever one you're used to, to clear it’s floating child elements. Uses the 'clearfix method'.


Marking It Up

<div id="page_wrap" class="container row">
    <header class="row span_12">
        <hgroup class="row span_12">
            <h1 class="col span_4">Site Title</h1>
            <h2 class="col span_8">Site Description</h2>
        </hgroup><!-- span_12 -->
        <nav id="global_nav" class="row span_12">
            Insert global nav here.
        </nav><!-- span_12 -->
    </header><!-- span_12 -->
    <section id="content_wrap" class="row span_12">
        <article class="col span_8 clr">
            Insert page content here.
        </article><!-- span_8 -->
        <sidebar class="col span_4 clr">
            Insert sidebar stuff here.
        </sidebar><!-- span_4 -->
    </section><!-- content_wrap span_12 -->
    <footer class="row span_24">
        Insert footer stuff here.
    </footer><!-- span_24 -->
</div><!-- page_wrap -->


source
download

Advertisement
Tags: responsive, grid, web, html, css, stylesheet, webdevelopment, design, webdesign

Leave a Comment

No Comment

© Creative3x Ltd.