├── stylesheets ├── eleven40 │ ├── _reset.scss │ ├── _smallscreen.scss │ ├── _mobile.scss │ ├── reset │ │ └── _utilities.scss │ ├── _ie.scss │ ├── _typography.scss │ └── _base.scss └── _eleven40.scss ├── lib └── eleven40.rb ├── templates └── project │ ├── screen.scss │ ├── ie.scss │ ├── mobile.scss │ ├── smallscreen.scss │ ├── partials │ └── _layout.scss │ └── manifest.rb ├── LICENSE ├── eleven40.gemspec └── README.md /stylesheets/eleven40/_reset.scss: -------------------------------------------------------------------------------- 1 | @import "reset/utilities"; 2 | 3 | @include eleven40-global-reset; -------------------------------------------------------------------------------- /lib/eleven40.rb: -------------------------------------------------------------------------------- 1 | require 'compass' 2 | Compass::Frameworks.register("eleven40", :path => "#{File.dirname(__FILE__)}/..") -------------------------------------------------------------------------------- /templates/project/screen.scss: -------------------------------------------------------------------------------- 1 | @import "eleven40/reset"; 2 | @import "eleven40/base"; 3 | @import "eleven40/typography"; 4 | 5 | @import "partials/layout"; -------------------------------------------------------------------------------- /stylesheets/_eleven40.scss: -------------------------------------------------------------------------------- 1 | // This is your framework's main stylesheet. Use it to import all default modules. 2 | 3 | @import "eleven40/reset"; 4 | @import "eleven40/base"; -------------------------------------------------------------------------------- /templates/project/ie.scss: -------------------------------------------------------------------------------- 1 | @import "eleven40/reset"; 2 | @import "eleven40/base"; 3 | @import "eleven40/ie"; 4 | @import "eleven40/typography"; 5 | 6 | @import "partials/layout"; -------------------------------------------------------------------------------- /templates/project/mobile.scss: -------------------------------------------------------------------------------- 1 | @import "eleven40/reset"; 2 | @import "eleven40/base"; 3 | @import "eleven40/mobile"; 4 | @import "eleven40/typography"; 5 | 6 | @import "partials/layout"; -------------------------------------------------------------------------------- /templates/project/smallscreen.scss: -------------------------------------------------------------------------------- 1 | @import "eleven40/reset"; 2 | @import "eleven40/smallscreen"; 3 | @import "eleven40/base"; 4 | @import "eleven40/typography"; 5 | 6 | @import "partials/layout"; -------------------------------------------------------------------------------- /stylesheets/eleven40/_smallscreen.scss: -------------------------------------------------------------------------------- 1 | @mixin eleven40-smallscreen-reset { 2 | body { 3 | font-size: 0.8em; /* Makes type a bit smaller at 1024 so layout doesn't look unbalanced */ 4 | line-height: 1.5em; /* As above */ 5 | } 6 | } -------------------------------------------------------------------------------- /templates/project/partials/_layout.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | @include eleven40-row; 3 | } 4 | 5 | .menu { 6 | @include eleven40-fourcol; 7 | } 8 | 9 | .body { 10 | @include eleven40-eightcol; 11 | @include eleven40-last; 12 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010 Jeremy Bush and Andy Taylor 2 | 3 | This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Australia License. 4 | 5 | http://creativecommons.org/licenses/by-sa/3.0/au/legalcode -------------------------------------------------------------------------------- /stylesheets/eleven40/_mobile.scss: -------------------------------------------------------------------------------- 1 | $mobile: true; 2 | 3 | @mixin eleven40-mobile-column { 4 | width: auto; 5 | float: none; 6 | margin-left: 0px; 7 | margin-right: 0px; 8 | padding-left: 20px; 9 | padding-right: 20px; 10 | } 11 | 12 | @mixin eleven40-mobile-full { 13 | width: 100%; 14 | margin-left: 0px; 15 | margin-right: 0px; 16 | padding-left: 0px; 17 | padding-right: 0px; 18 | } -------------------------------------------------------------------------------- /stylesheets/eleven40/reset/_utilities.scss: -------------------------------------------------------------------------------- 1 | @mixin eleven40-global-reset { 2 | @include eleven40-nested-reset; 3 | } 4 | 5 | @mixin eleven40-nested-reset { 6 | html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr, 7 | address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li, 8 | fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { 9 | border:0; 10 | margin:0; 11 | padding:0; 12 | } 13 | article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section, 14 | video,object { 15 | display:block 16 | } 17 | a img{ 18 | border:0; 19 | } 20 | figure { 21 | position:relative; 22 | } 23 | figure img { 24 | width:100%; 25 | } 26 | 27 | img, object, embed { 28 | max-width: 100%; 29 | } 30 | } -------------------------------------------------------------------------------- /eleven40.gemspec: -------------------------------------------------------------------------------- 1 | Gem::Specification.new do |s| 2 | # Release Specific Information 3 | s.version = "1.2" 4 | s.date = "2010-12-03" 5 | 6 | # Gem Details 7 | s.name = "eleven40" 8 | s.authors = ["Jeremy Bush"] 9 | s.summary = %q{a cssgrid implementation in compass} 10 | s.description = %q{a cssgrid implementation in compass} 11 | s.email = "contractfrombelow@gmail.com" 12 | s.homepage = "https://github.com/zombor/eleven40-compass" 13 | 14 | # Gem Files 15 | s.files = %w(README.md) 16 | s.files += Dir.glob("lib/**/*.*") 17 | s.files += Dir.glob("stylesheets/**/*.*") 18 | s.files += Dir.glob("templates/**/*.*") 19 | 20 | # Gem Bookkeeping 21 | s.has_rdoc = false 22 | s.require_paths = ["lib"] 23 | s.rubygems_version = %q{1.3.6} 24 | s.add_dependency("compass", [">= 0.10.0.rc3"]) 25 | end -------------------------------------------------------------------------------- /stylesheets/eleven40/_ie.scss: -------------------------------------------------------------------------------- 1 | @mixin eleven40-onecol { 2 | @include eleven40-subcolumn(4.7%); 3 | } 4 | 5 | @mixin eleven40-twocol { 6 | @include eleven40-subcolumn(13.2%); 7 | } 8 | 9 | @mixin eleven40-threecol { 10 | @include eleven40-subcolumn(22.05%); 11 | } 12 | 13 | @mixin eleven40-fourcol { 14 | @include eleven40-subcolumn(30.6%); 15 | } 16 | 17 | @mixin eleven40-fivecol { 18 | @include eleven40-subcolumn(39%); 19 | } 20 | 21 | @mixin eleven40-sixcol { 22 | @include eleven40-subcolumn(48%); 23 | } 24 | 25 | @mixin eleven40-sevencol { 26 | @include eleven40-subcolumn(56.75%); 27 | } 28 | 29 | @mixin eleven40-eightcol { 30 | @include eleven40-subcolumn(61.6%); 31 | } 32 | 33 | @mixin eleven40-ninecol { 34 | @include eleven40-subcolumn(74.05%); 35 | } 36 | 37 | @mixin eleven40-tencol { 38 | @include eleven40-subcolumn(82%); 39 | } 40 | 41 | @mixin eleven40-elevencol { 42 | @include eleven40-subcolumn(91.35%); 43 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # eleven40-compass extension 2 | 3 | This is a Compass-CSS extension to enable the 1140px fluid layout style, originally described at http://cssgrid.net/ 4 | 5 | The main problem with the styles provided is that is makes your markup and style non-semantic. Compass and SASS fixes that. 6 | 7 | This extension is not quite in line with the original, but will be soon. It currently only has screen and mobile support. 8 | 9 | ## Usage 10 | 11 | ### Mixins 12 | 13 | This extension provides mixins to do what the classes in the original did. In general, you can follow this format: 14 | 15 | @include eleven40-classname 16 | 17 | For example: 18 | 19 | @include eleven40-container 20 | 21 | replaces the 22 | 23 | .container 24 | 25 | css class. 26 | 27 | The same applies for the row class all the col classes. Make sure you use the eleven40-last mixin for the last column, just like in the css class version. 28 | 29 | ### Mobile 30 | 31 | To make a mobile stylesheet, simply: 32 | 33 | @import "eleven40/mobile"; 34 | 35 | This will include the mobile styles that will overload the default screen styles. 36 | 37 | ## Install 38 | 39 | gem install eleven40 -------------------------------------------------------------------------------- /templates/project/manifest.rb: -------------------------------------------------------------------------------- 1 | description "eleven40 compass extension" 2 | 3 | stylesheet 'partials/_layout.scss' 4 | stylesheet 'screen.scss', :media => 'screen' 5 | stylesheet 'ie.scss', :media => 'screen', :condition => "lt IE 8" 6 | stylesheet 'mobile.scss', :media => 'handheld, only screen and (max-width: 767px)' 7 | stylesheet 'smallscreen.scss', :media => 'only screen and (max-width: 1023px)' 8 | 9 | help %Q{ 10 | Please see the cssgrid website for source information: 11 | 12 | http://cssgrid.net/ 13 | 14 | This extension provides mixins to do what the classes in the original did. In general, you can follow this format: 15 | 16 | @include eleven40-classname 17 | 18 | For example: 19 | 20 | @include eleven40-container 21 | 22 | replaces the 23 | 24 | .container 25 | 26 | css class. 27 | 28 | The same applies for the row class all the col classes. Make sure you use the eleven40-last mixin for the last column, just like in the css class version. 29 | 30 | } 31 | 32 | welcome_message %Q{ 33 | Please see the cssgrid website for source information: 34 | 35 | http://cssgrid.net/ 36 | 37 | This extension provides mixins to do what the classes in the original did. 38 | } -------------------------------------------------------------------------------- /stylesheets/eleven40/_typography.scss: -------------------------------------------------------------------------------- 1 | @mixin eleven40-typography 2 | { 3 | /* Type & image presets */ 4 | 5 | img, object, embed { 6 | margin-bottom: 20px; 7 | } 8 | 9 | body { 10 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 11 | font-size: 14px; 12 | line-height: 24px; /* Changing this will break the baseline grid. */ 13 | -webkit-text-size-adjust: none; /* Stops the iPhone scalling type up */ 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | color: #005698; 19 | font-weight: bold; 20 | border-bottom: 1px solid #adadad; 21 | } 22 | 23 | a:hover { 24 | color: #000; 25 | border-bottom: none; 26 | } 27 | 28 | a img { 29 | display: block; /* Stops image links getting text link styles */ 30 | } 31 | 32 | img { 33 | -webkit-border-radius: 3px; 34 | -moz-border-radius: 3px; 35 | border-radius: 3px; 36 | margin-bottom: 20px; 37 | } 38 | 39 | p, ul, ol, blockquote { 40 | margin-bottom: 24px; /* Changing this will break the baseline grid. */ 41 | } 42 | 43 | li { 44 | margin-bottom: 6px; 45 | } 46 | 47 | blockquote { 48 | border-left: 1px solid #c1c1c1; 49 | color: #747474; 50 | padding-left: 15px; 51 | margin-left: -15px; 52 | } 53 | 54 | h1 { 55 | font-size: 30px; 56 | line-height: 36px; /* Changing this will break the baseline grid. */ 57 | margin-bottom: 24px; /* Changing this will break the baseline grid. */ 58 | font-family: Georgia; 59 | font-weight: lighter; 60 | } 61 | 62 | h2 { 63 | font-size: 20px; 64 | margin-bottom: 24px; /* Changing this will break the baseline grid. */ 65 | font-family: Georgia, serif; 66 | font-weight: lighter; 67 | } 68 | 69 | h3 { 70 | font-size: 16px; 71 | margin-bottom: 24px; /* Changing this will break the baseline grid. */ 72 | font-family: Georgia, serif; 73 | font-weight: lighter; 74 | } 75 | } -------------------------------------------------------------------------------- /stylesheets/eleven40/_base.scss: -------------------------------------------------------------------------------- 1 | $mobile: false; 2 | 3 | @mixin eleven40-container { 4 | @if $mobile == true 5 | { 6 | @include eleven40-mobile-full; 7 | } 8 | @else 9 | { 10 | padding-left: 20px; 11 | padding-right: 20px; 12 | } 13 | } 14 | 15 | @mixin eleven40-row { 16 | @if $mobile == true 17 | { 18 | @include eleven40-mobile-full; 19 | } 20 | @else 21 | { 22 | width: 100%; 23 | max-width: 1140px; 24 | margin: 0 auto; 25 | overflow: hidden; 26 | } 27 | } 28 | 29 | // $default-width should include the % 30 | @mixin eleven40-subcolumn($default-width) { 31 | @if $mobile == true 32 | { 33 | @include eleven40-mobile-column; 34 | } 35 | @else 36 | { 37 | width: $default-width; 38 | margin-right: 3.8%; 39 | float: left; 40 | } 41 | } 42 | 43 | @mixin eleven40-onecol { 44 | @include eleven40-subcolumn(4.85%); 45 | } 46 | 47 | @mixin eleven40-twocol { 48 | @include eleven40-subcolumn(13.5%); 49 | } 50 | 51 | @mixin eleven40-threecol { 52 | @include eleven40-subcolumn(22.15%); 53 | } 54 | 55 | @mixin eleven40-fourcol { 56 | @include eleven40-subcolumn(30.8%); 57 | } 58 | 59 | @mixin eleven40-fivecol { 60 | @include eleven40-subcolumn(39.45%); 61 | } 62 | 63 | @mixin eleven40-sixcol { 64 | @include eleven40-subcolumn(48.1%); 65 | } 66 | 67 | @mixin eleven40-sevencol { 68 | @include eleven40-subcolumn(56.75%); 69 | } 70 | 71 | @mixin eleven40-eightcol { 72 | @include eleven40-subcolumn(65.4%); 73 | } 74 | 75 | @mixin eleven40-ninecol { 76 | @include eleven40-subcolumn(74.05%); 77 | } 78 | 79 | @mixin eleven40-tencol { 80 | @include eleven40-subcolumn(82.7%); 81 | } 82 | 83 | @mixin eleven40-elevencol { 84 | @include eleven40-subcolumn(91.35%); 85 | } 86 | 87 | @mixin eleven40-twelvecol { 88 | @include eleven40-subcolumn(100%); 89 | } 90 | 91 | @mixin eleven40-last { 92 | margin-right: 0px; 93 | } --------------------------------------------------------------------------------