compass-blueprint 0.0.1

data/framework/blueprint/stylesheets/blueprint/_utilities.scss

@@ -0,0 +1,37 @@
+@import "compass/typography/text/nowrap";
+@import "compass/utilities/general/clearfix";
+
+// 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/framework/blueprint/stylesheets/blueprint/reset/_utilities.scss

@@ -0,0 +1,80 @@
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+@mixin blueprint-global-reset {
+  html { @extend %bp-reset-box-model; }
+  body { @extend %bp-reset-element; }
+  @include blueprint-nested-reset;
+}
+
+// Reset all elements within some selector scope.To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+@mixin blueprint-nested-reset {
+  div, span, object, iframe, p,
+  pre, a, abbr, acronym, address,
+  code, del, dfn, em, img,
+  dl, dt, dd, ol, ul, li, fieldset,
+  form, label, legend,
+  caption, tbody, tfoot, thead, tr { @extend %bp-reset-element;       }
+  #{headers(all)}                  { @extend %bp-reset-element;       }
+  #{elements-of-type(html5-block)} { @extend %bp-reset-html5-element; }
+  blockquote, q                    { @extend %bp-reset-quotation;     }
+  th, td, caption                  { @extend %bp-reset-table-cell;    }
+  table                            { @extend %bp-reset-table;         }
+  a img                            { @extend %bp-reset-linked-image;  }
+}
+
+@mixin blueprint-reset-html5-element {
+  @extend %bp-reset-element;
+  display: block;
+}
+
+@mixin blueprint-reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+@mixin blueprint-basic-reset {
+  @include blueprint-reset-box-model;
+  @include blueprint-reset-typography;
+}
+
+@mixin blueprint-reset-typography {
+  font: {
+    weight: inherit;
+    style: inherit;
+    size: 100%;
+    family: inherit;
+  }
+  vertical-align: baseline;
+}
+
+@mixin blueprint-reset-quotation {
+  @extend %bp-reset-element;
+  quotes: "" "";
+  &:before, &:after { content: ""; }
+}
+
+@mixin blueprint-reset-table-cell {
+  @extend %bp-reset-element;
+  float: none !important;
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+@mixin blueprint-reset-table {
+  @extend %bp-reset-element;
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle;
+}
+
+%bp-reset-box-model     { @include blueprint-reset-box-model;     }
+%bp-reset-element       { @include blueprint-basic-reset;         }
+%bp-reset-html5-element { @include blueprint-reset-html5-element; }
+%bp-reset-quotation     { @include blueprint-reset-quotation;     }
+%bp-reset-table-cell    { @include blueprint-reset-table-cell;    }
+%bp-reset-table         { @include blueprint-reset-table;         }
+%bp-reset-linked-image  { border: none;                           }

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

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

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

@@ -0,0 +1,30 @@
+description "A basic blueprint install that mimics the actual blueprint css."
+
+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/framework/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/framework/blueprint/templates/basic/print.sass

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

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

@@ -0,0 +1,12 @@
+// 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
++blueprint-scaffolding

data/framework/blueprint/templates/buttons/buttons.sass

@@ -0,0 +1,49 @@
+@import compass/utilities/general/float
+@import blueprint/buttons
+
+//
+  Use the following HTML code to place the buttons on your site:
+  
+  <button type="submit" class="button positive">
+    <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
+  </button>
+  
+  <a class="button" href="/password/reset/">
+    <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
+  </a>
+  
+  <a href="#" class="button negative">
+    <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
+  </a>
+
+a.button
+  // you can pass "left" or "right" to +anchor-button to float it in that direction
+  // or you can pass no argument to leave it inline-block (cross browser safe!) within
+  // the flow of your page.
+  +anchor-button(left)
+  // All the button color mixins take 4 optional arguments:
+  // font color, background color, border color, border highlight color
+  // the first three default to constants set in blueprint/buttons.sass
+  // the last one defaults to a shade lighter than the border color.
+  +button-colors
+  +button-hover-colors
+  +button-active-colors
+
+button
+  // The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
+  +button-button(left)
+  +button-colors
+  +button-hover-colors
+  +button-active-colors
+
+// We can change the colors for buttons of certain classes, etc.
+a.positive, button.positive
+  color: #529214
+  +button-hover-colors(#529214, #E6EFC2, #C6D880)
+  +button-active-colors(#FFF, #529214, #529214)
+
+a.negative, button.negative
+  color: #D12F19
+  +button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
+  +button-active-colors(#FFF, #D12F19, #D12F19)
+

data/framework/blueprint/templates/buttons/manifest.rb

@@ -0,0 +1,17 @@
+description "Button Plugin"
+stylesheet 'buttons.sass', :media => 'screen, projection'
+
+image 'buttons/cross.png'
+image 'buttons/key.png'
+image 'buttons/tick.png'
+
+help %Q{
+To install the button plugin:
+  compass init --using blueprint/buttons
+
+The buttons.sass file is just a recommendation to show you how to use the button mixins.  
+}
+
+welcome_message %Q{
+The buttons.sass file is just a recommendation to show you how to use the button mixins.  
+}

data/framework/blueprint/templates/link_icons/link_icons.sass

@@ -0,0 +1,13 @@
+@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.
+body
+  +link-icons
+  // Use this class if a link gets an icon when it shouldn't.
+  a.noicon
+    +no-link-icon
+  // Not all links have a url structure that can be detected,
+  // So you can set them explicitly yourself like so:
+  a#this-is-a-pdf-link
+    +link-icon("pdf.png")

data/framework/blueprint/templates/link_icons/manifest.rb

@@ -0,0 +1,23 @@
+description "Icons for common types of links"
+
+stylesheet "link_icons.sass", :media => 'screen, projection'
+
+image 'link_icons/doc.png'
+image 'link_icons/email.png'
+image 'link_icons/external.png'
+image 'link_icons/feed.png'
+image 'link_icons/im.png'
+image 'link_icons/pdf.png'
+image 'link_icons/visited.png'
+image 'link_icons/xls.png'
+
+help %Q{
+To install the link_icons plugin:
+  compass init --using blueprint/link_icons
+
+The link_icons.sass file is just a recommendation to show you how to use the link mixins.  
+}
+
+welcome_message %Q{
+The link_icons.sass file is just a recommendation to show you how to use the link mixins.  
+}

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

@@ -0,0 +1,16 @@
+@import blueprint
+
+// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
+// @include 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/framework/blueprint/templates/project/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/framework/blueprint/templates/project/partials/_base.sass

@@ -0,0 +1,11 @@
+// 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-container-size : 950px
+$blueprint-grid-margin    : 10px
+
+// Use this to calculate the width based on the total width.
+// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
+$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin
+

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

@@ -0,0 +1,8 @@
+@import blueprint
+
+// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
+// @include blueprint-print
+
+//Recommended Blueprint configuration with scoping and semantic layout:
+body.bp
+  +blueprint-print(true)

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

@@ -0,0 +1,46 @@
+// 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
+
+// To generate css equivalent to the blueprint css but with your
+// configuration applied, uncomment:
+// @include blueprint
+
+// If you are doing a lot of stylesheet concatenation, it is suggested
+// that you scope your blueprint styles, so that you can better control
+// what pages use blueprint when stylesheets are concatenated together.
+body.bp
+  +blueprint-typography(true)
+  +blueprint-utilities
+  +blueprint-debug
+  +blueprint-interaction
+  // Remove the scaffolding when you're ready to start doing visual design.
+  // Or leave it in if you're happy with how blueprint looks out-of-the-box
+form.bp
+  +blueprint-form
+  // You'll probably want to remove the scaffolding once you start styling your site.
+  +blueprint-scaffolding
+
+// Page layout can be done using mixins applied to your semantic classes and IDs:
+body.two-col
+  #container
+    +container
+  #header, #footer
+    +column($blueprint-grid-columns)
+  #sidebar
+    // One third of the grid columns, rounding down. With 24 cols, this is 8.
+    $sidebar-columns: floor($blueprint-grid-columns / 3)
+    +column($sidebar-columns)
+  #content
+    // Two thirds of the grid columns, rounding up.
+    // With 24 cols, this is 16.
+    $content-columns: ceil(2 * $blueprint-grid-columns / 3)
+    // true means it's the last column in the row
+    +column($content-columns, true)
+
+

data/framework/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
+