compass-susy-plugin 0.7.0.pre6 → 0.7.0.pre7

data/sass/susy/_reset.scss

@@ -0,0 +1,7 @@
+/* @group reset */
+@import "compass/reset";
+
+// HTML5 reset
+@include reset-html5;
+
+/* @end */

data/sass/susy/_susy.scss

@@ -0,0 +1,18 @@
+//** Susy **//
+
+// Tell susy whether you are using hacks or conditional comments.
+$hacks: true !default;
+
+// Import all the Important Stuff.
+@import "compass/css3";
+@import "utils";
+@import "text";
+@import "grid";
+
+// Set Susy on your BODY element to get things started.
+@mixin susy($align: center) {
+  @include establish-baseline;
+  // text-align set to center by default for auto-centering layouts
+  //  - override $align for left/right-aligned designs
+  body {
+    text-align: $align; } }

data/sass/susy/_text.scss

@@ -0,0 +1,5 @@
+//** Susy Text Settings **//
+
+@import "vertical_rhythm";
+
+$px2em: 1em / $base-font-size;

data/sass/susy/_utils.scss

@@ -0,0 +1,73 @@
+//** Susy Utilities **//
+
+// An extension of the Compass Core Utilities
+@import "compass/utilities";
+
+// Apply to you container element(s) to show a grid image.
+//  - You need to supply the image. Susy can't do everything.
+@mixin show-grid($src) {
+  background: {
+    image: image-url($src);
+    repeat: repeat;
+    position: $side-gutter-width 0; }; }
+
+// Brings IE in line with inline-block display
+//  - Using hacks if called automatically because $hacks == true
+//  - Or not, if you call it from ie.sass because $hacks == false
+@mixin ie-inline-block($hack: false) {
+  @if $hack {
+    /* ugly hacks for IE6-7 */
+    #display: inline;
+    // fixes alignment against native input/button on IE6
+    #vertical-align: auto;
+    /* end ugly hacks */ }
+  @else {
+    display: inline;
+    // fixes alignment against native input/button on IE6
+    vertical-align: auto; } }
+
+// An override for compass inline-block that lets you take advantage
+// of Susys $hacks constant. if true, hacks. if false, use ie-inline-block
+// to help ie along in your ie.sass
+@mixin inline-block {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  @if $hacks {
+    @include ie-inline-block(true); } }
+
+// An inline-block list that works in IE
+// For those awkward moments when a floated horizontal list just wont cut it
+// NOTE: If global !hacks == false:
+//  - you'll need to fix list items in ie.sass with +ie-inline-block
+@mixin inline-block-list($hpad: 0) {
+  @include horizontal-list-container;
+  li {
+    @include no-bullet;
+    @include inline-block;
+    white-space: no-wrap;
+    padding: {
+      left: $hpad;
+      right: $hpad; }; } }
+
+// Hide an element from the viewport, but keep it around for accessability
+@mixin hide {
+  position: absolute;
+  top: -9999em; }
+
+// Apply to skip-to-content accessibility links that will appear on focus.
+//  - Set the location arguments if you care where it appears.
+@mixin skip-link($t: 0, $r: false, $b: false, $l: false) {
+  @include hide;
+  display: block;
+  &:focus {
+    @if $t {
+      top: $t; }
+    @if $r {
+      right: $r; }
+    @if $b {
+      bottom: $b; }
+    @if $l {
+      left: $l; }
+    z-index: 999; } }

data/sass/susy/_vertical_rhythm.scss

