From b743a676a8faa523b9168ee4e9451bd080978597 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Thalheim?= Date: Sun, 26 Aug 2012 08:55:24 +0200 Subject: [PATCH] use susy instead of 960gs --- Gemfile | 2 +- Gemfile.lock | 7 +- config.rb | 1 - source/layout.slim | 4 +- source/stylesheets/960.css | 374 ------------------------------- source/stylesheets/site.css.scss | 17 +- 6 files changed, 10 insertions(+), 395 deletions(-) delete mode 100644 source/stylesheets/960.css diff --git a/Gemfile b/Gemfile index 3245945..da9ccd0 100644 --- a/Gemfile +++ b/Gemfile @@ -4,9 +4,9 @@ gem "compass", ">= 0.13.alpha.0" gem "middleman", ">= 3.0.0rc4" gem "middleman-smusher" -gem 'compass-960-plugin' gem "compass-holmes" gem 'oily_png' gem "sass" gem "slim" gem "rake" +gem "susy" diff --git a/Gemfile.lock b/Gemfile.lock index c89a8ca..38167ec 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -13,8 +13,6 @@ GEM chunky_png (~> 1.2) fssm (>= 0.2.7) sass (~> 3.2.0.alpha.93) - compass-960-plugin (0.10.4) - compass (>= 0.10.0) compass-holmes (0.1.1) compass (>= 0.11) execjs (1.4.0) @@ -108,6 +106,9 @@ GEM sprockets-sass (0.8.0) sprockets (~> 2.0) tilt (~> 1.1) + susy (1.0.rc.1) + compass (>= 0.12.2.rc.0) + sass (>= 3.2.0.alpha.237) syntax (1.0.0) temple (0.4.0) thor (0.15.4) @@ -123,7 +124,6 @@ PLATFORMS DEPENDENCIES compass (>= 0.13.alpha.0) - compass-960-plugin compass-holmes middleman (>= 3.0.0rc4) middleman-smusher @@ -131,3 +131,4 @@ DEPENDENCIES rake sass slim + susy diff --git a/config.rb b/config.rb index b91776e..ac38b56 100644 --- a/config.rb +++ b/config.rb @@ -7,7 +7,6 @@ page "/albert/", :layout => false # Change Compass configuration compass_config do |config| - require 'ninesixty' config.output_style = :compact end diff --git a/source/layout.slim b/source/layout.slim index f1d92ec..39bcaea 100644 --- a/source/layout.slim +++ b/source/layout.slim @@ -31,9 +31,9 @@ html.no-js.light lang="en" / for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/ script src="js/libs/modernizr.custom.01860.min.js" body - header - == partial "navbar" .container + header + == partial "navbar" #main == yield footer diff --git a/source/stylesheets/960.css b/source/stylesheets/960.css deleted file mode 100644 index 4acfeaf..0000000 --- a/source/stylesheets/960.css +++ /dev/null @@ -1,374 +0,0 @@ -/* - 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 adc0af2..108fe0c 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -1,12 +1,9 @@ @import "compass"; -@import "960/grid"; @import "solarized"; @import "normalize"; -@import "960"; @import "font-awesome"; //@import "compass-holmes"; // css-based debugging - -$ninesixty_columns: 12; +@import "susy"; h1 { font-family: 'Lobster', Georgia, Times, serif; @@ -18,9 +15,7 @@ body { line-height: 1.3em; } -a { - text-decoration:none; -} +a { text-decoration:none; } header { position: fixed; @@ -46,22 +41,17 @@ header { } footer { - @include grid(12); padding-left: 15px; box-shadow: 0 2px 3px #b8b8b8; } .container { - @include grid_container; - @include clearfix; @include accentize($yellow); - + @include container; /* Grid layout */ #main { margin-top: 50px; - @include grid(12); - @include clearfix; } a:hover { color: darken($yellow, 10%); @@ -98,4 +88,3 @@ footer { line-height: 0.8em; } } -