From 2e36b51d1a12b2a394e73e44a384199c600e2f5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Thalheim?= Date: Thu, 26 Jul 2012 11:12:26 +0200 Subject: [PATCH] include 960.gs --- source/stylesheets/960.css | 374 +++++++++++++++++++++++++++++++ source/stylesheets/site.css.scss | 3 + 2 files changed, 377 insertions(+) create mode 100644 source/stylesheets/960.css diff --git a/source/stylesheets/960.css b/source/stylesheets/960.css new file mode 100644 index 0000000..4acfeaf --- /dev/null +++ b/source/stylesheets/960.css @@ -0,0 +1,374 @@ +/* + Variable Grid System. + Learn more ~ http://www.spry-soft.com/grids/ + Based on 960 Grid System - 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; + position: relative; + 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, +.push_12, .pull_12 { + 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; +} \ No newline at end of file diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 8b178ba..4b10e5c 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -1,6 +1,7 @@ @import "compass"; @import "960/grid"; @import "solarized"; +@import "960.css"; $ninesixty_columns: 12; @@ -66,12 +67,14 @@ footer { .container { @include grid_container; + @include clearfix; @include accentize($yellow); /* Grid layout */ #main { @include grid(12); + @include clearfix; } #overview {