Skip to content
This repository has been archived by the owner on Jun 7, 2022. It is now read-only.

Commit

Permalink
Added stand-alone 12 and 16 column CSS files. Updated right-to-left l…
Browse files Browse the repository at this point in the history 
…anguage files to have parity with left-to-right versions.
@nathansmith
nathansmith committed Apr 28, 2011
1 parent 3a98428 commit 9a4d011
Showing 22 changed files with 1,797 additions and 18 deletions.
4 changes: 2 additions & 2 deletions README.txt
View file
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ web development workflow. Enclosed in the bundle are printable sketch sheets
and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio.

Also included is a lightweight CSS file, which contains the grid dimensions.
To use this file, simply include the 960.css in the <head> of the HTML page.
To use this file, simply include the 960.css in the <head> of the HTML page.
You may also use the reset.css and text.css files, or opt to leave them out.
Here is an example of the XHTML code necessary to incorporate the CSS files:

@@ -38,7 +38,7 @@ The files in the 960 Grid System are free of charge, licensed under MIT/GPL.
============================================================================

Note that if you are building a site in a language which reads from right to
left, use the CSS files that begin with "rtl_" instead. Denote the language:
left, use the CSS files that end in "_rtl.css" instead. Denote the language:

<html lang="..." dir="rtl">

351 changes: 351 additions & 0 deletions code/css/960_12_col.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,351 @@
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/

/*
Forces backgrounds to span full width,
even if there is horizontal scrolling.
Increase this if your layout is wider.
Note: IE6 works fine without this fix.
*/

body {
min-width: 960px;
}

/* `Containers
----------------------------------------------------------------------------------------------------*/

.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
position: relative;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
width: 60px;
}

.container_12 .grid_2 {
width: 140px;
}

.container_12 .grid_3 {
width: 220px;
}

.container_12 .grid_4 {
width: 300px;
}

.container_12 .grid_5 {
width: 380px;
}

.container_12 .grid_6 {
width: 460px;
}

.container_12 .grid_7 {
width: 540px;
}

.container_12 .grid_8 {
width: 620px;
}

.container_12 .grid_9 {
width: 700px;
}

.container_12 .grid_10 {
width: 780px;
}

.container_12 .grid_11 {
width: 860px;
}

.container_12 .grid_12 {
width: 940px;
}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
padding-left: 80px;
}

.container_12 .prefix_2 {
padding-left: 160px;
}

.container_12 .prefix_3 {
padding-left: 240px;
}

.container_12 .prefix_4 {
padding-left: 320px;
}

.container_12 .prefix_5 {
padding-left: 400px;
}

.container_12 .prefix_6 {
padding-left: 480px;
}

.container_12 .prefix_7 {
padding-left: 560px;
}

.container_12 .prefix_8 {
padding-left: 640px;
}

.container_12 .prefix_9 {
padding-left: 720px;
}

.container_12 .prefix_10 {
padding-left: 800px;
}

.container_12 .prefix_11 {
padding-left: 880px;
}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
padding-right: 80px;
}

.container_12 .suffix_2 {
padding-right: 160px;
}

.container_12 .suffix_3 {
padding-right: 240px;
}

.container_12 .suffix_4 {
padding-right: 320px;
}

.container_12 .suffix_5 {
padding-right: 400px;
}

.container_12 .suffix_6 {
padding-right: 480px;
}

.container_12 .suffix_7 {
padding-right: 560px;
}

.container_12 .suffix_8 {
padding-right: 640px;
}

.container_12 .suffix_9 {
padding-right: 720px;
}

.container_12 .suffix_10 {
padding-right: 800px;
}

.container_12 .suffix_11 {
padding-right: 880px;
}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
left: 80px;
}

.container_12 .push_2 {
left: 160px;
}

.container_12 .push_3 {
left: 240px;
}

.container_12 .push_4 {
left: 320px;
}

.container_12 .push_5 {
left: 400px;
}

.container_12 .push_6 {
left: 480px;
}

.container_12 .push_7 {
left: 560px;
}

.container_12 .push_8 {
left: 640px;
}

.container_12 .push_9 {
left: 720px;
}

.container_12 .push_10 {
left: 800px;
}

.container_12 .push_11 {
left: 880px;
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
left: -80px;
}

.container_12 .pull_2 {
left: -160px;
}

.container_12 .pull_3 {
left: -240px;
}

.container_12 .pull_4 {
left: -320px;
}

.container_12 .pull_5 {
left: -400px;
}

.container_12 .pull_6 {
left: -480px;
}

.container_12 .pull_7 {
left: -560px;
}

.container_12 .pull_8 {
left: -640px;
}

.container_12 .pull_9 {
left: -720px;
}

.container_12 .pull_10 {
left: -800px;
}

.container_12 .pull_11 {
left: -880px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix:after {
clear: both;
}

/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
zoom: 1;
}
Loading

0 comments on commit 9a4d011

Please sign in to comment.