susy 1.0.9 → 2.0.0.alpha.1

data/docs/source/stylesheets/_modules/_contentinfo.scss

@@ -0,0 +1,41 @@
+//-----------------------------------------------------------------------------
+// Site Banner
+
+[role="contentinfo"] {
+  @include clearfix;
+  @include text-shadow($susy-highlight-dark-10 0 1px 0);
+  background: $susy-highlight;
+  color: $susy-background-dark-5;
+  margin: 0 0 - $grid-padding;
+  padding: rhythm(1) $grid-padding;
+  a {
+    #{$link} {
+      font-family: $caps-stack;
+      color: $susy-background-dark-20;
+    }
+    #{$focus} {
+      color: $susy-background;
+    }
+  }
+  @include at-breakpoint($break) {
+    .colophon { @include span-columns(7 omega,10); }
+    .license { @include span-columns(3,10); }
+  }
+  .caps {
+    font-family: $caps-stack;
+  }
+}
+
+.colophon {
+  p { @include trailer; }
+}
+
+.license {
+  font-family: $caps-stack;
+  text-transform: lowercase;
+  a {
+    #{$link} {
+      white-space: nowrap;
+    }
+  }
+}

data/docs/source/stylesheets/_modules/_intro.scss

@@ -0,0 +1,53 @@
+//-----------------------------------------------------------------------------
+// Intro
+
+%serif-type {
+  @include adjust-font-size-to($medpx);
+  h2 { @include adjust-font-size-to($largepx,1.5,$medpx); }
+  p { @include trailer(1,$medpx); }
+  strong { font-weight: bold; }
+  em { font-style: italic; }
+}
+
+.download {
+  @include adjust-font-size-to($medpx);
+  @include rhythm-borders(1px,.5,$medpx);
+  @include leader(-.5,$medpx);
+  @include trailer(1,$medpx);
+  @include box-sizing(border-box);
+  border-color: $susy-background-dark-20;
+  background: $susy-background-dark-10;
+  font-weight: bold;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  @include at-breakpoint($break) { @include span-columns(5 omega); }
+}
+
+.highlight {
+  color: $susy-bodycopy-dark-20;
+  font-weight: bold;
+}
+
+.intro {
+  @extend %serif-type;
+  @include trailer(1,$medpx);
+  p {
+    &:last-child { font-style: italic; }
+  }
+  @include at-breakpoint($break) { @include span-columns(5); }
+}
+
+.info {
+  p { margin: 0; }
+  strong { color: $susy-bodycopy-dark-10; }
+  @include at-breakpoint($break) { @include span-columns(5 omega); }
+}
+
+.andmore {
+  @extend %serif-type;
+  p:last-child { font-style: italic; }
+  @include at-breakpoint(50em 10) {
+    @include span-columns(5 omega,10);
+  }
+}

data/docs/source/stylesheets/_modules/_nav.scss

@@ -0,0 +1,44 @@
+//-----------------------------------------------------------------------------
+// Site Nav
+
+[role="navigation"] {
+  @include trailer(1);
+  background: $base2;
+  background: rgba($base2,.5);
+  font-style: italic;
+
+  ul { @include inline-block-list; }
+
+  a {
+    #{$link} {
+      @extend %icon;
+      display: block;
+      padding: rhythm(.25) rhythm(.5);
+      color: $susy-bodycopy;
+      &[href*='github'] { @extend %icon-github; }
+      &[href*='twitter'] { @extend %icon-twitter; }
+      &[href*='stackoverflow'] { @extend %icon-comment; }
+      &[href*='getting-started'] {
+        @extend %icon-switch;
+        .guides_getting-started &, .tutorial & { color: $susy-bodycopy-dark-10; }
+      }
+      &[href*='reference'] {
+        @extend %icon-list;
+        .guides_reference & { color: $susy-bodycopy-dark-10; }
+      }
+      &[href*='sites-using-susy'] {
+        @extend %icon-pictures;
+        .sites-using-susy & { color: $susy-bodycopy-dark-10; }
+      }
+      &[href*='demos'] {
+        @extend %icon-cog;
+        .demos & { color: $susy-bodycopy-dark-10; }
+      }
+    }
+    #{$focus} {color: $susy-highlight-dark-20; }
+  }
+
+  @include at-breakpoint($break) {
+    @include trailer(2);
+  }
+}

data/docs/source/stylesheets/_modules/_pages.scss

@@ -0,0 +1,5 @@
+//-----------------------------------------------------------------------------
+// Pages
+
+.sites-using-susy { @extend %simple; }
+.demos_index { @extend %simple; }

data/docs/source/stylesheets/_modules/_secondary.scss

@@ -0,0 +1,22 @@
+//-----------------------------------------------------------------------------
+// Secondary Content
+
+.secondary {
+  @include sans;
+
+  h2 { 
+    @extend .caps;
+    a { color: $susy-bodycopy-dark-5; }
+    ~ h2, ~ h3 { @include leader(1); }
+  }
+  h2, h3 { font-weight: bold; }
+}
+
+.version {
+  @include leader(1.25);
+  @include trailer(1.25);
+  font-family: $caps-stack;
+  color: $susy-bodycopy-dark-10;
+  text-transform: lowercase;
+  span { color: $susy-bodycopy; }
+}