@@ -0,0 +1,99 @@
+//** Vertical Rhythm **//
+// By Chris Eppstein and Eric Meyer, living here on a temporary basis
+
+// set the default border style for rhythm borders
+$default-rhythm-border-style: solid !default;
+
+// The IE font ratio is a fact of life. Deal with it.
+$ie-font-ratio: 16px / 100%;
+
+// The base line height is the basic unit of line hightness.
+$base-line-height: 18px !default;
+
+// The base font size
+$base-font-size: 12px !default;
+
+// The basic unit of font rhythm
+$base-rhythm-unit: $base-line-height / $base-font-size * 1em;
+
+// The leader is the amount of whitespace in a line.
+// It might be useful in your calculations
+$base-leader: ($base-line-height - $base-font-size) * 1em / $base-font-size;
+
+// The half-leader is the amount of whitespace above and below a line.
+// It might be useful in your calculations
+$base-half-leader: $base-leader / 2;
+
+// Establishes a font baseline for the given font-size in pixels
+@mixin establish-baseline($font-size: $base-font-size) {
+  body {
+    font-size: $font-size / $ie-font-ratio;
+    @include adjust-leading-to(1, $font-size); }
+  html>body {
+    font-size: $font-size; } }
+
+// Show a background image that can be used to debug your alignments.
+@mixin debug-vertical-alignment {
+  background: url(underline.png); }
+
+// Adjust a block to have a different font size and leading to maintain the rhythm.
+// $lines is a number that is how many times the baseline rhythm this
+// font size should use up. Does not have to be an integer, but it defaults
+// to the smallest integer that is large enough to fit the font.
+// Use $from_size to adjust from a non-base font-size.
+@mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
+  font-size: 1em * $to-size / $from-size;
+  @include adjust-leading-to($lines, $to-size); }
+
+@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
+  line-height: 1em * $lines * $base-line-height / $font-size; }
+
+// Apply leading whitespace
+@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-top: 1em * $lines * $base-line-height / $font-size; }
+
+@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, padding); }
+
+@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, margin); }
+
+// Apply trailing whitespace
+@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-bottom: 1em * $lines * $base-line-height / $font-size; }
+
+@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, padding); }
+
+@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, margin); }
+
+// Apply a border width to any side without destroying the vertical rhythm
+@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  border-#{$side}: {
+    style: $border-style;
+    width: 1em * $width / $font-size; };
+  padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width); }
+
+// Aplly rhythm borders equally to all sides
+@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  border: {
+    style: $border-style;
+    width: 1em * $width / $font-size; };
+  padding: 1em / $font-size * ($lines * $base-line-height - $width); }
+
+// Apply a leading rhythm border
+@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); }
+
+// Apply a trailing rhythm border
+@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); }
+
+// Apply both leading and trailing rhythm borders
+@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include leading-border($width, $lines, $font-size, $border-style);
+  @include trailing-border($width, $lines, $font-size, $border-style); }
+
+@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include horizontal-borders($width, $lines, $font-size, $border-style); }

data/templates/project/{_base.sass → _base.scss}

@@ -4,55 +4,54 @@
 //  Site: www.oddbird.net/susy/
 //**
 
-
 // FONT-SIZE
 // Override these values as needed (defaults are 12/18)
-!base_font_size = 16px
-!base_line_height = 24px
 
+$base-font-size: 16px;
+$base-line-height: 24px;
 
 // GRID
 // Set these values as needed for your grid layout.
 //  - defaults are shown.
-!total_cols = 12
-!col_width = 4em
-!gutter_width = 1em
-!side_gutter_width = !gutter_width
 
+$total-cols: 12;
+$col-width: 4em;
+$gutter-width: 1em;
+$side-gutter-width: $gutter-width;
 
 // OMEGA_FLOAT
 // By default, +omega elements are floated right.
 // You can override that globally here:
-// !omega_float = "right"
 
+// $omega_float: right
 
 // HACKS
 // Are you using hacks or conditional comments? Susy makes both possible.
-// Leave this as 'true' to use hacks, set it as false for conditional comments.
-// Conditional comments will require overrides for +omega, +inline-block and
-// several other mixins.
-// !hacks = true
+// Leave this as 'true' to use hacks, set it as false for conditional 
+// comments. Conditional comments will require overrides for +omega, 
+// +inline-block and several other mixins.
 
+// $hacks: true
 
 // SUSY
 // Don't move this @import above the GRID and FONT-SIZE overrides.
-@import susy/susy.sass
 
+@import "susy/susy";
 
 // COLORS
 // Set any colors you will need later.
-!base = black
-!alt = #005498
 
+$base: black;
+$alt: #005498;
 
 // FONTS
 // Give yourself some font stacks to work with.
-=sans-family
-  font-family: Helvetica, Arial, sans-serif
 
