compass 0.10.0.rc1 → 0.10.0.rc2

data/frameworks/blueprint/stylesheets/blueprint/{_scaffolding.sass → _scaffolding.scss}

@@ -1,4 +1,5 @@
-@import grid.sass
+@import "grid";
+
 // The styles contained here are meant to provide for an attractive experience out of the box
 // and are expected to be removed once custom visual design begins.
 
@@ -14,36 +15,36 @@
 //   Alternatively, you can use the +blueprint-scaffolding-body and +blueprint-scaffolding-defaults
 //   mixins to construct your own semantic style rules.
 
-=blueprint-scaffolding(!body_selector = "body")
-  #{!body_selector}
-    @if !body_selector != "body"
-      +blueprint-scaffolding-defaults
-  @if !body_selector == "body"
-    +blueprint-scaffolding-defaults
+@mixin blueprint-scaffolding($body_selector: body) {
+  #{$body_selector} {
+    @if $body_selector != "body" {
+      @include blueprint-scaffolding-defaults; } }
+  @if $body_selector == "body" {
+    @include blueprint-scaffolding-defaults; } }
 
 // The styles this mixin provides were deprecated in Blueprint 0.9 and is no longer part of the
 // main scaffolding, but the mixin is still available if you want to use it.
-=blueprint-scaffolding-body
-  margin: 1.5em 0
+@mixin blueprint-scaffolding-body {
+  margin: 1.5em 0; }
 
 // Mixin +box to create a padded box inside a column.