data/docs/source/stylesheets/_modules/_toggle.scss

@@ -0,0 +1,40 @@
+//-----------------------------------------------------------------------------
+// Grid Toggle
+
+.grid-toggle {
+  display: none;
+  position: absolute;
+  top: .5em;
+  right: $grid-padding;
+  .target & { display: block; }
+}
+
+.on, .off {
+  a {
+    #{$link} {
+      @extend %icon-replace;
+      @extend %icon-list-2;
+      @include transition(all 300ms);
+      @include adjust-font-size-to($medpx);
+      position: relative;
+      width: rhythm(1.5,$medpx);
+      color: $susy-background-dark-20;
+    }
+    #{$focus} {
+      color: $susy-bodycopy;
+    }
+    &::before {
+      @include rotate(90deg);
+      @include stretch;
+      text-indent: 0;
+    }
+  }
+}
+.off a {
+  #{$link} {
+    display: none;
+    color: $susy-highlight;
+  }
+}
+.on a { display: block; }
+

data/docs/source/stylesheets/_vendor/pygments/solarized.scss

@@ -0,0 +1,65 @@
+.highlight { background-color: #f4f4f4; border: solid 1px #eee; }
+.c { color: #93a1a1; font-style: italic } /* Comment */
+.g { color: #d33682 } /* Generic */
+.k { color: #859900 } /* Keyword */
+.l { color: #2aa198 } /* Literal */
+.n { color: #268bd2 } /* Name */
+.cm { color: #93a1a1; font-style: italic } /* Comment.Multiline */
+.cp { color: #93a1a1; font-style: italic } /* Comment.Preproc */
+.c1 { color: #93a1a1; font-style: italic } /* Comment.Single */
+.cs { color: #93a1a1; font-style: italic } /* Comment.Special */
+.gd { color: #d33682 } /* Generic.Deleted */
+.ge { color: #d33682 } /* Generic.Emph */
+.gr { color: #d33682 } /* Generic.Error */
+.gh { color: #d33682 } /* Generic.Heading */
+.gi { color: #d33682 } /* Generic.Inserted */
+.go { color: #d33682 } /* Generic.Output */
+.gp { color: #d33682 } /* Generic.Prompt */
+.gs { color: #d33682 } /* Generic.Strong */
+.gu { color: #d33682 } /* Generic.Subheading */
+.gt { color: #d33682 } /* Generic.Traceback */
+.kc { color: #859900; font-weight: bold } /* Keyword.Constant */
+.kd { color: #859900 } /* Keyword.Declaration */
+.kn { color: #dc322f; font-weight: bold } /* Keyword.Namespace */
+.kp { color: #859900 } /* Keyword.Pseudo */
+.kr { color: #859900 } /* Keyword.Reserved */
+.kt { color: #859900; font-weight: bold } /* Keyword.Type */
+.ld { color: #2aa198 } /* Literal.Date */
+.m { color: #2aa198; font-weight: bold } /* Literal.Number */
+.s { color: #2aa198 } /* Literal.String */
+.na { color: #268bd2 } /* Name.Attribute */
+.nb { color: #cb4b16 } /* Name.Builtin */
+.nc { color: #cb4b16 } /* Name.Class */
+.no { color: #268bd2 } /* Name.Constant */
+.nd { color: #268bd2 } /* Name.Decorator */
+.ni { color: #268bd2 } /* Name.Entity */
+.ne { color: #268bd2 } /* Name.Exception */
+.nf { color: #268bd2 } /* Name.Function */
+.nl { color: #268bd2 } /* Name.Label */
+.nn { color: #268bd2 } /* Name.Namespace */
+.nx { color: #268bd2 } /* Name.Other */
+.py { color: #268bd2 } /* Name.Property */
+.nt { color: #268bd2; font-weight: bold } /* Name.Tag */
+.nv { color: #268bd2 } /* Name.Variable */
+.ow { color: #859900 } /* Operator.Word */
+.w { color: #586e75 } /* Text.Whitespace */
+.mf { color: #2aa198; font-weight: bold } /* Literal.Number.Float */
+.mh { color: #2aa198; font-weight: bold } /* Literal.Number.Hex */
+.mi { color: #2aa198; font-weight: bold } /* Literal.Number.Integer */
+.mo { color: #2aa198; font-weight: bold } /* Literal.Number.Oct */
+.sb { color: #2aa198 } /* Literal.String.Backtick */
+.sc { color: #2aa198 } /* Literal.String.Char */
+.sd { color: #2aa198 } /* Literal.String.Doc */
+.s2 { color: #2aa198 } /* Literal.String.Double */
+.se { color: #2aa198 } /* Literal.String.Escape */
+.sh { color: #2aa198 } /* Literal.String.Heredoc */
+.si { color: #2aa198 } /* Literal.String.Interpol */
+.sx { color: #2aa198 } /* Literal.String.Other */
+.sr { color: #2aa198 } /* Literal.String.Regex */
+.s1 { color: #2aa198 } /* Literal.String.Single */
+.ss { color: #2aa198 } /* Literal.String.Symbol */
+.bp { color: #cb4b16 } /* Name.Builtin.Pseudo */
+.vc { color: #268bd2 } /* Name.Variable.Class */
+.vg { color: #268bd2 } /* Name.Variable.Global */
+.vi { color: #268bd2 } /* Name.Variable.Instance */
+.il { color: #2aa198; font-weight: bold } /* Literal.Number.Integer.Long */

data/docs/source/stylesheets/grid-types.css.scss

@@ -0,0 +1,6 @@
+//-----------------------------------------------------------------------------
+// Imports
+
+@import "_demos/demo";
+@import "_demos/types/layouts";
+@import "_demos/types/template";

data/docs/source/stylesheets/magic.css.scss

@@ -0,0 +1,6 @@
+//-----------------------------------------------------------------------------
+// Imports
+
+@import "_demos/demo";
+@import "_demos/magic/layout";
+@import "_demos/magic/style";

data/docs/source/stylesheets/site.css.scss

@@ -0,0 +1,27 @@
+//-----------------------------------------------------------------------------
+// Base
+
+@import "_base/base";
+
+//-----------------------------------------------------------------------------
+// General
+
+@import "_general/root";
+@import "_general/type";
+
+//-----------------------------------------------------------------------------
+// Layout
+
+@import "layout";
+
+//-----------------------------------------------------------------------------
+// Modules
+
+@import "_modules/banner";
+@import "_modules/nav";
+@import "_modules/toggle";
+@import "_modules/ag-test";
+@import "_modules/secondary";
+@import "_modules/contentinfo";
+@import "_modules/intro";
+@import "_modules/pages";

data/lib/susy.rb

@@ -1,4 +1,15 @@
 require 'compass'
+require 'breakpoint'
 Compass::Frameworks.register('susy',
                              :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'sass'),
-                             :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
+                             :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
+
+module Sass::Script::Functions
+
+  # Convert a grid piece from strings to numbers
+  def grid_to_numbers(piece)
+    items = piece.to_s.split(' ')
+    Sass::Script::List.new(items.map{|i| Sass::Script::Number.new(i.to_f)}, :comma)
+  end
+
+end

data/sass/README.md

@@ -0,0 +1,33 @@
+SUSY NEXT
+============================
+
+## Guiding Principles
+
+Susy Next is a next-generation css layout system,
+allowing a single natural-language input API
+to create any structural output you might want.
+
+* The input API must be output-system agnostic.
+* The input API must be easy to use.
+* The output style must always be defined by the user.
+* The system must be future friendly.
+* The system must be cross-browser compatible.
+* We will not assume anything about the source HTML.
+
+## A Separation of Concerns
+
+In order to accomplish that flexibility,
+we need to split the Susy architecture into segments:
+
+1. Input Layer
+   * User facing
+   * Natural language keywords/sentence structure
+   * User facing global variables
+2. Translation Layer
+   * Translates Input into local variables to be used to calculate output
+3. Plugin API
+   * Architecture to allow for plugins. Ideally utilizing [Mixin Interpolation](https://github.com/nex3/sass/issues/626) but, until that's available, I suggest a system [similar to this](https://github.com/Snugug/sass-api-test)
+4. Output Layer
+   * Actual output of CSS
+   * Defined by individual output systems
+   * Shared components are allowed and encouraged (width calculations are going to be more or less the same, for instance)

data/sass/_susy.scss

@@ -1,16 +1,55 @@
-// ---------------------------------------------------------------------------
-// Partials
-
-// temporary
-@import "susy/support";
-@import "susy/units";
-
-// permanent
-@import "susy/settings";
-@import "susy/functions";
-@import "susy/grid";
-@import "susy/isolation";
-@import "susy/padding";
-@import "susy/margin";
-@import "susy/media";
-@import "susy/background";
+//////////////////////////////
+// Import Required Extensions
+//////////////////////////////
+@import "breakpoint";
+
+//////////////////////////////
+// Default Variables
+//////////////////////////////
+
+// The grids being used
+$grids: () !default;
+
+// The gutters of the inner columns of the grid
+$gutters: () !default;
+
+// Specifies whether or not you're building mobile-first grids. Defaults to true
+// $mobile-first: true;
+
+// Default output style.
+$output: 'float' !default;
+
+// Whether or not to include border-box or clearfix with all spans
+$include-border-box:  false !default;
+$include-clearfix:    false !default;
+$include-clear:       true  !default;
+
+//////////////////////////////
+// Import General Helpers
+//////////////////////////////
+@import "susy/helpers";
+
+//////////////////////////////
+// Import Language Helpers
+//////////////////////////////
+@import "susy/language";
+
+//////////////////////////////
+// Import Math
+//////////////////////////////
+@import "susy/math";
+
+//////////////////////////////
+// Import Grid Helpers
+//////////////////////////////
+@import "susy/grids";
+
+//////////////////////////////
+// Import Gutters Helpers
+//////////////////////////////
+@import "susy/gutters";
+
+//////////////////////////////
+// Import APIs
+//////////////////////////////
+@import "susy/api";