susy 1.0.9 → 2.0.0.alpha.1

data/docs/source/javascripts/viewport.js

@@ -0,0 +1,9 @@
+if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
+  var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
+  if (viewportmeta) {
+    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
+    document.body.addEventListener('gesturestart', function() {
+      viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
+    }, false);
+  }
+}

data/docs/source/layouts/grid-types.haml

@@ -0,0 +1,22 @@
+!!! 5
+%html.no-js{:lang => "en"}
+
+  = partial "partials/head"
+
+  %body{ :id => "susy-oddbird-net", :class => page_classes }
+
+    = partial "partials/demonav"
+
+    %section.page
+
+      %header.banner{ :role => "banner" }
+        %h1 Susy Demo
+        %h2 responsive grids for compass
+
+      %nav.pagenav
+        = data.page.pagenav
+
+      %article.main{ :role => "main" }
+        ~ yield
+
+    = partial "partials/javascripts"

data/docs/source/layouts/layout.haml

@@ -0,0 +1,34 @@
+!!! 5
+%html.no-js{:lang => "en"}
+
+  = partial "partials/head"
+
+  %body{ :id => "susy-oddbird-net", :class => page_classes }
+
+    %div.page
+
+      %header{ :role => "banner" }
+        %h1
+          %a.home{ :href => "/"} <b>S</b><span>usy</span>
+        %h2 Responsive grids for <a href="http://www.compass-style.org/">Compass</a>.
+
+      %nav{ :role => "navigation" }
+        = partial "partials/navigation"
+
+      %section{ :role => "main" }
+
+        ~ yield
+
+      -if page_side_content
+        %aside.secondary= page_side_content
+
+      %footer{ :role => "contentinfo" }
+        = partial "partials/contentinfo"
+
+      %ul.grid-toggle
+        %li.on
+          %a{ :href => "#susy-oddbird-net" } show grid
+        %li.off
+          %a{ :href => "#" } hide grid
+
+    = partial "partials/javascripts"

data/docs/source/layouts/magic.haml

@@ -0,0 +1,28 @@
+!!! 5
+%html.no-js{:lang => "en"}
+
+  = partial "partials/head"
+
+  %body{ :id => "susy-oddbird-net", :class => page_classes }
+
+    = partial "partials/demonav"
+
+    %section.page
+
+      %header.banner{ :role => "banner" }
+        %h1 Susy Demo
+        %h2 responsive grids for compass
+
+      %nav.pagenav
+        = data.page.pagenav
+
+      %article.main{ :role => "main" }
+        %aside.summary
+          = data.page.aside
+        %div.content
+          ~ yield
+
+      %footer.contentinfo{ :role => "contentinfo" }
+        = partial "partials/contentinfo"
+
+    = partial "partials/javascripts"

data/docs/source/partials/_contentinfo.haml

@@ -0,0 +1,47 @@
+:plain
+  <div class="colophon">
+    <p>
+      Susy is based on Natalie Downe's
+      <a href="http://www.slideshare.net/nataliedowne/css-systems-presentation">CSS Systems</a>,
+      made possible by <a href="http://www.sass-lang.com/">Sass</a>,
+      and made easy with <a href="http://www.compass-style.org/">Compass</a>.
+      You can use it anywhere,
+      from static sites to Django, Rails, Wordpress and more.
+      It even comes packaged as part of
+      <a href="http://www.middlemanapp.com/">Middleman</a>, to make your life easy.
+    </p>
+    <p>
+      This site was built with <span class="caps">HTML5</span> and
+      <span class="caps">CSS3</span>
+      using <a href="http://www.middlemanapp.com/">Middleman</a>,
+      <a href="http://www.compass-style.org/">Compass</a>,
+      <a href="http://www.sass-lang.com/">Sass</a>,
+      <a href="/">Susy</a>,
+      <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>,
+      <a href="http://www.modernizr.com/">Modernizr</a>,
+      <a href="https://github.com/scottkellum/modular-scale">Modular Scale</a>,
+      <a href="http://ethanschoonover.com/solarized">Solarized</a> colors,
+      <a href="http://pygments.org/">Pygments</a> syntax highlighting,
+      <a href="http://keyamoon.com/icomoon/">IcoMoon</a> icons,
+      and Franklin Gothic with Century OldStyle from
+      <a href="http://www.fontspring.com/">Fontspring</a>.
+    </p>
+    <p>
+      Susy was created by
+      <a href="http://github.com/ericam">Eric A. Meyer</a>
+      <span class="amp">&</span> <a href="http://oddbird.net">OddBird</a>,
+      and is maintained with the help of
+      <a href="http://www.dannyprose.com">Danny Palmer</a>,
+      and a number of wonderful
+      <a href="https://github.com/ericam/susy/graphs/contributors">contributors</a>.
+      <a href="http://github.com/ericam/susy/">Get involved</a>!
+    </p>
+  </div>
+
+  <p class="license">
+    <a href="https://github.com/ericam/susy/blob/master/LICENSE.txt">
+      Copyright &copy; 2012
+    </a>
+    <a href="http://eric.andmeyer.com/">Eric A. Meyer</a><br />
+    An <a href="http://oddbird.net/">OddBird</a> project.
+  </p>

