susy 1.0.9 → 2.0.0.alpha.1

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

@@ -0,0 +1,104 @@
+//-----------------------------------------------------------------------------
+// Style
+
+$grid-background-column-color: lighten($susy-background,3%);
+
+%text {
+  @include sans;
+  h2, h3, h4 { font-weight: bold; }
+  h2 { 
+    @include adjust-font-size-to($largepx);
+    @include trailer(1,$largepx);
+  }
+  h3 { text-transform: uppercase; }
+  h3, p, ul, ol { @include trailer; }
+  strong, code { font-weight: bold; }
+  em { font-style: italic; }
+}
+
+body {
+  @include background(
+    linear-gradient(top, 
+      $susy-background, 
+      $grid-background-column-color 10%, 
+      $grid-background-column-color 80%, 
+      $susy-background
+    )
+  );
+}
+
+.page {
+  @include susy-grid-background;
+  @include at-breakpoint($break) {
+    @include susy-grid-background;
+  }
+}
+
+.banner {
+  @include sans;
+  @include leader;
+  @include trailer;
+  font-weight: bold;
+  h1 {
+    @include adjust-font-size-to($xlargepx);
+    color: $red;
+  }
+  h2 {
+    text-transform: uppercase;    
+  }
+}
+
+.pagenav {
+  @include cond;
+  @include trailer(1);
+  font-weight: bold;
+  h3 { display: none; }
+  li { 
+    display: inline-block; 
+    margin-right: 1em;
+  }
+  @include at-breakpoint($break) {
+    @include leader(3);
+    li { 
+      display: block; 
+      margin-right: 0;
+    }
+  }
+}
+
+.main { @include trailer; }
+.content { @extend %text; }
+
+.summary {
+  color: $base1;
+  h3 { 
+    @include trailer; 
+    text-transform: uppercase; 
+  }
+  p { 
+    @include trailer; 
+    font-style: italic;
+  }
+  @include at-breakpoint($break) {
+    @include leader(3);
+  }
+}
+
+.contentinfo {
+  @include padding-leader;
+  @include padding-trailer;
+  @include text-shadow($susy-highlight-dark-10 0 1px 0);
+  background: $alt;
+  color: $base3;
+  a {
+    #{$link} {
+      color: $susy-background-dark-20;
+      font-weight: bold;
+    }
+    #{$focus} {
+      color: $base3;
+    }
+  }
+  p { @include trailer; }
+  b { font-weight: bold; }
+}

data/docs/source/stylesheets/_demos/types/_layouts.scss

@@ -0,0 +1,88 @@
+//-----------------------------------------------------------------------------
+// Expanded Container Mixin
+
+@mixin demo-container {
+  @include container;
+  background: $base2;
+  &:hover {
+    @include susy-grid-background;
+    background-color: transparent;
+  }
+}
+
+//-----------------------------------------------------------------------------
+// Magic Grid
+
+$total-columns: 12;
+$column-width: 4em;
+$gutter-width: 1em;
+$grid-padding: 1em;
+
+$container-width: false;
+$container-style: magic;
+
+.magic-container { @include demo-container; }
+
+//-----------------------------------------------------------------------------
+// Fluid Grid
+
+$total-columns: 12;
+$column-width: 60px;
+$gutter-width: 20px;
+$grid-padding: 10px;
+
+$container-width: false;
+$container-style: fluid;
+
+.fluid-container { @include demo-container; }
+
+$container-width: 60%;
+$container-style: fluid;
+
+.fluid-60-container { @include demo-container; }
+
+//-----------------------------------------------------------------------------
+// Static Grid
+
+$total-columns: 12;
+$column-width: 4em;
+$gutter-width: 1em;
+$grid-padding: 1em;
+
+$container-width: false;
+$container-style: static;
+
+.static-container { @include demo-container; }
+
+//-----------------------------------------------------------------------------
+// Mixing and Matching
+
+$total-columns: 12;
+$column-width: 60px;
+$gutter-width: 20px;
+$grid-padding: 10px;
+
+$container-style: static;
+$container-width: 1140px;
+
+.larger-960-container { @include demo-container; }
+
+$total-columns: 12;
+$column-width: 60px;
+$gutter-width: 20px;
+$grid-padding: 10px;
+
+$container-style: magic;
+$container-width: 60em;
+
+.elastic-960-container { @include demo-container; }
+
+$total-columns: 12;
+$column-width: 6%;
+$gutter-width: 2%;
+$grid-padding: 1%;
+
+$container-style: magic;
+$container-width: 50em;
+
+.elastic-percentage-container { @include demo-container; }

data/docs/source/stylesheets/_demos/types/_template.scss