-=serif-family
-  font-family: Baskerville, Palatino, serif
+@mixin sans-family {
+  font-family: Helvetica, Arial, sans-serif; }
 
+@mixin serif-family {
+  font-family: Baskerville, Palatino, serif; }
 
 // OTHER MIXINS
 // Mixins set here will be available in defaults, screen, print and IE

data/templates/project/_defaults.scss

@@ -0,0 +1,138 @@
+//** DEFAULT STYLES **//
+// Don't forget to set your default styles.
+
+// Get all the details and mixins from base.sass
+@import "base";
+
+// Reset browser defaults, and prepare block-level HTML5 elements
+@import "susy/reset";
+
+/* @group defaults */
+
+body {
+  @include sans-family;
+  color: $base; }
+
+/* @group links */
+
+:focus {
+  outline: 1px dotted $alt; }
+
+a {
+  &:link, &:visited {
+    color: $alt; }
+  &:focus, &:hover, &:active {
+    color: $alt - #222222;
+    text-decoration: none; } }
+
+/* @end */
+
+/* @group inline tags */
+
+cite {
+  font-style: italic; }
+
+em {
+  font-style: italic; }
+
+strong {
+  font-weight: bold; }
+
+ins {
+  text-decoration: underline; }
+
+del {
+  text-decoration: line-through; }
+
+q {
+  font-style: italic;
+  em {
+    font-style: normal; } }
+
+/* @end */
+
+/* @group replaced tags */
+
+img {
+  vertical-align: bottom; }
+
+/* @end */
+
+/* @group headers */
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold; }
+
+/* @end */
+
+/* @group block tags */
+
+p {
+  @include leader;
+  @include trailer; }
+
+@mixin list-default($ol: false) {
+  @include leader;
+  @include trailer;
+  @if $ol {
+    list-style: decimal; }
+  @else {
+    list-style: disc; } }
+
+@mixin no-style-list {
+  @include no-bullets;
+  margin: 0;
+  padding: 0; }
+
+ol {
+  @include list-default(ol); }
+
+ul {
+  @include list-default; }
+
+blockquote {
+  margin: $base-rhythm-unit;
+  @include serif-family; }
+
+/* @end */
+
+/* @group tables */
+
+/* tables still need 'cellspacing="0"' in the markup */
+
+table {
+  width: 100%;
+  border: {
+    width: 0;
+    style: solid;
+    color: $base; };
+  @include horizontal-borders(1px, 0.5); }
+
+th {
+  font-weight: bold; }
+
+/* @end */
+
+/* @group forms */
+
+fieldset {
+  @include trailer; }
+
+legend {
+  font-weight: bold;
+  font-variant: small-caps; }
+
+label {
+  display: block;
+  @include leader; }
+
+legend + label {
+  margin-top: 0; }
+
+textarea, input:not([type="radio"]) {
+  @include box-sizing(border-box);
+  width: 100%; }
+
+/* @end */
+
+/* @end */

data/templates/project/ie.scss

@@ -0,0 +1,7 @@
+/* Welcome to Susy. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */
+
+@import "base";

data/templates/project/manifest.rb

@@ -1,5 +1,5 @@
-stylesheet 'screen.sass', :media => "screen, projection"
-stylesheet 'print.sass', :media => "print"
-stylesheet 'ie.sass', :media => "screen, projection"
-stylesheet '_base.sass'
-stylesheet '_defaults.sass'
+stylesheet 'screen.scss', :media => "screen, projection"
+stylesheet 'print.scss', :media => "print"
+stylesheet 'ie.scss', :media => "screen, projection"
+stylesheet '_base.scss'
+stylesheet '_defaults.scss'

data/templates/project/print.scss

@@ -0,0 +1,20 @@
+/* Welcome to Susy. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
+
+@import "defaults";
+
+@mixin print {
+  nav {
+    display: none; }
+  * {
+    float: none !important; }
+  body {
+    @include serif-family;
+    font-size: 12pt;
+    background: white;
+    color: black; }
+  a:link:after, a:visited:after {
+    content: " (" attr(href) ") "; } }
+
+@include print;