compass-blueprint 0.0.1

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in compass-blueprint.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Scott Davis
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# Compass::Blueprint
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'compass-blueprint'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install compass-blueprint
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"

data/compass-blueprint.gemspec

@@ -0,0 +1,18 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/compass-blueprint/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.authors       = ["Scott Davis"]
+  gem.email         = ["jetviper21@gmail.com"]
+  gem.description   = %q{Compass extension for blueprint css framework}
+  gem.summary       = %q{Blueprint for compass}
+  gem.homepage      = ""
+
+  gem.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  gem.files         = `git ls-files`.split("\n")
+  gem.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  gem.name          = "compass-blueprint"
+  gem.require_paths = ["lib"]
+  gem.version       = Compass::Blueprint::VERSION
+  gem.add_dependency 'compass'
+end

data/framework/blueprint/stylesheets/_blueprint.scss

@@ -0,0 +1,37 @@
+@import "blueprint/colors";
+@import "blueprint/grid";
+@import "blueprint/typography";
+@import "blueprint/utilities";
+@import "blueprint/form";
+@import "blueprint/interaction";
+@import "blueprint/debug";
+@import "blueprint/print";
+@import "blueprint/ie";
+
+// ### Usage examples:
+//
+// As a top-level mixin, apply to any page that includes the stylesheet:
+// <pre class="source-code sass">
+// +blueprint
+// </pre>
+//
+// Scoped by a presentational class:
+// <pre class="source-code sass">
+// body.blueprint
+//   +blueprint(true)
+// </pre>
+//
+// Scoped by semantic selectors:
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +blueprint(true)
+// </pre>
+
+@mixin blueprint($nested: false) {
+  @include blueprint-typography($nested);
+  @include blueprint-utilities;
+  @include blueprint-grid;
+  @include blueprint-debug;
+  @include blueprint-interaction;
+  @include blueprint-form;
+}

data/framework/blueprint/stylesheets/blueprint/_buttons.scss

@@ -0,0 +1,101 @@
+@import "compass/css3/inline-block";
+@import "compass/utilities/general/float";
+
+// Button Font
+$blueprint-button-font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif !default;
+
+// Default Button Colors
+$blueprint-button-border-color:     #dedede !default;
+$blueprint-button-background-color: #f5f5f5 !default;
+$blueprint-button-font-color:       #565656 !default;
+
+// Default Button Hover Colors
+$blueprint-button-hover-border-color:     #c2e1ef !default;
+$blueprint-button-hover-background-color: #dff4ff !default;
+$blueprint-button-hover-font-color:       #336699 !default;
+
+// Default Button Active Colors
+$blueprint-button-active-border-color:     #6299c5 !default;
+$blueprint-button-active-background-color: #6299c5 !default;
+$blueprint-button-active-font-color:       white !default;
+
+//**
+// Sets the colors for a button
+// @param border-highlight-color
+//   The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
+@mixin button-colors(
+  $font-color: $blueprint-button-font-color,
+  $bg-color: $blueprint-button-background-color,
+  $border-color: $blueprint-button-border-color,
+  $border-highlight-color: $border-color + #101010
+) {
+  background-color: $bg-color;
+  border-color: $border-highlight-color $border-color $border-color $border-highlight-color;
+  color: $font-color;
+}
+
+//**
+// Sets the colors for a button in the active state
+// @param border-highlight-color
+//   The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
+@mixin button-active-colors(
+  $font-color: $blueprint-button-active-font-color,
+  $bg-color: $blueprint-button-active-background-color,
+  $border-color: $blueprint-button-active-border-color,
+  $border-highlight-color: $border-color + #101010
+) {
+  &:active {
+    @include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
+  }
+}
+
+//**
+// Sets the colors for a button in the hover state.
+// @param border-highlight-color
+//   The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
+@mixin button-hover-colors(
+  $font-color: $blueprint-button-hover-font-color,
+  $bg-color: $blueprint-button-hover-background-color,
+  $border-color: $blueprint-button-hover-border-color,
+  $border-highlight-color: $border-color + #101010
+) {
+  &:hover {
+    @include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
+  }
+}
+
+@mixin button-base($float: false) {
+  @if $float { @include float($float); display: block; }
+  @else      { @include inline-block; }
+  margin: 0.7em 0.5em 0.7em 0;
+  border-width: 1px; border-style: solid;
+  font-family: $blueprint-button-font-family; font-size: 100%; line-height: 130%; font-weight: bold;
+  text-decoration: none;
+  cursor: pointer;
+  img {
+    margin: 0 3px -3px 0 !important;
+    padding: 0;
+    border: none;
+    width: 16px;
+    height: 16px;
+    float: none;
+  }
+}
+
+@mixin anchor-button($float: false) {
+  @include button-base($float);
+  padding: 5px 10px 5px 7px;
+}
+
+@mixin button-button($float: false) {
+  @include button-base($float);
+  width: auto;
+  overflow: visible;
+  padding: 4px 10px 3px 7px;
+  &[type] {
+    padding: 4px 10px 4px 7px;
+    line-height: 17px; }
+  *:first-child+html &[type] {
+    padding: 4px 10px 3px 7px;
+  }
+}

data/framework/blueprint/stylesheets/blueprint/_colors.scss

@@ -0,0 +1,36 @@
+$font-color:     #333333 !default;
+$quiet-color:    lighten($font-color, 20%) !default;
+$loud-color:     darken($font-color, 13.33%) !default;
+$header-color:   darken($font-color, 6.67%) !default;
+$alt-text-color: #666666 !default;
+$blueprint-background-color: #eeeeee !default;
+$blueprint-border-color: #ddd !default;
+
+$link-color:         #06c                  !default;
+$link-hover-color:   #09f                  !default;
+$link-focus-color:   $link-hover-color     !default;
+$link-active-color:  lighten(adjust-hue($link-color, 75deg), 10%) !default;
+$link-visited-color: darken($link-color, 10%) !default;
+
+$feedback-border-color: #dddddd !default;
+$success-color:         #264409 !default;
+$success-bg-color:      #e6efc2 !default;
+$success-border-color:  #c6d880 !default;
+$notice-color:          #514721 !default;
+$notice-bg-color:       #fff6bf !default;
+$notice-border-color:   #ffd324 !default;
+$info-color:            #205791 !default;
+$info-bg-color:         #d5edf8 !default;
+$info-border-color:     #92cae4 !default;
+$error-color:           #8a1f11 !default;
+$error-bg-color:        #fbe3e4 !default;
+$error-border-color:    #fbc2c4 !default;
+
+$highlight-color:        yellow !default;
+$added-color:             white !default;
+$added-bg-color:        #006600 !default;
+$removed-color:           white !default;
+$removed-bg-color:      #990000 !default;
+
+$blueprint-table-header-color: #c3d9ff !default;
+$blueprint-table-stripe-color: #e5ecf9 !default;

data/framework/blueprint/stylesheets/blueprint/_debug.scss

@@ -0,0 +1,28 @@
+@import "compass/layout/grid-background";
+@import "grid", "typography";
+
+// Shows a background that can be used to check grid alignment.
+// By default this is a pure css version that only works in browsers
+// that support gradients and multiple backgrounds, but you can pass
+// an image url if you prefer.
+@mixin showgrid($image: false) {
+  @if $image {
+    background: image-url($image);
+  }
+  @else {
+    @include grid-background(
+      $total    : $blueprint-grid-columns,
+      $column   : $blueprint-grid-width,
+      $gutter   : $blueprint-grid-margin,
+      $baseline : $blueprint-font-size * 1.5
+    );
+  }
+}
+
+@mixin blueprint-debug($grid-image: false) {
+  // Use this class on any column or container to see the grid.
+  // TODO: prefix this with the project path.
+  .showgrid {
+    @include showgrid($grid-image);
+  }
+}

data/framework/blueprint/stylesheets/blueprint/_fancy-type.scss

@@ -0,0 +1,88 @@
+@charset "utf-8";
+@import "typography";
+
+$alternate-text-font : "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif !default;
+
+// To install the fancy type plugin:
+//
+// 1. Import the fancy-type module: `@import "blueprint/fancy-type"`
+// 2. Mix in `fancy-type` to your project's body or at the top level of your stylesheet:<br>
+//    `body { @include fancy-type; }`
+@mixin fancy-type {
+  @include fancy-paragraphs;
+  .caps { @include caps; }
+  .dquo { @include dquo; }
+  .alt  { @include alt;  }
+}
+
+// For great looking type, use this code instead of asdf: 
+// `<span class="alt">asdf</span>`
+// Best used on prepositions and ampersands.
+
+@mixin alt {
+  color: $alt-text-color;
+  font-family: $alternate-text-font;
+  font-style: italic;
+  font-weight: normal;
+}
+
+// For great looking quote marks in titles, replace "asdf" with:
+// `<span class="dquo">&#8220;</span>asdf&#8221;`
+// (That is, when the title starts with a quote mark). 
+// Note: you may have to change this value depending on your font size.
+
+@mixin dquo($offset: 0.5em) {
+  margin-left: -$offset;
+}
+
+// Reduced size type with [incremental leading](http://www.markboulton.co.uk/journal/comments/incremental-leading/)
+//
+// This could be used for side notes. For smaller type, you don't necessarily want to 
+// follow the 1.5x vertical rhythm -- the line-height is too much. 
+//
+// Using this mixin, reduces your font size and line-height so that for 
+// every four lines of normal sized type, there is five lines of the sidenote. eg:
+//
+// Arguments:
+// * `$font-size` - The desired font size in pixels. This will be converted to ems for you. Defaults to 10px.
+// * `$base-font-size` - The base font size in pixels. Defaults to 12px
+// * `$old-line-height` - The old line height. Defaults to 1.5 times the base-font-size
+
+@mixin incr(
+  $font-size: 10px,
+  $base-font-size: $blueprint-font-size,
+  $old-line-height: $base-font-size * 1.5
+) {
+  font-size: 1em * $font-size / $base-font-size;
+  line-height: 1em * $old-line-height / $font-size * 4 / 5;
+  margin-bottom: 1.5em;
+}
+
+// Surround uppercase words and abbreviations with this class.
+// Based on work by [Jørgen Arnor Gårdsø Lom](http://twistedintellect.com/)
+
+@mixin caps {
+  font-variant: small-caps;
+  letter-spacing: 1px;
+  text-transform: lowercase;
+  font-size: 1.2em;
+  line-height: 1%;
+  font-weight: bold;
+  padding: 0 2px;
+}
+
+// This mixin is automatically included when you include `fancy-type`
+@mixin fancy-paragraphs {
+  p + p   { @include sibling-indentation; }
+  p.incr,
+  .incr p { @include incr; }
+}
+
+// Indentation instead of line shifts for sibling paragraphs. Mixin to a selector like `p + p`
+@mixin sibling-indentation {
+  text-indent: 2em;
+  margin-top: -1.5em;
+  /* Don't want this in forms. */
+  form & { text-indent: 0; }
+}
+

data/framework/blueprint/stylesheets/blueprint/_form.scss

@@ -0,0 +1,66 @@
+@import "colors";
+
+// Mixin for producing Blueprint "inline" forms. Should be used with the blueprint-form mixin.
+@mixin blueprint-inline-form {
+  line-height: 3;
+  p {
+    margin-bottom: 0;
+  }
+}
+
+@mixin blueprint-form {
+  @include blueprint-form-layout;
+  @include blueprint-form-borders;
+  @include blueprint-form-sizes;
+}
+
+@mixin blueprint-form-layout {
+  label              { font-weight: bold; }
+  fieldset           { padding: 1.4em; margin: 0 0 1.5em 0; }
+  legend             { font-weight: bold; font-size: 1.2em; }
+  input {
+    &.text,
+    &.title,
+    &[type=email],
+    &[type=text],
+    &[type=password]   { margin: 0.5em 0; background-color: white; padding: 5px; }
+    &.title            { font-size: 1.5em; }
+  }
+  textarea           { margin: 0.5em 0; padding: 5px; }
+  select             { margin: 0.5em 0; }
+}
+
+@mixin blueprint-form-sizes
+(
+  $input-width: 300px,
+  $textarea-width: 390px,
+  $textarea-height: 250px
+) {
+  input {
+    &.text,
+    &.title,
+    &[type=email],
+    &[type=text],
+    &[type=password] { width: $input-width; }
+  }
+  textarea { width: $textarea-width; height: $textarea-height; }
+}
+
+@mixin blueprint-form-borders
+(
+  $unfocused-border-color: #bbbbbb,
+  $focus-border-color: #666666,
+  $fieldset-border-color: #cccccc
+) {
+  fieldset {
+    border: 1px solid $fieldset-border-color; }
+  input.text, input.title, input[type=email], input[type=text], input[type=password],
+  textarea {
+    background-color:#fff;
+    border: 1px solid $unfocused-border-color;
+    &:focus {
+      border-color: $focus-border-color;
+    }
+  }
+  select { background-color:#fff; border-width:1px; border-style:solid; }
+}