@@ -0,0 +1,57 @@
+//-----------------------------------------------------------------------------
+// The Basics
+
+$total-columns: 6;
+$column-width: 4em;
+$gutter-width: 1em;
+$grid-padding: 1em;
+
+$container-width: 500px;
+
+[role="main"] {
+  @extend %type;
+  @include trailer(5);
+  h2, h3, > p, div { @include container; }
+  aside {
+    border: 1px solid $base2;
+    text-align: center;
+    b { font-weight: bold; }
+    p { @include trailer(2); }
+  }
+}
+
+//-----------------------------------------------------------------------------
+// Banner
+
+[role='banner'] {
+  @include container;
+  @include sans;
+  @include leader;
+  @include trailer;
+  font-weight: bold;
+  h1 {
+    @include adjust-font-size-to($xlargepx);
+    color: $red;
+  }
+  h2 {
+    text-transform: uppercase;
+  }
+}
+
+$total-columns: 9;
+$container-width: false;
+
+.pagenav {
+  @include container;
+  @include trailer;
+  @include sans;
+  background: $base2;
+  text-align: center;
+  ul { @include inline-block-list; }
+  a {
+    display: block;
+    padding: rhythm(.5) rhythm(1);
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+}

data/docs/source/stylesheets/_general/_century-oldstyle.scss

@@ -0,0 +1,70 @@
+// ---------------------------------------------------------------------------
+// Settings
+
+$fallback   : "Adobe Caslon Pro",Caslon,Baskerville,Palatino,"Palatino Linotype","Hoefler Text",Garamond,"URW Palladio L","Book Antiqua",Georgia,serif;
+$font-stack : "CenturyOldStyleFS", $fallback;
+$caps-stack : "CenturyOldStyleFSCaps", $fallback;
+$amp-stack  : "BaskervilleAmp", $font-stack;
+
+// ---------------------------------------------------------------------------
+// Fonts
+
+@include font-face (
+  'CenturyOldStyleFS',
+  font-files(
+    'CenturyOldStyle-Regular-webfont.woff', 'woff',
+    'CenturyOldStyle-Regular-webfont.ttf', 'truetype',
+    'CenturyOldStyle-Regular-webfont.svg#webfont', 'svg'
+  ),
+  'CenturyOldStyle-Regular-webfont.eot',
+  normal,
+  normal
+);
+
+@include font-face (
+  'CenturyOldStyleFS',
+  font-files(
+    'CenturyOldStyle-Bold-webfont.woff', 'woff',
+    'CenturyOldStyle-Bold-webfont.ttf', 'truetype',
+    'CenturyOldStyle-Bold-webfont.svg#webfont', 'svg'
+  ),
+  'CenturyOldStyle-Bold-webfont.eot',
+  bold,
+  normal
+);
+
+@include font-face (
+  'CenturyOldStyleFS',
+  font-files(
+    'CenturyOldStyle-Italic-webfont.woff', 'woff',
+    'CenturyOldStyle-Italic-webfont.ttf', 'truetype',
+    'CenturyOldStyle-Italic-webfont.svg#webfont', 'svg'
+  ),
+  'CenturyOldStyle-Italic-webfont.eot',
+  normal,
+  italic
+);
+
+@include font-face (
+  'CenturyOldStyleFSCaps',
+  font-files(
+    'CenturyOldStyleCaps-Regular-webfont.woff', 'woff',
+    'CenturyOldStyleCaps-Regular-webfont.ttf', 'truetype',
+    'CenturyOldStyleCaps-Regular-webfont.svg#webfont', 'svg'
+  ),
+  'CenturyOldStyleCaps-Regular-webfont.eot',
+  normal,
+  normal
+);
+
+@include font-face (
+  'BaskervilleAmp',
+  font-files(
+    'Baskerville-amp-webfont.woff', 'woff',
+    'Baskerville-amp-webfont.ttf', 'truetype',
+    'Baskerville-amp-webfont.svg#webfont', 'svg'
+  ),
+  'Baskerville-amp-webfont.eot',
+  normal,
+  normal
+);

data/docs/source/stylesheets/_general/_font-license.scss

@@ -0,0 +1,23 @@
+/*
+ * Web Fonts from fontspring.com
+ *
+ * All OpenType features and all extended glyphs have been removed.
+ * Fully installable fonts can be purchased at http://www.fontspring.com
+ *
+ * The fonts included in this stylesheet are subject to the End User License you purchased
+ * from Fontspring. The fonts are protected under domestic and international trademark and 
+ * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
+ * distributing this font software.
+ *
+ * (c) 2010 Fontspring
+ *
+ *
+ *
+ *
+ * The fonts included are copyrighted by the vendor listed below.
+ *
+ * Vendor:      FontSite Inc.
+ * License URL: http://www.fontspring.com/fflicense/fontsite
+ *
+ *
+ */

data/docs/source/stylesheets/_general/_fonts.scss

@@ -0,0 +1,26 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "font-license";
+@import "franklin-gothic";
+@import "century-oldstyle";
+
+//-----------------------------------------------------------------------------
+// Settings
+
+$mono-stack : Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+
+//-----------------------------------------------------------------------------
+// Mixins
+
+@mixin serif { font-family: $font-stack; }
+@mixin sans { font-family: $sans-stack; }
+@mixin cond { font-family: $cond-stack; }
+
+@mixin caps($serif: false) {
+  @if $serif {
+    font-family: $caps-stack;
+  }
+  text-transform: uppercase;
+}
+

data/docs/source/stylesheets/_general/_franklin-gothic.scss

@@ -0,0 +1,112 @@
+// ---------------------------------------------------------------------------
+// Settings
+
+$sans-stack : 'FranklinGothicFSBook', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+$cond-stack : 'FranklinGothicFSCd', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+// ---------------------------------------------------------------------------
+// Fonts
+
+// Franklin Gothic Book
+@include font-face (
+  'FranklinGothicFS',
+  font-files(
+    'FranklinGothic-Book-webfont.woff', 'woff', 
+    'FranklinGothic-Book-webfont.ttf', 'truetype', 
+    'FranklinGothic-Book-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-Book-webfont.eot',
+  $weight : normal,
+  $style  : normal 
+);
+
+// Franklin Gothic Book Italic
+@include font-face ( 
+  'FranklinGothicFS',
+  font-files(
+    'FranklinGothic-BookIt-webfont.woff', 'woff', 
+    'FranklinGothic-BookIt-webfont.ttf', 'truetype', 
+    'FranklinGothic-BookIt-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-BookIt-webfont.eot',
+  $weight : normal,
+  $style  : italic 
+);
+
+// Franklin Gothic Medium
+@include font-face ( 
+  'FranklinGothicFS',
+  font-files(
+    'FranklinGothic-Med-webfont.woff', 'woff', 
+    'FranklinGothic-Med-webfont.ttf', 'truetype', 
+    'FranklinGothic-Med-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-Med-webfont.eot',
+  $weight : bold,
+  $style  : normal 
+);
+
+// Franklin Gothic Medium Italic
+@include font-face ( 
+  'FranklinGothicFS',
+  font-files(
+    'FranklinGothic-MedIt-webfont.woff', 'woff', 
+    'FranklinGothic-MedIt-webfont.ttf', 'truetype', 
+    'FranklinGothic-MedIt-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-MedIt-webfont.eot',
+  $weight : bold,
+  $style  : italic 
+);
+
+// Franklin Gothic Condensed
+@include font-face ( 
+  'FranklinGothicFSCd',
+  font-files(
+    'FranklinGothic-Cd-webfont.woff', 'woff', 
+    'FranklinGothic-Cd-webfont.ttf', 'truetype', 
+    'FranklinGothic-Cd-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-Cd-webfont.eot',
+  $weight : normal,
+  $style  : normal 
+);
+
+// Franklin Gothic Condensed Italic
+@include font-face ( 
+  'FranklinGothicFSCd',
+  font-files(
+    'FranklinGothic-CdIt-webfont.woff', 'woff', 
+    'FranklinGothic-CdIt-webfont.ttf', 'truetype', 
+    'FranklinGothic-CdIt-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-CdIt-webfont.eot',
+  $weight : normal,
+  $style  : italic 
+);
+
+// Franklin Gothic Condensed Medium
+@include font-face ( 
+  'FranklinGothicFSCd',
+  font-files(
+    'FranklinGothic-MedCd-webfont.woff', 'woff', 
+    'FranklinGothic-MedCd-webfont.ttf', 'truetype', 
+    'FranklinGothic-MedCd-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-MedCd-webfont.eot',
+  $weight : bold,
+  $style  : normal 
+);
+
+// Franklin Gothic Condensed Medium Italic
+@include font-face ( 
+  'FranklinGothicFSCd',
+  font-files(
+    'FranklinGothic-MedCdIt-webfont.woff', 'woff', 
+    'FranklinGothic-MedCdIt-webfont.ttf', 'truetype', 
+    'FranklinGothic-MedCdIt-webfont.svg#webfont', 'svg'
+  ),
+  'FranklinGothic-MedCdIt-webfont.eot',
+  $weight : bold,
+  $style  : italic 
+);