Skip to content

Instantly share code, notes, and snippets.

@mainerror
Last active December 16, 2015 14:09
Show Gist options
  • Save mainerror/5446748 to your computer and use it in GitHub Desktop.
Save mainerror/5446748 to your computer and use it in GitHub Desktop.
A minimal 960 grid CSS *framework*.

mini960.css

a minimal 960 grid framework

There's not much you need to know. It supports nesting and offsetting.

The idea is, you start with a row and add columns with a certain span to that row.

Here's a simple example.

<div class="row">
    <div class="col span6">span6</div>
    <div class="col span6">span6</div>
</div>

Here's how you'd use nesting.

<div class="row">
    <div class="col span6">span6</div>
    <div class="col span6">span6</div>
    <div class="row">
        <div class="col span4">span4</div>
        <div class="col span4">span4</div>
        <div class="col span4">span4</div>
    </div>
</div>

And last but not least the offset.

<div class="row">
    <div class="col span6 offset6">span6</div>
</div>

I bet you didn't see that coming, did ya?

License

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2013 Octavian Damiean <[email protected]>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.
.col {
float: left;
margin: 0 10px;
overflow: hidden;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
.span4 { width: 300px; }
.span5 { width: 380px; }
.span6 { width: 460px; }
.span7 { width: 540px; }
.span8 { width: 620px; }
.span9 { width: 700px; }
.span10 { width: 780px; }
.span11 { width: 860px; }
.span12 { width: 940px; }
.offset1 { margin-left: 90px; }
.offset2 { margin-left: 170px; }
.offset3 { margin-left: 250px; }
.offset4 { margin-left: 330px; }
.offset5 { margin-left: 410px; }
.offset6 { margin-left: 490px; }
.offset7 { margin-left: 570px; }
.offset8 { margin-left: 650px; }
.offset9 { margin-left: 730px; }
.offset10 { margin-left: 810px; }
.offset11 { margin-left: 890px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment