compass-blueprint 0.0.1

data/framework/blueprint/stylesheets/blueprint/_liquid.scss

@@ -0,0 +1,152 @@
+//  --------------------------------------------------------------
+//  SASS Gridification
+//  * Author:   Geoff Garside
+//  A SASS adaptation of Blueprint CSS
+//  * Version:         0.7.1 (2008-02-25)
+//  * Website:         http://code.google.com/p/blueprintcss/
+//  Based on work by:
+//  * Chris Eppstein    [eppsteins.net]
+//  * Lorin Tacket      [lorintackett.com]
+//  * Olav Bjorkoy      [bjorkoy.com]
+//  * Nathan Borror     [playgroundblues.com]
+//  * Jeff Croft        [jeffcroft.com]
+//  * Christian Metts   [mintchaos.com]
+//  * Khoi Vinh         [subtraction.com]
+//  Liquid grid work by:
+//  * Ben Listwon
+//  * David Bedingfield
+//  * Andrei Michael Herasimchuk
+//  Involution Studios, http://www.involutionstudios.com
+//  Read more about using a grid here:
+//  * subtraction.com/archives/2007/0318-oh-yeeaahh.php
+//  -----
+//  By default, the grid is 80% of window width, with 24 columns.
+//
+//  To make the grid fixed, simply change the .container width
+//  property to a pixel value. e.g., 960px.
+//  -----
+//  To use:
+//  This module is a REPLACEMENT for the grid module. Simply import it:
+//  @import blueprint
+//  @import blueprint/liquid
+//  -------------------------------------------------------------------
+
+@import "compass/utilities/general/clearfix";
+@import "compass/utilities/general/float";
+
+// Main layout grid, override these constants to build your grid and container sizes.
+// The width shown gives the right floored percentage values.
+$blueprint-liquid-grid-columns: 24 !default;
+
+$blueprint-liquid-grid-width: 3.167% !default;
+
+$blueprint-liquid-grid-margin: 1.042% !default;
+
+// Do not edit below this line unless you really know what you're doing.
+$blueprint-liquid-container-width: 80% !default;
+
+$blueprint-liquid-container-min-width: 950px !default;
+
+$blueprint-liquid-grid-push-pull: -($blueprint-liquid-grid-margin + $blueprint-liquid-grid-width) !default;
+
+@mixin blueprint-liquid-grid {
+  // A container should group all your columns
+  .container {
+    @include container; }
+  // Use these classes (or mixins) to set the width of a column.
+  @for $n from 1 to $blueprint-liquid-grid-columns + 1 {
+    .span-#{$n} { width: span-fluid($n); }
+    div {
+      &.span-#{$n} {
+        @include column($n, $n == $blueprint-liquid-grid-columns); } } }
+  // The last column in a row needs this class (or mixin) or it will end up on the next row.
+  div.last {
+    @include last; }
+  // Add these to a column to append empty cols.
+  @for $n from 1 to $blueprint-liquid-grid-columns {
+    .append-#{$n} {
+      @include append($n); } }
+  // Add these to a column to prepend empty cols.
+  @for $n from 1 to $blueprint-liquid-grid-columns {
+    .prepend-#{$n} {
+      @include prepend($n); } }
+  // Use these classes on an element to push it into the
+  // next column, or to pull it into the previous column.
+  @for $n from 1 to $blueprint-liquid-grid-columns + 1 {
+    .pull-#{$n} {
+      @include pull($n); } }
+  @for $n from 1 to $blueprint-liquid-grid-columns + 1 {
+    .push-#{$n} {
+      @include push($n); } } }
+
+@mixin container {
+  min-width: $blueprint-liquid-container-min-width;
+  width: $blueprint-liquid-container-width;
+  margin: 0 auto;
+  @include clearfix; }
+
+// Return the width of `$n` columns in percents.
+@function span-fluid($n) {
+  @return $blueprint-liquid-grid-width * $n + $blueprint-liquid-grid-margin * ($n - 1);
+}
+
+@mixin span($n, $important: false) {
+  @warn "The span mixin is deprecated. Please use the span-fluid function instead. E.g. width: span-fluid(#{$n})";
+  $width: span-fluid($n);
+  @if $important {
+    width: $width !important; }
+  @else {
+    width: $width; } }
+
+@mixin last {
+  margin-right: 0; }
+
+@mixin column($n, $last: false) {
+  @include float-left;
+  overflow: hidden;
+  width: span-fluid($n);
+  @if $last {
+    @include last; }
+  @else {
+    margin-right: $blueprint-liquid-grid-margin; } }
+
+@mixin append($n) {
+  padding-right: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n; }
+
+@mixin prepend($n) {
+  padding-left: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n; }
+
+@mixin pull($n, $last: false) {
+  margin-left: $blueprint-liquid-grid-push-pull * $n; }
+
+@mixin push($n) {
+  @include float-right;
+  margin: {
+    top: 0;
+    left: $blueprint-liquid-grid-margin;
+    right: $blueprint-liquid-grid-push-pull * $n;
+    bottom: 0; }; }
+
+@mixin border {
+  border-right: 1px solid #eeeeee; }
+
+@mixin colborder {
+  padding-right: $blueprint-liquid-grid-margin * 2;
+  margin-right: $blueprint-liquid-grid-margin * 2;
+  @include border; }
+
+@mixin colruler {
+  background: #dddddd;
+  color: #dddddd;
+  clear: both;
+  width: 100%;
+  height: 0.083em;
+  margin: 0;
+  margin-left: $blueprint-liquid-grid-margin * 2;
+  margin-right: $blueprint-liquid-grid-margin * 2;
+  border: none; }
+
+@mixin colspacer {
+  @include colruler;
+  background: white;
+  color: white; }

data/framework/blueprint/stylesheets/blueprint/_print.scss

@@ -0,0 +1,86 @@
+@import "typography";
+@import "compass/utilities/general/float";
+
+// Usage examples:
+// As a top-level mixin, apply to any page that includes the stylesheet:
+// <pre class="source-code sass">
+// +blueprint-print
+// </pre>
+// Scoped by a presentational class:
+// <pre class="source-code sass">
+// body.blueprint
+//  +blueprint-print(true)
+// </pre>
+// Scoped by semantic selectors:
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +blueprint-print(true)
+// </pre>
+@mixin blueprint-print($nested: false) {
+  @if $nested {
+    @include blueprint-print-body;
+    @include blueprint-print-defaults;
+  } @else {
+    body { @include blueprint-print-body; }
+    @include blueprint-print-defaults;
+  }
+}
+
+// This style is in blueprint, but it can be annoying and
+// it doesn't work in all browsers.
+// Feel free to mix it into anchors where you want it.
+@mixin blueprint-show-link-urls {
+  &:after {
+    content: " (" attr(href) ")";
+    font-size: 90%; } }
+
+@mixin blueprint-print-body {
+  line-height: 1.5;
+  font-family: $blueprint-font-family;
+  color: black;
+  background: none;
+  font-size: 10pt; }
+
+@mixin blueprint-print-defaults {
+  .container {
+    background: none; }
+  hr {
+    background: #cccccc;
+    color: #cccccc;
+    width: 100%;
+    height: 2px;
+    margin: 2em 0;
+    padding: 0;
+    border: none;
+    &.space {
+      background: white;
+      color: white; } }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $blueprint-font-family; }
+  code {
+    font: {
+      size: 0.9em;
+      family: $blueprint-fixed-font-family; }; }
+  a {
+    img {
+      border: none; }
+    &:link,
+    &:visited {
+      background: transparent;
+      font-weight: 700;
+      text-decoration: underline; } }
+  p img.top {
+    margin-top: 0; }
+  blockquote {
+    margin: 1.5em;
+    padding: 1em;
+    font-style: italic;
+    font-size: 0.9em; }
+  .small {
+    font-size: 0.9em; }
+  .large {
+    font-size: 1.1em; }
+  .quiet {
+    color: #999999; }
+  .hide {
+    display: none; } }

data/framework/blueprint/stylesheets/blueprint/_reset.scss

@@ -0,0 +1,3 @@
+@import "reset/utilities";
+
+@include blueprint-global-reset;

data/framework/blueprint/stylesheets/blueprint/_rtl.scss

@@ -0,0 +1,121 @@
+@import "grid";
+@import "compass/utilities/general/float";
+
+// Main layout grid, override these constants to build your grid and container sizes.
+$blueprint-grid-columns: 24 !default;
+
+$blueprint-grid-width: 30px !default;
+
+$blueprint-grid-margin: 10px !default;
+
+$blueprint-grid-outer-width: $blueprint-grid-width + $blueprint-grid-margin;
+
+$blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin;
+
+// Columns
+// Note: If you use this mixin without the class and want to support ie6
+//       you must set text-align left on your container element in an IE stylesheet.
+@mixin container {
+  width: $blueprint-container-size;
+  margin: 0 auto;
+  direction: rtl;
+  @include clearfix; }
+
+// The last column in a row needs this mixin or it will end up on the next row.
+// TODO add this to span mixin when we have optional arguments
+@mixin last {
+  margin-left: 0; }
+
+@mixin column-base($last: false) {
+  @include float-right;
+  @if $last {
+    @include last; }
+  @else {
+    margin-left: $blueprint-grid-margin; }
+  text-align: right;
+  * html & {
+    overflow-x: hidden; } }
+
+// Mixin to a column to append n empty cols.
+@mixin append($n) {
+  padding-left: $blueprint-grid-outer-width * $n; }
+
+// Mixin to a column to prepend n empty cols.
+@mixin prepend($n) {
+  padding-right: $blueprint-grid-outer-width * $n; }
+
+// mixin to a column to move it n columns to the left
+@mixin pull($n, $last: false) {
+  position: relative;
+  @if $last {
+    margin-right: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin; }
+  @else {
+    margin-right: -$blueprint-grid-outer-width * $n; } }
+
+// mixin to a column to push it n columns to the right
+@mixin push($n) {
+  @include float-right;
+  position: relative;
+  margin: {
+    top: 0;
+    left: -$blueprint-grid-outer-width * $n;
+    bottom: 1.5em;
+    right: $blueprint-grid-outer-width * $n; }; }
+
+// Border on left hand side of a column.
+@mixin border {
+  padding-left: $blueprint-grid-margin / 2 - 1;
+  margin-left: $blueprint-grid-margin / 2;
+  border-left: 1px solid #eeeeee; }
+
+// Border with more whitespace, spans one column.
+@mixin colborder {
+  padding-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin - 1) / 2;
+  margin-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin) / 2;
+  border-left: 1px solid #eeeeee; }
+
+// Usage examples:
+// As a top-level mixin, apply to any page that includes the stylesheet:
+// <pre class="source-code sass">
+// +rtl-typography
+// </pre>
+//
+// Scoped by a presentational class:
+// <pre class="source-code sass">
+// body.blueprint
+//  +rtl-typography(true)
+// </pre>
+//
+// Scoped by semantic selectors:
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +rtl-typography(true)
+// </pre>
+@mixin rtl-typography($nested: false) {
+  @if $nested {
+    html & { font-family: Arial, sans-serif; }
+    @include rtl-typography-defaults; }
+  @else {
+    html body { font-family: Arial, sans-serif; }
+    body { @include rtl-typography-defaults; }
+  }
+}
+
+@mixin rtl-typography-defaults {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: Arial, sans-serif; }
+  pre, code, tt {
+    font-family: monospace; }
+  .right {
+    @include float-left;
+    margin: 1.5em 1.5em 1.5em 0;
+    padding: 0; }
+  .left {
+    @include float-right;
+    margin: 1.5em 0 1.5em 1.5em;
+    padding: 0; }
+  dd, ul, ol {
+    margin-left: 0;
+    margin-right: 1.5em; }
+  td, th {
+    text-align: right; } }