data/docs/source/partials/_demonav.haml

@@ -0,0 +1,2 @@
+%nav{ :role => "navigation" }
+  %a{ :href => "/demos/" } Back to Demos

data/docs/source/partials/_google_analytics.haml

@@ -0,0 +1,5 @@
+:javascript
+  var _gaq=[['_setAccount','UA-30497331-1'],['_trackPageview']];
+  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+  s.parentNode.insertBefore(g,s)}(document,'script'));

data/docs/source/partials/_head.haml

@@ -0,0 +1,22 @@
+%head
+  %meta{ :charset => "utf-8" }
+  %meta{ :content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible" }
+  
+  %title= page_title
+  
+  %meta{:content => "Susy: Semantic grids with a responsive touch.", :name => "description"}
+  %meta{:content => "width=device-width", :name => "viewport"}
+  %meta{:content => "yes", :name => "apple-mobile-web-app-capable"}
+
+  %link{:rel => "apple-touch-startup-image", :media => "screen and (max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)", :href => "images/splash-iphone.png"}
+  %link{:rel => "apple-touch-startup-image", :media => "screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)", :href => "images/splash-iphone4.png"}
+  %link{:rel => "apple-touch-startup-image", :media => "screen and (min-device-width: 768px) and (orientation: portrait)", :href => "images/splash-portrait.png"}
+  %link{:rel => "apple-touch-startup-image", :media => "screen and (min-device-width: 768px) and (orientation: landscape)", :href => "images/splash-landscape.png"}
+
+  - if data.page.stylesheet
+    = stylesheet_link_tag data.page.stylesheet
+  - else
+    = stylesheet_link_tag "site.css"
+
+  = javascript_include_tag "modernizr-2.5.3.min.js"
+  = javascript_include_tag "modernizr.selectors.js"

data/docs/source/partials/_javascripts.haml

@@ -0,0 +1,4 @@
+= javascript_include_tag "jquery-1.7.1.min.js"
+= javascript_include_tag "jqwidont.js"
+= javascript_include_tag "viewport.js"
+= partial "partials/google_analytics"

data/docs/source/partials/_navigation.haml

@@ -0,0 +1,15 @@
+%ul
+  %li
+    %a{ :href => "/guides/getting-started/" } Getting Started
+  %li
+    %a{ :href => "/guides/reference/" } Reference
+  %li
+    %a{ :href => "/demos/" } Demos
+  %li
+    %a{ :href => "/sites-using-susy/" } Sites
+  %li
+    %a{ :href => "https://github.com/ericam/susy" } Source
+  %li
+    %a{ :href => "http://stackoverflow.com/questions/tagged/susy-compass"} Support
+  %li
+    %a{ :href => "http://twitter.com/compasssusy/" } Twitter

data/docs/source/sites-using-susy.html.md

@@ -0,0 +1,29 @@
+---
+title: Sites using Susy
+---
+
+## Sites Using Susy
+
+- [Ben Frain](http://benfrain.com/)
+- [Leo Burnett](http://leoburnett.co.uk/)
+- [Renault TV](http://renault.tv/)
+- [Tiga Minimal WordPress Theme](http://wordpress.org/extend/themes/tiga) [[source](https://github.com/satrya/tiga/downloads)]
+- [Mozilla MozTrap](https://moztrap.mozilla.org/) [[source](https://github.com/mozilla/moztrap "MozTrap source")]
+- [Cassie Greer](http://www.cassiegreer.com)
+- [HR ♥ PE](http://www.hrlovespe.com/)
+- [My job would be easier if...](http://www.myjobwouldbeeasierif.com/)
+- [Volunteer Center Northumberland](https://volunteeringnorthumberland.org.uk/)
+- [Rita Konig](http://ritakonig.com/)
+- [Concordia discors](http://www.ffzg.unizg.hr/zbor/) [[source](https://github.com/silvenon/concordia-discors "discords source")]
+- [Waldorf camp](http://waldorfcamp.net/) [[source](https://github.com/jimick/waldorfcamp "Waldorf source")]
+- [Matthew Balaam](http://www.matthewbalaam.co.uk/)
+- [Starrt](http://starrt.dk/)
+- [Jeremy Peters](http://jeremypeters.co.uk/)
+- [Avoid Payday Loans](http://avoidpaydayloans.com/)
+- [Fake Images Please](http://fakeimg.pl/)
+- [Viggle](http://www.viggle.com/)
+- [Studio Daniel Libeskind](http://daniel-libeskind.com/)
+- [Devtroit](http://devtroit.com/)
+- [Patrick Marsceill](http://patrickmarsceill.com)
+
+Have a site to add? [Let us know](http://twitter.com/compasssusy/) or [fork and add your site on GitHub](https://github.com/ericam/susy).

data/docs/source/stylesheets/_base/_base.scss

@@ -0,0 +1,23 @@
+//-----------------------------------------------------------------------------
+// Imports
+
+@import "compass";
+@import "compass/layout";
+@import "susy";
+
+//-----------------------------------------------------------------------------
+// Grid Settings
+
+$total-columns: 4;
+$column-width: 4em;
+$gutter-width: 1.5em;
+$grid-padding: $gutter-width;
+
+$break: 40em 10;
+
+//-----------------------------------------------------------------------------
+// Other Settings
+
+@import "colors";
+@import "size";
+@import "type";

data/docs/source/stylesheets/_base/_colors.scss

@@ -0,0 +1,47 @@
+// ---------------------------------------------------------------------------
+// Color Palette (Solarized: http://ethanschoonover.com/solarized)
+
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+
+// ---------------------------------------------------------------------------
+// Color System
+
+$base             : $base00;
+$alt              : $red;
+$accent           : $violet;
+
+$susy-background:        $base3;
+$susy-highlight:         $red;
+$susy-bodycopy:          $base00;
+
+//5% darker
+$susy-background-dark-5: darken($susy-background, 5%);
+$susy-highlight-dark-5: darken($susy-highlight, 5%);
+$susy-bodycopy-dark-5: darken($susy-bodycopy, 5%);
+
+//10% darker
+$susy-background-dark-10: darken($susy-background, 10%);
+$susy-highlight-dark-10: darken($susy-highlight, 10%);
+$susy-bodycopy-dark-10: darken($susy-bodycopy, 10%);
+
+//20% darker
+$susy-background-dark-20: darken($susy-background, 20%);
+$susy-highlight-dark-20: darken($susy-highlight, 20%);
+$susy-bodycopy-dark-20: darken($susy-bodycopy, 20%);
+
+$grid-background-column-color: rgba(lighten($susy-background,5%),.5);

data/docs/source/stylesheets/_base/_size.scss

@@ -0,0 +1,49 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "modular-scale";
+
+// ---------------------------------------------------------------------------
+// Size Settings
+
+$base-size    : 16px;
+$ratio        : major-third() fifth();
+
+$norm         : 1;
+$xxxsmall     : ms(-4,$norm);
+$xxsmall      : ms(-3,$norm);
+$xsmall       : ms(-2,$norm);
+$small        : ms(-1,$norm);
+$small-norm   : (ms(-1,$norm) + $norm)/2;
+$large-norm   : (ms(1,$norm) + $norm)/2;
+$med          : ms(1,$norm);
+$large        : ms(2,$norm);
+$xlarge       : ms(4,$norm);
+$xxlarge      : ms(8,$norm);
+$xxxlarge     : ms(16,$norm);
+
+$normem       : 1em;
+$medem        : ms(1,$normem);
+$smallem      : ms(-1,$normem);
+$xsmallem     : ms(-2,$normem);
+$xxsmallem    : ms(-3,$normem);
+$xxxsmallem   : ms(-4,$normem);
+$small-normem : (ms(-1,$normem) + $normem)/2;
+$large-normem : (ms(1,$normem) + $normem)/2;
+$largeem      : ms(2,$normem);
+$xlargeem     : ms(3,$normem);
+$xxlargeem    : ms(6,$normem);
+$xxxlargeem   : ms(12,$normem);
+
+$normpx       : $base-size;
+$medpx        : ms(1);
+$smallpx      : ms(-1);
+$xsmallpx     : ms(-2);
+$xxsmallpx    : ms(-3);
+$xxxsmallpx   : ms(-4);
+$small-normpx : (ms(-1,$normpx) + $normpx)/2;
+$large-normpx : ms(2);
+$largepx      : ms(4);
+$xlargepx     : ms(6);
+$xxlargepx    : ms(12);
+$xxxlargepx   : ms(16);

data/docs/source/stylesheets/_base/_type.scss

@@ -0,0 +1,19 @@
+// ---------------------------------------------------------------------------
+// Type Settings
+
+$base-font-size             : $normpx;
+$base-line-height           : $medpx;
+
+$round-to-nearest-half-line : true;
+
+// ---------------------------------------------------------------------------
+// Type Mixins
+
+@mixin ellipsis($r:1) {
+  overflow: hidden;
+  max-height: rhythm($r);
+  white-space: nowrap;
+  word-wrap: break-word;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}

data/docs/source/stylesheets/_demos/_demo.scss

@@ -0,0 +1,28 @@
+//-----------------------------------------------------------------------------
+// Base
+
+@import "_base/base";
+
+//-----------------------------------------------------------------------------
+// General
+
+@import "_general/root";
+@import "_general/type";
+
+//-----------------------------------------------------------------------------
+// Modules
+
+[role="navigation"] {
+  padding: rhythm(.5);
+  background: $base03;
+  color: $base1;
+  font-style: italic;
+  a {
+    #{$link} {
+      @extend %icon;
+      @extend %icon-arrow-left;
+      color: $base2;
+    }
+    #{$focus} { color: $base3; }
+  }
+}

data/docs/source/stylesheets/_demos/magic/_layout.scss

@@ -0,0 +1,39 @@
+//-----------------------------------------------------------------------------
+// Settings
+
+$total-columns  : 7;
+$column-width   : 4em;
+$gutter-width   : 1em;
+$grid-padding   : $gutter-width;
+
+$break          : 12;
+
+//-----------------------------------------------------------------------------
+// Container
+
+.page {
+  @include container($total-columns, $break);
+}
+
+//-----------------------------------------------------------------------------
+// Layout
+
+@include at-breakpoint($break) {
+  .banner { @include prefix(2,12); }
+  .pagenav { @include span-columns(2,12); }
+  .main {
+    @include span-columns(10 omega, 12);
+    .content { @include span-columns(7,10) }
+    .summary { @include span-columns(3 omega, 10) }
+  }
+}
+
+.contentinfo {
+  clear: both;
+  margin: 0 0 - $grid-padding;
+  padding: 0 $grid-padding;
+  @include at-breakpoint($break) {
+    margin: 0;
+    @include pad(2,3,12);
+  }
+}