-=box
-  padding: 1.5em
-  margin-bottom: 1.5em
-  background: #E5ECF9
+@mixin box {
+  padding: 1.5em;
+  margin-bottom: 1.5em;
+  background: #e5ecf9; }
 
-=blueprint-scaffolding-defaults
-  .box
-    +box
+@mixin blueprint-scaffolding-defaults {
+  .box {
+    @include box; }
   // Border on right hand side of a column. You can comment this out if you don't plan to use it.
-  div.border
-    +border
+  div.border {
+    @include border; }
   // Border with more whitespace, spans one column.
-  div.colborder
-    +colborder
-  hr
-    +colruler
-  hr.space
-    +colspacer
-  form.inline
-    +blueprint-inline-form
+  div.colborder {
+    @include colborder; }
+  hr {
+    @include colruler; }
+  hr.space {
+    @include colspacer; }
+  form.inline {
+    @include blueprint-inline-form; } }

data/frameworks/blueprint/stylesheets/blueprint/_typography.scss

@@ -0,0 +1,164 @@
+@import "colors";
+@import "compass/utilities/links/link-colors";
+@import "compass/utilities/general/float";
+
+$blueprint_font_family: unquote("Helvetica Neue, Arial, Helvetica, sans-serif") !default;
+
+$blueprint_fixed_font_family: unquote("'andale mono', 'lucida console', monospace") !default;
+
+$blueprint_font_size: 12px !default;
+
+// Usage examples:
+// As a top-level mixin, apply to any page that includes the stylesheet:
+//   +blueprint-typography
+// Scoped by a presentational class:
+//   body.blueprint
+//    +blueprint-typography(true)
+// Scoped by semantic selectors:
+//   body#page-1, body#page-2, body.a-special-page-type
+//     +blueprint-typography(true)
+// Deprecated:
+//   You can pass the body selector as the first argument when used as a top-level mixin
+//   +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type")
+@mixin blueprint-typography($body_selector: body) {
+  @if $body_selector == true {
+    @include blueprint-typography-body;
+    @include blueprint-typography-defaults; }
+  @else {
+    #{$body_selector} {
+      @include blueprint-typography-body;
+      @if $body_selector != "body" {
+        @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\" to +blueprint-typography, pass true as the first argument and mix it into #{$body_selector}.";
+        @include blueprint-typography-defaults; } }
+    @if $body_selector == "body" {
+      @include blueprint-typography-defaults; } } }
+
+@mixin normal-text {
+  font-family: $blueprint_font_family;
+  color: $font_color; }
+
+@mixin fixed-width-text {
+  font: 1em $blueprint_fixed_font_family;
+  line-height: 1.5; }
+
+@mixin header-text {
+  font-weight: normal;
+  color: $header_color; }
+
+@mixin quiet {
+  color: $quiet_color; }
+
+@mixin loud {
+  color: $loud_color; }
+
+@mixin blueprint-typography-body($font_size: $blueprint_font_size) {
+  line-height: 1.5;
+  @include normal-text;
+  font-size: 100% * $font_size / 16px; }
+
+@mixin blueprint-typography-defaults {
+  h1 {
+    @include header-text;
+    font-size: 3em;
+    line-height: 1;
+    margin-bottom: 0.5em;
+    img {
+      margin: 0; } }
+  h2 {
+    @include header-text;
+    font-size: 2em;
+    margin-bottom: 0.75em; }
+  h3 {
+    @include header-text;
+    font-size: 1.5em;
+    line-height: 1;
+    margin-bottom: 1em; }
+  h4 {
+    @include header-text;
+    font-size: 1.2em;
+    line-height: 1.25;
+    margin-bottom: 1.25em; }
+  h5 {
+    @include header-text;
+    font-size: 1em;
+    font-weight: bold;
+    margin-bottom: 1.5em; }
+  h6 {
+    @include header-text;
+    font-size: 1em;
+    font-weight: bold; }
+  h2 img,  h3 img,  h4 img,  h5 img,  h6 img {
+    margin: 0; }
+  p {
+    margin: 0 0 1.5em;
+    img.left {
+      @include float-left;
+      margin: 1.5em 1.5em 1.5em 0;
+      padding: 0; }
+    img.right {
+      @include float-right;
+      margin: 1.5em 0 1.5em 1.5em;
+      padding: 0; } }
+  a {
+    text-decoration: underline;
+    @include link-colors($link_color, $link_hover_color, $link_active_color, $link_visited_color, $link_focus_color); }
+  blockquote {
+    margin: 1.5em;
+    color: #666666;
+    font-style: italic; }
+  strong {
+    font-weight: bold; }
+  em {
+    font-style: italic; }
+  dfn {
+    font-style: italic;
+    font-weight: bold; }
+  sup,  sub {
+    line-height: 0; }
+  abbr,  acronym {
+    border-bottom: 1px dotted #666666; }
+  address {
+    margin: 0 0 1.5em;
+    font-style: italic; }
+  del {
+    color: #666666; }
+  pre {
+    margin: 1.5em 0;
+    white-space: pre; }
+  pre, code, tt {
+    @include fixed-width-text; }
+  li {
+    ul, ol {
+      margin: 0; } }
+  ul, ol {
+    margin: 0 1.5em 1.5em 0;
+    padding-left: 3.333em; }
+  ul {
+    list-style-type: disc; }
+  ol {
+    list-style-type: decimal; }
+  dl {
+    margin: 0 0 1.5em 0;
+    dt {
+      font-weight: bold; } }
+  dd {
+    margin-left: 1.5em; }
+  table {
+    margin-bottom: 1.4em;
+    width: 100%; }
+  th {
+    font-weight: bold; }
+  thead th {
+    background: $blueprint_table_header_color; }
+  th, td, caption {
+    padding: 4px 10px 4px 5px; }
+  tr.even td {
+    background: $blueprint_table_stripe_color; }
+  tfoot {
+    font-style: italic; }
+  caption {
+    background: #eeeeee; }
+  .quiet {
+    @include quiet; }
+  .loud {
+    @include loud; } }

data/frameworks/blueprint/stylesheets/blueprint/_utilities.scss

@@ -0,0 +1,37 @@
+@import "compass/utilities/text/nowrap";
+@import "compass/utilities/general/float";
+
+// Most of these utility classes are not "semantic". If you use them,
+// you are mixing your content and presentation. For shame!
+
+@mixin blueprint-utilities {
+  // Regular clearing apply to column that should drop below previous ones.
+  .clear {
+    clear: both; }
+  // turn off text wrapping for the element.
+  .nowrap {
+    @include nowrap; }
+  // Apply to an element that has floated children to make the bottom
+  // of the element fall _below_ the floated children.
+  .clearfix {
+    @include clearfix; }
+  .small {
+    font-size: 0.8em;
+    margin-bottom: 1.875em;
+    line-height: 1.875em; }
+  .large {
+    font-size: 1.2em;
+    line-height: 2.5em;
+    margin-bottom: 1.25em; }
+  .first {
+    margin-left: 0;
+    padding-left: 0; }
+  .last {
+    margin-right: 0;
+    padding-right: 0; }
+  .top {
+    margin-top: 0;
+    padding-top: 0; }
+  .bottom {
+    margin-bottom: 0;
+    padding-bottom: 0; } }

data/frameworks/blueprint/templates/basic/ie.sass

@@ -0,0 +1,4 @@
+@import blueprint
+
+// Generate the blueprint IE-specific customizations:
++blueprint-ie

data/frameworks/blueprint/templates/basic/manifest.rb

@@ -0,0 +1,30 @@
+description "The blueprint framework."
+
+stylesheet 'screen.sass', :media => 'screen, projection'
+stylesheet 'partials/_base.sass'
+stylesheet 'print.sass',  :media => 'print'
+stylesheet 'ie.sass',     :media => 'screen, projection', :condition => "lt IE 8"
+
+image 'grid.png'
+
+help %Q{
+Please see the blueprint website for documentation on how blueprint works:
+
+    http://blueprintcss.org/
+
+Docs on the compass port of blueprint can be found on the wiki:
+
+    http://wiki.github.com/chriseppstein/compass/blueprint-documentation
+}
+
+welcome_message %Q{
+Please see the blueprint website for documentation on how blueprint works:
+
+    http://blueprintcss.org/
+
+Docs on the compass port of blueprint can be found on the wiki:
+
+    http://wiki.github.com/chriseppstein/compass/blueprint-documentation
+
+To get started, edit the screen.sass file and read the comments and code there.
+}

data/frameworks/blueprint/templates/basic/partials/_base.sass

@@ -0,0 +1,10 @@
+// Here is where you can define your constants for your application and to configure the blueprint framework.
+// Feel free to delete these if you want keep the defaults:
+
+!blueprint_grid_columns = 24
+!blueprint_grid_width = 30px
+!blueprint_grid_margin  = 10px
+
+// If you change your grid column dimensions
+// you can make a new grid background image from the command line like this:
+// compass grid-img 30+10x16

data/frameworks/blueprint/templates/basic/print.sass

@@ -0,0 +1,4 @@
+@import blueprint
+
+// Generate the blueprint print styles:
++blueprint-print

data/frameworks/blueprint/templates/basic/screen.sass

@@ -0,0 +1,11 @@
+// This import applies a global reset to any page that imports this stylesheet.
+@import blueprint/reset
+// To configure blueprint, edit the partials/_base.sass file.
+@import partials/base
+// Import all the default blueprint modules so that we can access their mixins.
+@import blueprint
+// Import the non-default scaffolding module.
+@import blueprint/scaffolding
+
+// Generate the blueprint framework according to your configuration:
++blueprint

data/frameworks/blueprint/templates/buttons/buttons.sass

@@ -1,5 +1,5 @@
-@import compass/utilities/general/float.sass
-@import blueprint/buttons.sass
+@import compass/utilities/general/float
+@import blueprint/buttons
 
 //
   Use the following HTML code to place the buttons on your site:

data/frameworks/blueprint/templates/link_icons/link_icons.sass

@@ -1,4 +1,4 @@
-@import blueprint/link_icons.sass
+@import blueprint/link-icons
 
 // This turns link icons on for all links. You can change the scoping selector from
 // body to something more specific if you prefer.

data/frameworks/blueprint/templates/project/ie.sass

@@ -1,4 +1,4 @@
-@import blueprint.sass
+@import blueprint
 
 // To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
 // +blueprint-ie

data/frameworks/blueprint/templates/project/print.sass

@@ -1,4 +1,4 @@
-@import blueprint.sass
+@import blueprint
 
 // To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
 // +blueprint-print

data/frameworks/blueprint/templates/project/screen.sass

@@ -1,11 +1,11 @@
 // This import applies a global reset to any page that imports this stylesheet.
-@import blueprint/reset.sass
+@import blueprint/reset
 // To configure blueprint, edit the partials/base.sass file.
-@import partials/base.sass
+@import partials/base
 // Import all the default blueprint modules so that we can access their mixins.
 @import blueprint
 // Import the non-default scaffolding module.
-@import blueprint/scaffolding.sass
+@import blueprint/scaffolding
 
 // To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
 // +blueprint
@@ -23,7 +23,7 @@ form.bp
   +blueprint-form
 
 // Page layout can be done using mixins applied to your semantic classes and IDs:
-body.three-col
+body.two-col
   #container
     +container
   #header, #footer

data/frameworks/blueprint/templates/semantic/ie.sass

@@ -0,0 +1,16 @@
+@import blueprint
+
+// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
+// +blueprint-ie
+
+//Recommended Blueprint configuration with scoping and semantic layout:
+body.bp
+  +blueprint-ie(true)
+  // Note: Blueprint centers text to fix IE6 container centering.
+  // This means all your texts will be centered under all version of IE by default.
+  // If your container does not have the .container class, don't forget to restore
+  // the correct behavior to your main container (but not the body tag!)
+  // Example:
+  // .my-container
+  //   text-align: left
+

data/frameworks/blueprint/templates/semantic/manifest.rb

@@ -0,0 +1,33 @@
+description "The blueprint framework."
+
+stylesheet 'screen.sass', :media => 'screen, projection'
+stylesheet 'partials/_base.sass'
+stylesheet 'partials/_form.sass'
+stylesheet 'partials/_page.sass'
+stylesheet 'partials/_two_col.sass'
+stylesheet 'print.sass',  :media => 'print'
+stylesheet 'ie.sass',     :media => 'screen, projection', :condition => "lt IE 8"
+
+image 'grid.png'
+
+help %Q{
+Please see the blueprint website for documentation on how blueprint works:
+
+    http://blueprintcss.org/
+
+Docs on the compass port of blueprint can be found on the wiki:
+
+    http://wiki.github.com/chriseppstein/compass/blueprint-documentation
+}
+
+welcome_message %Q{
+Please see the blueprint website for documentation on how blueprint works:
+
+    http://blueprintcss.org/
+
+Docs on the compass port of blueprint can be found on the wiki:
+
+    http://wiki.github.com/chriseppstein/compass/blueprint-documentation
+
+To get started, edit the screen.sass file and read the comments and code there.
+}