data/framework/blueprint/stylesheets/blueprint/_scaffolding.scss

@@ -0,0 +1,52 @@
+@import "grid";
+@import "form";
+
+// 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.
+
+// The +blueprint-scaffolding mixin must be mixed into the top level of your stylesheet.
+// However, you can customize the body selector if you wish to control the scope
+// of this mixin. Examples:
+// Apply to any page including the stylesheet:
+//   +blueprint-scaffolding
+// Scoped by a single presentational body class:
+//   +blueprint-scaffolding("body.blueprint")
+// Semantically:
+//   +blueprint-scaffolding("body#page-1, body#page-2, body.a-special-page-type")
+//   Alternatively, you can use the +blueprint-scaffolding-body and +blueprint-scaffolding-defaults
+//   mixins to construct your own semantic style rules.
+// @deprecated It is no longer necessary to pass any argument.
+@mixin blueprint-scaffolding($nested: deprecated) {
+  @if $nested != deprecated {
+    @warn "It is no longer necessary to pass any argument to the blueprint-scaffolding mixin."
+  }
+  @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.
+@mixin blueprint-scaffolding-body {
+  margin: 1.5em 0; }
+
+// Mixin +box to create a padded box inside a column.
+@mixin box {
+  padding: 1.5em;
+  margin-bottom: 1.5em;
+  background: #e5ecf9; }
+
+@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.
+  .border {
+    @include border; }
+  // Border with more whitespace, spans one column.
+  .colborder {
+    @include colborder; }
+  hr {
+    @include colruler; }
+  hr.space {
+    @include colspacer; }
+  form.inline {
+    @include blueprint-inline-form; } }

data/framework/blueprint/stylesheets/blueprint/_typography.scss

@@ -0,0 +1,90 @@
+@import "colors";
+@import "compass/typography/links/link-colors";
+@import "compass/utilities/general/float";
+
+$blueprint-font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !default;
+
+$blueprint-fixed-font-family: "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:
+// <pre class="source-code sass">
+// +blueprint-typography
+// </pre>
+//
+// Scoped by a presentational class:
+// <pre class="source-code sass">
+// body.blueprint
+//  +blueprint-typography(true)
+// </pre>
+//
+// Scoped by semantic selectors:
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +blueprint-typography(true)
+// </pre>
+@mixin blueprint-typography($nested: false) {
+  @if $nested {
+    @include blueprint-typography-body;
+    @include blueprint-typography-defaults;
+  } @else {
+    body { @include blueprint-typography-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 {
+  #{headers(all)} { @include header-text;
+    img           { margin: 0; } }
+  h1              { font-size: 3em;   line-height: 1;    margin-bottom: 0.50em; }
+  h2              { font-size: 2em;                      margin-bottom: 0.75em; }
+  h3              { font-size: 1.5em; line-height: 1;    margin-bottom: 1.00em; }
+  h4              { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
+  h5              { font-size: 1em;   font-weight: bold; margin-bottom: 1.50em; }
+  h6              { font-size: 1em;   font-weight: bold;                        }
+  p               { margin: 0 0 1.5em; 
+    .left         { @include float-left;  margin: 1.5em 1.5em 1.5em 0; padding: 0; }
+    .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: $alt-text-color; font-style: italic; }
+  strong, dfn     { font-weight: bold; }
+  em, dfn         { font-style: italic; }
+  sup, sub        { line-height: 0; }
+  abbr, acronym   { border-bottom: 1px dotted #666666; }
+  address         { margin: 0 0 1.5em; font-style: italic; }
+  del             { color: $alt-text-color; }
+  pre             { margin: 1.5em 0; white-space: pre; }
+  pre, code, tt   { @include fixed-width-text; }
+  li ul, li ol    { margin: 0; }
+  ul, ol          { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }
+  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; }
+  table.striped tr:nth-child(even) td,
+  table         tr.even            td
+                  { background: $blueprint-table-stripe-color; }
+  tfoot           { font-style: italic; }
+  caption         { background: $blueprint-background-color; }
+  .quiet          { @include quiet; }
+  .loud           { @include loud; }
+}