compass-pattern-primer 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA1: 
-  metadata.gz: 2e953748f2b5b6478452dc5e45974d6994d0b162
-  data.tar.gz: 5a49a5c7caaf1cb6fbaba27f705b81bfa47f6b4e
 SHA512: 
-  metadata.gz: 86077a730a776e1f877e1b7c8ad8c033d2cf820d030badc2b7c9955b38802ae68b4b526f40eeb0be6387003c2c943263a45e3365457facca3d8508e9cb719a97
-  data.tar.gz: 3f673cfb7ef5d5407a403dc74c27a484addf9f1d84355eb99babcd8473561b9572bca149fcd8d725ded6731fb4af908b63c1b12781af0b0b911f4fef1a8741bd
+  data.tar.gz: 49160f61ac2f67ed64c980267c6bfbfec659964374736dd98213d14d2d6fe537f9e1f5acd29641ffdc55715d525c2e89acdc75e2131a58c60b7b5d5c0a1679e0
+  metadata.gz: 168d4403d2b2ad29f59d8a332d42ed970e3055c28885b6929aa5acfbef2306a247fea188d950510a06e3d5e459eeb0eb649ec8a391ed3482ed29b79394277549
+SHA1: 
+  data.tar.gz: 8d5c5972ce42afade04267785ec90f0bd9dfd2b2
+  metadata.gz: 688c0459ba51b45c9b8e9f817b9124d7c58666c6

data/CHANGELOG.md

@@ -0,0 +1,4 @@
+* **0.1** First pass at creating compass extension and ruby gem.
+* **0.2** Created templates for building scaffolding in a compass project.
+* **0.2.1** Minor tweaks, Fixes color stack dependencies.
+* **0.2.2** Refactored bounding-box mixin. It's now 2 mixins: border-outline and margin-padding. 

data/README.md

@@ -0,0 +1,191 @@
+# Compass Pattern Primer
+### Create Style Guides in HTML and CSS with Sass & Compass
+_This is the development repo for the compass extension and rubygem: [Compass Pattern Primer](https://rubygems.org/gems/compass-pattern-primer)._
+
+Compass Pattern Primer is a system to quickly generate style guides for your web site or web app. It is based on [Pattern Primer](https://github.com/adactio/Pattern-Primer) by Adactio/Jeremy Keith. It's a collection of starter UI patterns that can be styled for any website. The pattern primer used a PHP document to pull in HTML snippets that can be styled. 
+
+I originally faithfully ported  [Pattern Primer](https://github.com/alienresident/Pattern-Primer) and Jeremy Keith's styles to Sass. Using Sass allows the styles to be quickly changing by overriding a few variables. 
+
+For my own development work I wanted to move on from Jeremy's work. I reworked the Pattern Primer to use Jonathan Snook's [SMACSS](http://smacss.com/) \(Scalable and Modular Architecture for CSS\) as an organizing principle. I separated the partials into base and modules. The styling from the original Pattern Primer is the default style. The intended way to override the original Adactio styling is to change the variables in `partials/variables/theme/_overrides` following the SMACSS paradigm. I have also changed the default Reset from Eric Meyer's to Formalize and Normalize.
+
+*This is a work in progress and any feedback is very welcome.* 
+
+## Installation
+Compass Pattern Primer is a compass extension bundled as a Ruby gem.
+   
+```bash
+gem install compass-pattern-primer
+```
+You'll need to install [Sass](http://sass-lang.com/), [Compass](http://compass-style.org/), and [Toolkit](https://github.com/Team-Sass/toolkit) Ruby Gems too. Documentation for installing and using these gems is pretty extensive. 
+
+## How to Use it
+There are a number of ways you can get started with Compass Pattern Primer
+
+#### Create a new Compass project requiring Compass Pattern Primer
+ 
+```bash
+compass create <MyProject> -r compass-pattern-primer 
+```
+This creates a new Compass project using the compass standard scaffolding and adds `require 'compass-pattern-primer'` to the `config.rb`.
+  
+#### Create a new Compass project using Compass Pattern Primer scaffolding \(SMACSS\)
+
+```bash
+compass create <MyProject> -r compass-pattern-primer --using compass-pattern-primer 
+```
+This adds a SMACSS style scaffolding to your project and creates `pattern-primer.html` a static html page where you can preview the style guide. *See: **Features to be added** at the bottom of this document for planned alternative scaffolding.* 
+
+#### Add Compass Pattern Primer to an existing project by adding the following to config.rb
+
+```ruby
+require 'compass-pattern-primer'
+```
+Then import the Compass Pattern Primer partial by adding at the top of your working file
+
+```scss
+@import "compass-pattern-primer";
+```
+**Note:** *You'll need to restart* `compass watch` *if it's running*
+
+## Features in Compass Pattern Primer
+
+Compass Pattern Primer comes with a reset, base styles, and modules \(controls, feedback, options, pagination\). You can either bring everything into your project by adding `@import "compass-pattern-primer";` to the top of your file. You can also add the individual pieces by adding some (or all) of the following: 
+
+```scss
+@import "compass-pattern-primer/reset"; 
+@import "compass-pattern-primer/base";
+@import "compass-pattern-primer/modules";
+```
+
+### Reset
+The Compass Pattern Primer Reset incorporates Normalize and Formalize libraries by default. If you don not want to include these set them to false.
+
+```scss
+$use_formalize_reset: false;
+$use_normalize_reset: false;
+```
+
+The Eric Meyer Reset is available as an option too but it's set to false by default. To change this add:
+ 
+```scss
+$use_eric_meyer_reset: true;
+```
+
+Unless you use the SMACSS style scaffolding* legacy support for older IE (6 & 7) browsers in the Normalize and Formalize libraries is set to true by default. To change this add:
+
+```scss
+$legacy-support-for-ie6: false;
+$legacy-support-for-ie7: false;
+```
+
+*In the SMACSS style scaffolding you can change what browsers you support in `partials/browsers`.
+
+If you don't want to use the Compass Pattern Primer Reset simply don't import it. You can import just the base and modules.
+
+```scss
+@import "compass-pattern-primer/base";
+@import "compass-pattern-primer/modules";
+```
+
+### Base
+The Compass Pattern Primer Base contains partials for your base styles.
+You can add them all:
+
+```scss
+@import "compass-pattern-primer/base";
+```
+Or selectively, here's the full list you can select which parts:
+
+```scss
+@import "compass-pattern-primer/base/_page";
+@import "compass-pattern-primer/base/_typography";
+@import "compass-pattern-primer/base/_links";
+@import "compass-pattern-primer/base/_forms";
+@import "compass-pattern-primer/base/_search";
+@import "compass-pattern-primer/base/_buttons";    
+```
+
+
+### Modules
+Similarly the modules allow can be imported whole or selectively. 
+
+```scss
+@import "compass-pattern-primer/modules";
+``` 
+Or 
+
+```scss
+@import "compass-pattern-primer/modules/_control";
+@import "compass-pattern-primer/modules/_feedback";
+@import "compass-pattern-primer/modules/_options";
+@import "compass-pattern-primer/modules/_pagination";  
+```
+Styles for the modules can be changed using **overrides** and extended to other elements using **extendables**. 
+
+### Changing the default styles
+The Compass Pattern Primer is designed to allow nearly everything about the CSS to be overridden. The Sass contains variables that can be changed easily overridden.
+ 
+#### Overrides 
+In the SMACSS style scaffolding you can override any of the variables in `partials/variables/theme/_overrides`. It contains some example variables that are commented out.
+
+
+#### Extendables
+Styles for the buttons, controls, options, and pagination are silent extendables. The extendables are in `partials/extendables`. This allows you to easily add a the button styles to another element.
+
+In this example I am extending an `input` with the `id="reset"` to `%button-active` style.
+
+```scss
+input#reset {
+	@extend %button-active; 
+}
+``` 
+#### Colors 
+Custom color guides can generated by altering the `$primary-color` variable in `partials/colors`. If you want to see this in action, the best option is to build a project using the SMACSS scaffolding. Color guides are created using [Color Schemer](https://github.com/Team-Sass/color-schemer) and can be viewed on the `pattern-primer.html` page.
+
+Color Schemer is feature rich and allows you to generate color schemes using color theory schemes: mono, complement, triad, tetrad, analogic, accented-analogic. See [Color Schemer](https://github.com/Team-Sass/color-schemer) for more info. 
+
+The colors also take advantage of `tint-stack` and `shade-stack` to generate 6 (by default but can be extended) tints (mixed with white) or shades (mixed with black) of your colors. Documentation for these functions can be found in [Toolkit](https://github.com/Team-Sass/toolkit).
+
+```scss
+$primary-color:  #57068c;
+$black-value: #333; 
+```
+
+```scss
+$black:     tint-stack($black-value);
+$primary:   tint-stack(cs-primary());
+$secondary: tint-stack(cs-secondary());
+$tertiary:  tint-stack(cs-tertiary());
+$quadrary:  tint-stack(cs-quadrary());  
+```
+
+The advantage of this is you can design your site using `tint-stack` variables. You can then easily adjust your colors by simply altering the `$primary-color` variable.
+
+```scss
+$link-color: nth($primary, 1); 
+$link-visited-link-color: nth($primary, 2);
+```  
+
+## Features to be added
+#### More scaffolding options.
+At the moment there's only one option to use my SMACSS scaffolding and a static html preview page. This works for some use cases but doesn't allow you to easily add patterns. 
+
+I intend to allow a scaffolding option that includes the original patterns and `index.php` file from Jeremy Keith's [Pattern Primer](https://github.com/adactio/Pattern-Primer) repo. 
+
+Another option could be to create a very basic scaffolding that doesn't use the SMACSS approach. So that you can use you own.
+
+#### Use existing Compass Reset gems
+I realized after the fact that all my reset's existed as compass gems. Doesn't seem like a good idea to duplicate code.  
+- [Meyer Reset](https://github.com/adamstac/meyer-reset)  
+- [Compass Normalize](https://github.com/ksmandersen/compass-normalize)  
+- [Compass Formalize](https://github.com/pengwynn/compass_formalize)  
+
+
+
+#### ~~Simplify `bounding-box` mixin~~ DONE
+~~At the moment `bounding-box` mixin handles `margin`, `padding`, and `border` styles. I am going to change this to just `margin` and `padding` and create a new mixing to handle `border` and expanded it to support `outline` as the have similar CSS output.~~  
+Refactored `bounding-box` mixin (v0.2.2). It's now 2 mixins: `border-outline` and `margin-padding`. They handle borders and outlines, and margins and paddings. With the refactoring I was able to remove all `$*-border-pos` variables. The position of borders is handled through `$*-border-width` which takes up to 4 arguments in the following  clockwise order TRBL \(Top Right Bottom Left \). Similarly `$*-border-style` and `$*-border-color` can take up to 4 arguments. Outline ignores all but the 1st argument and can take an offset argument. There's an error check mixin `border-outline-check` that displays warnings if you add too many arguments of try to offset the border. 
+
+
+##### Requests? Feedback?
+Contact [me](mailto:mark@alienresident.net) or simply file an [issue](https://github.com/alienresident/compass-pattern-primer/issues/new)!

data/lib/compass-pattern-primer.rb

@@ -3,7 +3,7 @@
 # By default, you should always included Compass. Do not include your
 #  extension.
 require 'compass'
-require 'toolkit' 
+require 'toolkit'
 
 # This tells Compass what your Compass extension is called, and where to find
 #  its files
@@ -18,8 +18,8 @@ Compass::Frameworks.register('compass-pattern-primer', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Compass_Pattern_Primer
-  VERSION = "0.2.1"
-  DATE = "2013-05-29"
+  VERSION = "0.2.2"
+  DATE = "2013-07-02"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/compass-pattern-primer/base/_forms.scss

@@ -8,8 +8,8 @@ select {
   width: 100%;
   font-family: inherit;
   font-size: inherit;
-  @include bounding-box(padding, $forms-padding);
-  @include bounding-box(border, false, $forms-border-pos, $forms-border-width, $forms-border-style, $forms-border-color);
+  @include margin-padding(padding, $forms-padding);
+  @include border-outline(border, $forms-border-width, $forms-border-style, $forms-border-color);
   @include border-radius($forms-border-radius);
   &:focus {
     border-color: $forms-focus-border-color;

data/stylesheets/compass-pattern-primer/base/_links.scss

@@ -1,24 +1,24 @@
 a {
   color: $link-color;
   text-decoration: $link-text-decoration;
-  @include bounding-box(border, false, $link-border-pos, $link-border-width, $link-border-style, $link-border-color);
+  @include border-outline(border, $link-border-width, $link-border-style, $link-border-color);
   &:link,
   &:visited {
     color: $link-visited-link-color;
-    @include bounding-box(border, false, $link-visited-border-pos, $link-visited-border-width, $link-visited-border-style, $link-visited-border-color);
+    @include border-outline(border, $link-visited-border-width, $link-visited-border-style, $link-visited-border-color);
   }
   &[href]:hover,
   &[href]:focus {
     color: $link-hover-link-color;
     text-decoration: $link-hover-text-decoration;
-    @include bounding-box(border, false, $link-hover-border-pos, $link-hover-border-width, $link-hover-border-style, $link-hover-border-color);
+    @include border-outline(border, $link-hover-border-width, $link-hover-border-style, $link-hover-border-color);
   }
   &:active {
     color: $link-active-link-color;
-    @include bounding-box(border, false, $link-active-border-pos, $link-active-border-width, $link-active-border-style, $link-active-border-color);
+    @include border-outline(border, $link-active-border-width, $link-active-border-style, $link-active-border-color);
   } 
   .logo &, h1 &, h2 &, h3 & {
     color: $headers-link-color;
-    @include bounding-box(border, false, $logo-headers-border-pos, $logo-headers-border-width, $logo-headers-border-style, $logo-headers-border-color);
+    @include border-outline(border, $logo-headers-border-width, $logo-headers-border-style, $logo-headers-border-color);
   }
 }

data/stylesheets/compass-pattern-primer/base/_page.scss

@@ -1,16 +1,15 @@
 html {
-  @include bounding-box(border, false, $html-border-pos, $html-border-width, $html-border-style, $html-border-color);
+  @include border-outline(border, $html-border-width, $html-border-style, $html-border-color);
   background-color: $html-background-color;
 }
 body {
   background-color: $body-background-color;
   background: $body-background-rgba;
-  @include bounding-box(margin, $body-margin);
-  @include bounding-box(padding, $body-padding);
+  @include margin-padding(margin, $body-margin);
+  @include margin-padding(padding, $body-padding);
   @include type-size($body-font-size, $body-line-height);
   font-family: $body-font-family;
   color: $body-color;
-  @include bounding-box(border, false, $body-border-pos, $body-border-width, $body-border-style, $body-border-color);
-  @include bounding-box(border, false, $body-border-pos2, $body-border-width2, $body-border-style2, $body-border-color2);
+  @include border-outline(border, $body-border-width, $body-border-style, $body-border-color);
   border-color: $body-border-color-rgba;
 }

data/stylesheets/compass-pattern-primer/base/_search.scss

@@ -1,11 +1,11 @@
 [role="search"] {
   position: relative;
   background-color: $search-background-color;
-  @include bounding-box(border, false, $search-border-pos, $search-border-width, $search-border-style, $search-border-color);
-  @include bounding-box(padding, $search-padding);
+  @include border-outline(border, $search-border-width, $search-border-style, $search-border-color);
+  @include margin-padding(padding, $search-padding);
   @include border-radius($search-border-radius);
   input[type="search"], input {
-    @include bounding-box(border, false, $search-input-border-pos, $search-input-border-width, $search-input-border-style, $search-input-border-color);
+    @include border-outline(border, $search-input-border-width, $search-input-border-style, $search-input-border-color);
     @include border-radius($search-input-border-radius);
   }
   input[type="image"] {
@@ -14,6 +14,6 @@
     width: $search-image-width;
     top: $search-image-top;
     right: $search-image-right;
-    @include bounding-box(padding, $search-image-padding);
+    @include margin-padding(padding, $search-image-padding);
   }
 }                                

data/stylesheets/compass-pattern-primer/base/_typography.scss

@@ -2,54 +2,55 @@ h1 {
   font-family: $header-font-family;
   @include bold-italic-uppercase-variant($h1-font-bold, $h1-font-italic, $h1-font-uppercase, $h1-font-variant);
   @include type-size($h1-font-size, $h1-line-height);
-  @include bounding-box(padding, $h1-padding, $h1-padding-pos);
-  @include bounding-box(margin, $h1-margin, $h1-margin-pos);
+  @include margin-padding(padding, $h1-padding, $h1-padding-pos);
+  @include margin-padding(margin, $h1-margin, $h1-margin-pos);
   color: $h1-color;
-  @include bounding-box(border, false, $h1-border-pos, $h1-border-width, $h1-border-style, $h1-border-color);
+  @include border-outline(border, $h1-border-width, $h1-border-style, $h1-border-color);
 }
 h2 {
   font-family: $header-font-family;
   @include bold-italic-uppercase-variant($h2-font-bold, $h2-font-italic, $h2-font-uppercase, $h2-font-variant);
   @include type-size($h2-font-size, $h2-line-height);
-  @include bounding-box(padding, $h2-padding, $h2-padding-pos);
-  @include bounding-box(margin, $h2-margin, $h2-margin-pos);
+  @include margin-padding(padding, $h2-padding, $h2-padding-pos);
+  @include margin-padding(margin, $h2-margin, $h2-margin-pos);
   color: $h2-color;
-  @include bounding-box(border, false, $h2-border-pos, $h2-border-width, $h2-border-style, $h2-border-color);
+  @include border-outline(border, $h2-border-width, $h2-border-style, $h2-border-color);
 }
 h3 {
   font-family: $header-font-family;
   @include bold-italic-uppercase-variant($h3-font-bold, $h3-font-italic, $h3-font-uppercase, $h3-font-variant);
   @include type-size($h3-font-size, $h3-line-height);
-  @include bounding-box(padding, $h3-padding, $h3-padding-pos);
-  @include bounding-box(margin, $h3-margin, $h3-margin-pos);
+  @include margin-padding(padding, $h3-padding, $h3-padding-pos);
+  @include margin-padding(margin, $h3-margin, $h3-margin-pos);
   color: $h3-color;
-  @include bounding-box(border, false, $h3-border-pos, $h3-border-width, $h3-border-style, $h3-border-color);
+  @include border-outline(border, $h3-border-width, $h3-border-style, $h3-border-color);
 }
 h4 {
   font-family: $header-font-family;
   @include bold-italic-uppercase-variant($h4-font-bold, $h4-font-italic, $h4-font-uppercase, $h4-font-variant);
   @include type-size($h4-font-size, $h4-line-height);
-  @include bounding-box(padding, $h4-padding, $h4-padding-pos);
-  @include bounding-box(margin, $h4-margin, $h4-margin-pos);
+  @include margin-padding(padding, $h4-padding, $h4-padding-pos);
+  @include margin-padding(margin, $h4-margin, $h4-margin-pos);
   color: $h4-color;
-  @include bounding-box(border, false, $h4-border-pos, $h4-border-width, $h4-border-style, $h4-border-color);
+  @include border-outline(border, $h4-border-width, $h4-border-style, $h4-border-color);
 }
 h5 {
   font-family: $header-font-family;
   @include bold-italic-uppercase-variant($h5-font-bold, $h5-font-italic, $h5-font-uppercase, $h5-font-variant);
   @include type-size($h5-font-size, $h5-line-height);
-  @include bounding-box(padding, $h5-padding, $h5-padding-pos);
-  @include bounding-box(margin, $h5-margin, $h5-margin-pos);
+  @include margin-padding(padding, $h5-padding, $h5-padding-pos);
+  @include margin-padding(margin, $h5-margin, $h5-margin-pos);
   color: $h5-color;
-  @include bounding-box(border, false, $h5-border-pos, $h5-border-width, $h5-border-style, $h5-border-color);
+  @include border-outline(border, $h5-border-width, $h5-border-style, $h5-border-color);
 }
 h6 {
+  font-family: $header-font-family;
   @include bold-italic-uppercase-variant($h6-font-bold, $h6-font-italic, $h6-font-uppercase, $h6-font-variant);
   @include type-size($h6-font-size, $h6-line-height);
-  @include bounding-box(padding, $h6-padding, $h6-padding-pos);
-  @include bounding-box(margin, $h6-margin, $h6-margin-pos);
+  @include margin-padding(padding, $h6-padding, $h6-padding-pos);
+  @include margin-padding(margin, $h6-margin, $h6-margin-pos);
   color: $h6-color;
-  @include bounding-box(border, false, $h6-border-pos, $h6-border-width, $h6-border-style, $h6-border-color);
+  @include border-outline(border, $h6-border-width, $h6-border-style, $h6-border-color);
 }
 b, strong {
   font-weight: bold;
@@ -58,24 +59,23 @@ i, em {
   font-style: italic;
 }
 hr {
-  @include bounding-box(border, false, $hr-border-pos, $hr-border-width, $hr-border-style, $hr-border-color);
+  @include border-outline(border, $hr-border-width, $hr-border-style, $hr-border-color);
   height: $hr-height;
   background: $hr-background;
   background-color: $hr-background-rgba;
 }
 p, ul, ol, hr, table, form, fieldset {
-  @include bounding-box(margin, $element-margin);
+  @include margin-padding(margin, $element-margin);
 }
 li {
   list-style-position: $li-list-style-position;
-  @include bounding-box(margin, $li-margin, $li-margin-pos);
+  @include margin-padding(margin, $li-margin, $li-margin-pos);
   text-indent: $li-text-indent;
 }
 blockquote {
-  @include bounding-box(margin, $blockquote-margin);
-  @include bounding-box(border, false, $blockquote-border-pos, $blockquote-border-width, $blockquote-border-style, $blockquote-border-color);
-  @include bounding-box(border, false, $blockquote-border-pos2, $blockquote-border-width2, $blockquote-border-style2, $blockquote-border-color2);
-  @include bounding-box(padding, $blockquote-padding);
+  @include margin-padding(margin, $blockquote-margin);
+  @include border-outline(border, $blockquote-border-width, $blockquote-border-style, $blockquote-border-color);
+  @include margin-padding(padding, $blockquote-padding);
   font-family: $blockquote-font-family;
   @include bold-italic-uppercase-variant($blockquote-font-bold, $blockquote-font-italic, $blockquote-font-uppercase, $blockquote-font-variant);
   @include type-size($blockquote-font-size, $blockquote-line-height);
@@ -97,7 +97,7 @@ article > p,
 article section > p {
   @include type-size($article-font-size, $article-line-height);
   word-spacing: $article-word-spacing;
-  @include bounding-box(margin, $article-margin);
+  @include margin-padding(margin, $article-margin);
 /*  Does this improve the reading experience?
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
@@ -115,9 +115,9 @@ h1+p:first-letter {
   @include bold-italic-uppercase-variant($article-fl-font-bold, $article-fl-font-italic, $article-fl-font-uppercase, $article-fl-font-variant);
   @include type-size($article-fl-font-size, $article-fl-line-height);
   letter-spacing: $article-fl-letter-spacing;
-  @include bounding-box(margin, $article-fl-margin, $article-fl-margin-pos);
+  @include margin-padding(margin, $article-fl-margin, $article-fl-margin-pos);
   color: $article-fl-color;
-  @include bounding-box(border, false, $article-fl-border-pos, $article-fl-border-width, $article-fl-border-style, $article-fl-border-color);
+  @include border-outline(border, $article-fl-border-width, $article-fl-border-style, $article-fl-border-color);
 }
 time {
   display: $time-display;
@@ -132,9 +132,9 @@ time {
 
 pre {
   @extend %force-wrap;
-  @include bounding-box(margin, $pre-margin, $pre-margin-pos);
-  @include bounding-box(padding, $pre-padding);
-  @include bounding-box(border, false, $pre-border-pos, $pre-border-width, $pre-border-style, $pre-border-color);
+  @include margin-padding(margin, $pre-margin, $pre-margin-pos);
+  @include margin-padding(padding, $pre-padding);
+  @include border-outline(border, $pre-border-width, $pre-border-style, $pre-border-color);
   @include border-radius($pre-border-radius);
   font-family: $pre-font-family;
   @include type-size($pre-font-size, $pre-line-height);

data/stylesheets/compass-pattern-primer/partials/_extendables.scss

@@ -17,9 +17,9 @@
   font-size: inherit;
   font-weight: normal;
   font-style: normal;
-  @include bounding-box(border, false, $button-border-pos, $button-border-width, $button-border-style, $button-border-color);
+  @include border-outline(border, $button-border-width, $button-border-style, $button-border-color);
   cursor: pointer;
-  @include bounding-box(padding, $button-padding);
+  @include margin-padding(padding, $button-padding);
   line-height: 1;
   @include border-radius($button-border-radius);
 }
@@ -85,9 +85,9 @@
   font-family: $controls-font-family;
   display: inline-block;
   font-size: $controls-font-size;
-  @include bounding-box(padding, $controls-padding);
+  @include margin-padding(padding, $controls-padding);
   line-height: 1;
-  @include bounding-box(border, false, $controls-border-pos, $controls-border-width, $controls-border-style, $controls-border-color);
+  @include border-outline(border, $controls-border-width, $controls-border-style, $controls-border-color);
   @include border-radius($controls-border-radius);
   background-clip: padding-box;
   &:link,
@@ -105,11 +105,11 @@
 }
 
 %feedback {
-  @include bounding-box(padding, $feedback-padding);
-  @include bounding-box(margin, $feedback-margin);
+  @include margin-padding(padding, $feedback-padding);
+  @include margin-padding(margin, $feedback-margin);
   color: $feedback-color;
   background-color: $feedback-background;
-  @include bounding-box(border, false, $feedback-border-pos, $feedback-border-width, $feedback-border-style, $feedback-border-color);
+  @include border-outline(border, $feedback-border-width, $feedback-border-style, $feedback-border-color);
   @include border-radius($feedback-border-radius);
   background-clip: padding-box;
   a {
@@ -138,20 +138,20 @@
 
 %options {
   list-style: $options-list-style;
-  @include bounding-box(border, false, $options-border-pos, $options-border-width, $options-border-style, $options-border-color);
+  @include border-outline(border, $options-border-width, $options-border-style, $options-border-color);
   li {
     text-indent: $options-li-text-indent;
     font-family: $options-li-font-family;
     text-transform: $options-li-text-transform;
     letter-spacing: $options-li-letter-spacing;
     font-weight: $options-li-font-weight;
-    @include bounding-box(margin, $options-li-margin);
-    @include bounding-box(padding, $options-li-padding);
-    @include bounding-box(border, false, $options-li-border-pos, $options-li-border-width, $options-li-border-style, $options-li-border-color);
+    @include margin-padding(margin, $options-li-margin);
+    @include margin-padding(padding, $options-li-padding);
+    @include border-outline(border, $options-li-border-width, $options-li-border-style, $options-li-border-color);
   }
   a {
     display: block;
-    @include bounding-box(border, false, $options-a-border-pos, $options-a-border-width, $options-a-border-style, $options-a-border-color);
+    @include border-outline(border, $options-a-border-width, $options-a-border-style, $options-a-border-color);
   }
 }
 
@@ -159,15 +159,15 @@
   font-family: $pagination-font-family;
   li {
     display: $pagination-li-display;
-    @include bounding-box(margin, $pagination-li-margin, $pagination-li-margin-pos);
+    @include margin-padding(margin, $pagination-li-margin, $pagination-li-margin-pos);
     text-indent: $pagination-text-indent;
   }
   a {
     display: $pagination-a-display;
-    @include bounding-box(padding, $pagination-a-padding);
+    @include margin-padding(padding, $pagination-a-padding);
     line-height: $pagination-a-line-height;
-    @include bounding-box(margin, $pagination-a-margin);
-    @include bounding-box(border, false, $pagination-a-border-pos, $pagination-a-border-width, $pagination-a-border-style, $pagination-a-border-color);
+    @include margin-padding(margin, $pagination-a-margin);
+    @include border-outline(border, $pagination-a-border-width, $pagination-a-border-style, $pagination-a-border-color);
     @include border-radius($pagination-a-border-radius);
     background-clip: padding-box;
     &:link,

data/stylesheets/compass-pattern-primer/partials/_mixins.scss

@@ -1,18 +1,45 @@
-@mixin simple-background-gradient($button-color, $background-gradient-pos, $background-gradient-1, $background-gradient-2) {
-  color: $button-color;
+@mixin simple-background-gradient($color, $background-gradient-pos, $background-gradient-1, $background-gradient-2) {
+  color: $color;
   // provide background color for older IEs
   background-color: background-color-mix($background-gradient-1, $background-gradient-2);
   @include background-image(linear-gradient($background-gradient-pos, $background-gradient-1, $background-gradient-2));
 }
 
-@mixin bounding-box($type, $amount: false, $side: false, $color: false, $style: false, $width: false) {
-  @if $type == 'border' and $side == none {
-    #{$type}: $side;
-  } @else if $type == 'border' and $side {
-    #{$type}-#{$side}: $color $style $width;
-  } @else if $type == 'border' {
-    #{$type}: $color $style $width;
-  } @else  if $side {
+@mixin border-outline($type: border, $width: 1px, $style: solid, $color: #333, $offset: false) {
+  @include border-outline-check($type, $width, $style, $color, $offset);
+  
+  @if $width == 'none' {
+      #{$type}: $width;
+  } @else if $width == false {
+  } @else {
+    #{$type}: {
+      width: $width;
+      style: $style;
+      color: $color;
+      @if $type == 'outline' and $offset {
+        offset: $offset;
+      }
+    }
+  }
+}
+
+@mixin border-outline-check($type, $width, $style, $color, $offset) {
+  @if $type == 'border' and $offset {
+    @warn "#{$type} does not use offset";
+  }
+  @if $type == 'outline' { // wish this was cleaner! there's probably a better way to do this.
+    $widths: length($width);
+    $styles: length($style);
+    $colors: length($color);
+    $offsets: length($offset);
+    @if $widths > 1 or $styles > 1 or $colors > 1 or $offsets > 1   {
+       @warn "You cannot use mulitple values for #{$type} - only the first value will be used!";
+    }
+  }  
+}
+
+@mixin margin-padding($type, $amount: false, $side: false) {
+  @if $side {
     #{$type}-#{$side}: $amount;
   } @else {
     #{$type}: $amount;
@@ -132,7 +159,7 @@
   @if $lightness < 50% {
     $color: white;
   }
-
+  
   &:before, &:after {
     color: $color;
   }

data/stylesheets/compass-pattern-primer/partials/variables/base/_buttons.scss

@@ -1,8 +1,7 @@
 /// Buttons
 $button-font-family: $secondary-font !default;
 $button-padding: 0.5em 1em !default;
-$button-border-pos: false !default; 
-$button-border-width: 1px !default; 
+$button-border-width: false !default; 
 $button-border-style: solid !default;
 $button-border-color: #666 !default;
 $button-border-radius: 1em !default;

data/stylesheets/compass-pattern-primer/partials/variables/base/_forms.scss

@@ -1,8 +1,7 @@
 // Forms _forms.scss
 $forms-background-color: #fff !default;
-$forms-padding: 0.125em !default;
-$forms-border-pos: false !default; 
-$forms-border-width: 1px !default; 
+$forms-padding: 0.125em !default; 
+$forms-border-width: false !default; 
 $forms-border-style: solid !default;
 $forms-border-color: #ccc !default;
 $forms-border-radius: 0.25em !default;

data/stylesheets/compass-pattern-primer/partials/variables/base/_links.scss

@@ -1,31 +1,26 @@
 $link-color: #369 !default;
 $link-text-decoration: none !default;
-$link-border-pos: bottom !default;
-$link-border-width: 1px !default;
+$link-border-width: 0 0 1px 0 !default;
 $link-border-style: dotted !default;
 $link-border-color: $link-color !default;
 /// Visited
 $link-visited-link-color: $link-color !default;
-$link-visited-border-pos: $link-border-pos !default;
 $link-visited-border-width: $link-border-width !default;
 $link-visited-border-style: $link-border-style !default;
 $link-visited-border-color: $link-border-color !default;
 /// Hover
 $link-hover-text-decoration: underline !default;
 $link-hover-link-color: #c03 !default;
-$link-hover-border-pos: $link-border-pos !default;
 $link-hover-border-width: $link-border-width !default;
 $link-hover-border-style: $link-border-style !default;
 $link-hover-border-color: $link-hover-link-color !default;
 /// Active
 $link-active-link-color: #900 !default;
-$link-active-border-pos: $link-border-pos !default;
 $link-active-border-width: $link-border-width !default;
 $link-active-border-style: $link-border-style !default;
 $link-active-border-color: $link-active-link-color !default;
 /// Logo and Headers
 $headers-link-color: $link-color !default;
-$logo-headers-border-pos: none !default;
-$logo-headers-border-width: 0 !default;
+$logo-headers-border-width: false !default;
 $logo-headers-border-style: $link-border-style !default;
 $logo-headers-border-color: $link-active-link-color !default;

data/stylesheets/compass-pattern-primer/partials/variables/base/_page.scss

@@ -1,12 +1,11 @@
-/// html
-$html-border-pos: top !default;
 // Typography _typography.scss
 $body-font-family: Palatino, Cambria, Georgia, serif !default;
 $secondary-font: Calibri, 'Helvetica Neue', Arial, sans-serif !default;
 $header-font-family: $body-font-family !default;
 $monospaced-font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace !default;
 
-$html-border-width: 0.5em !default;
+/// html
+$html-border-width: 0.5em 0 0 0 !default;
 $html-border-style: solid !default;
 $html-border-color: #693 !default;
 $html-background-color: #eee !default;
@@ -19,12 +18,7 @@ $body-padding: 0 2.5% !default;
 $body-font-size: 100% !default;
 $body-line-height: 1.875em !default;
 $body-color: #333 !default;
-$body-border-pos: left !default;
-$body-border-width: 1px !default;
+$body-border-width: 0 1px 0 1px !default;
 $body-border-style: solid !default;
 $body-border-color: #ddd !default;
-$body-border-pos2: right !default;
-$body-border-width2: $body-border-width !default;
-$body-border-style2: $body-border-style !default;
-$body-border-color2: $body-border-color !default;
 $body-border-color-rgba: rgba(0,0,0,0.13) !default;

data/stylesheets/compass-pattern-primer/partials/variables/base/_search.scss

@@ -2,13 +2,11 @@
 $search-border-radius: 1em !default;
 $search-background-color: #fff !default;
 $search-padding: 0 0.75em !default;
-$search-border-pos: false !default; 
-$search-border-width: 1px !default; 
+$search-border-width: false !default; 
 $search-border-style: solid !default;
 $search-border-color: #ccc !default;
 //// Search Input
-$search-input-border-pos: none !default; 
-$search-input-border-width: 0 !default; 
+$search-input-border-width: false !default; 
 $search-input-border-style: solid !default;
 $search-input-border-color: #ccc !default;
 $search-input-border-radius: 0 !default;

data/stylesheets/compass-pattern-primer/partials/variables/base/_typography.scss

@@ -11,8 +11,7 @@ $h1-padding-pos: top !default;
 $h1-margin: 0.3em !default;
 $h1-margin-pos: bottom !default;
 $h1-color: #444 !default;
-$h1-border-pos: bottom !default; 
-$h1-border-width: 0.2em !default; 
+$h1-border-width: 0 0 0.2em 0 !default; 
 $h1-border-style: solid !default;
 $h1-border-color: #693 !default;
 //// h2
@@ -26,9 +25,8 @@ $h2-padding: 0.8333em !default;
 $h2-padding-pos: top !default;
 $h2-margin: 0.7em !default;
 $h2-margin-pos: bottom !default;
-$h2-color: #555 !default;
-$h2-border-pos: bottom !default; 
-$h2-border-width: 0.13333em !default; 
+$h2-color: #555 !default; 
+$h2-border-width: 0 0 0.13333em 0 !default; 
 $h2-border-style: solid !default;
 $h2-border-color: #693 !default;
 //// h3
@@ -43,8 +41,7 @@ $h3-padding-pos: top !default;
 $h3-margin: 0.7em !default;
 $h3-margin-pos: bottom !default;
 $h3-color: #666 !default;
-$h3-border-pos: bottom !default; 
-$h3-border-width: 0.1em !default; 
+$h3-border-width: 0 0 0.1em 0 !default; 
 $h3-border-style: solid !default;
 $h3-border-color: #693 !default;
 //// h4
@@ -58,9 +55,8 @@ $h4-padding: 1em !default;
 $h4-padding-pos: top !default;
 $h4-margin: 1em !default;
 $h4-margin-pos: bottom !default;
-$h4-color: #777 !default;
-$h4-border-pos: none !default; 
-$h4-border-width: 0 !default; 
+$h4-color: #777 !default; 
+$h4-border-width: false !default; 
 $h4-border-style: solid !default;
 $h4-border-color: #693 !default;
 //// h5
@@ -75,8 +71,7 @@ $h5-padding-pos: top !default;
 $h5-margin: 0 !default;
 $h5-margin-pos: false !default;
 $h5-color: #888 !default;
-$h5-border-pos: none !default; 
-$h5-border-width: 0em !default; 
+$h5-border-width: false !default; 
 $h5-border-style: solid !default;
 $h5-border-color: #693 !default;
 //// h6
@@ -90,14 +85,12 @@ $h6-padding: 1em !default;
 $h6-padding-pos: top !default;
 $h6-margin: 0 !default;
 $h6-margin-pos: false !default;
-$h6-color: #999 !default;
-$h6-border-pos: none !default; 
-$h6-border-width: 0em !default; 
+$h6-color: #999 !default; 
+$h6-border-width: false !default; 
 $h6-border-style: solid !default;
 $h6-border-color: #693 !default;
-/// hr
-$hr-border-pos: none !default; 
-$hr-border-width: 0em !default; 
+/// hr 
+$hr-border-width: false !default; 
 $hr-border-style: solid !default;
 $hr-border-color: #333 !default;
 $hr-height: 0.1em !default;
@@ -122,14 +115,9 @@ $blockquote-font-size: 1.25em !default;
 $blockquote-line-height: 1.5em !default;
 $blockquote-letter-spacing: 0.05em !default;
 $blockquote-color: #888 !default;
-$blockquote-border-pos: top !default;
-$blockquote-border-width: 0.1em !default;
+$blockquote-border-width: 0.1em 0 0.1em 0 !default;
 $blockquote-border-style: solid !default;
 $blockquote-border-color: #ccc !default;
-$blockquote-border-pos2: bottom !default;
-$blockquote-border-width2: $blockquote-border-width !default;
-$blockquote-border-style2: $blockquote-border-style !default;
-$blockquote-border-color2: $blockquote-border-color !default;
 $blockquote-border-rgba: rgba(0,0,0,0.2) !default;
 $blockquote-border-radius: 0.25em !default;
 /// blockquote em
@@ -166,8 +154,7 @@ $article-fl-margin: 0.075em !default;
 $article-fl-margin-pos: right !default;
 $article-fl-background-color: #fff !default;
 $article-fl-color: #333 !default;
-$article-fl-border-pos: none !default;
-$article-fl-border-width: 1px !default;
+$article-fl-border-width: false !default;
 $article-fl-border-style: solid !default;
 $article-fl-border-color: #333 !default;
 /// time
@@ -189,8 +176,7 @@ $pre-margin: 1em !default;
 $pre-margin-pos: false !default;
 $pre-padding: 2em !default;
 $pre-padding-pos: false !default;
-$pre-border-pos: false !default;
-$pre-border-width: 1px !default;
+$pre-border-width: false !default;
 $pre-border-style: solid !default;
 $pre-border-color: #ddd !default;
 $pre-color: #333 !default;

data/stylesheets/compass-pattern-primer/partials/variables/modules/_control.scss

@@ -1,9 +1,8 @@
 // Controls
 $controls-font-family: $secondary-font !default;
 $controls-font-size: 1.5em !default;
-$controls-padding: 0.5em 0.75em !default;
-$controls-border-pos: false !default; 
-$controls-border-width: 1px !default; 
+$controls-padding: 0.5em 0.75em !default; 
+$controls-border-width: false !default; 
 $controls-border-style: solid !default;
 $controls-border-color: #666 !default;
 $controls-border-radius: 0.25em !default;

data/stylesheets/compass-pattern-primer/partials/variables/modules/_feedback.scss

@@ -2,9 +2,8 @@
 $feedback-background: #d9edf7 !default;
 $feedback-padding: 0.125em 1em !default;
 $feedback-margin: 1em !default;
-$feedback-color: #3A87AD !default;
-$feedback-border-pos: false !default; 
-$feedback-border-width: 1px !default; 
+$feedback-color: #3A87AD !default; 
+$feedback-border-width: false !default; 
 $feedback-border-style: solid !default;
 $feedback-border-color: #bce8f1 !default;
 $feedback-border-radius: 0.5em !default;

data/stylesheets/compass-pattern-primer/partials/variables/modules/_options.scss

@@ -1,6 +1,5 @@
 // Options 
-$options-border-pos: top !default;
-$options-border-width: 1px !default;
+$options-border-width: 1px 0 0 0!default;
 $options-border-style: solid !default;
 $options-border-color: #ccc !default;
 $options-list-style: none !default;
@@ -12,12 +11,10 @@ $options-li-letter-spacing: 0.15em !default;
 $options-li-font-weight: bold !default;
 $options-li-margin: 0 !default;
 $options-li-padding: 0.3125em 0.625em !default;
-$options-li-border-pos: bottom !default;
-$options-li-border-width: 1px !default;
+$options-li-border-width: 0 0 1px 0 !default;
 $options-li-border-style: solid !default;
 $options-li-border-color: #ccc !default;
 /// Options a
-$options-a-border-pos: none !default;
-$options-a-border-width: 0 !default;
+$options-a-border-width: false !default;
 $options-a-border-style: solid !default;
 $options-a-border-color: #ccc !default;

data/stylesheets/compass-pattern-primer/partials/variables/modules/_pagination.scss

@@ -11,8 +11,7 @@ $pagination-a-padding: 0.5em 1em !default;
 $pagination-a-margin: 0.1em !default;
 $pagination-a-border-radius: 0.25em !default;
 $pagination-a-line-height: 1em !default;
-$pagination-a-border-pos: false !default;
-$pagination-a-border-width: 1px !default;
+$pagination-a-border-width: false !default;
 $pagination-a-border-style: solid !default;
 $pagination-a-border-color: #666 !default;
 /// Pagination links

data/templates/project/base/_page.scss

@@ -1,5 +1,5 @@
 //////////////////////////////
-// BASE: Page specific styles that aren't in Pattern-Primer 
+// BASE: Page specific styles that aren't in Compass-Pattern-Primer 
 //////////////////////////////
 
 html {

data/templates/project/manifest.rb

@@ -34,20 +34,18 @@ file 'state/_header.scss',  :like => :stylesheet, :to => 'state/_header.scss'
 file 'state/_footer.scss',  :like => :stylesheet, :to => 'state/_footer.scss'
 file 'theme/_page.scss',  :like => :stylesheet, :to => 'theme/_page.scss' 
 
-
-# file 'ie.scss', :like => :stylesheet, :media => 'screen, projection', :condition => "lt IE 9"
-
-
 # Javascript Import
 # file 'scripts.js', :like => :javascript, :to => 'scripts.js'
 
-file 'pattern-primer.html',:like => :html, :to => "pattern-primer.html"
+# HTML Import
+file 'pattern-primer.html', :like => :html, :to => "pattern-primer.html"
+
 # General File Import
 # file 'README.md', :to => "README.md"
 
 # Compass Extension Help
 help %Q{
-  Help for your Compass extension
+  The best place for help is to read the documentation in Github: https://github.com/alienresident/compass-pattern-primer   
 }
 
 # Compass Extension Welcome Message

data/templates/project/partials/_colors.scss

@@ -24,4 +24,4 @@
 // $primary:   tint-stack(cs-primary());
 // $secondary: tint-stack(cs-secondary());
 // $tertiary:  tint-stack(cs-tertiary());
-// $quadrary:  tint-stack(cs-quadrary());                                                                
+// $quadrary:  tint-stack(cs-quadrary());

data/templates/project/partials/variables/base/_page.scss

@@ -1,3 +1,3 @@
 //////////////////////////////
-// VARIABLES: For Base styles that aren't in Pattern-Primer 
+// VARIABLES: For Base styles that aren't in Compass-Pattern-Primer 
 //////////////////////////////

data/templates/project/partials/variables/theme/_overrides.scss

@@ -12,37 +12,33 @@
 ///// body
 // $body-background-color: nth($black , 6);
 // $body-background-rgba: rgba($body-background-color, 1);
-// $body-border-width: 0;
-// $body-border-pos: none;
-// $body-border-pos2: none;
+// $body-border-width: false;
 //
 // $body-margin: 0;
 // $body-padding: 0;
 //
-// $html-border-pos: none;
+// $html-border-width: false;
 // $html-background-color: lighten($body-background-color, 10%);
 //
 // $link-color: nth($primary, 1);
 // $link-text-decoration: none;
-// $link-border-pos: none;
+// $link-border-width: false;
 //
 ///// Visited
 // $link-visited-link-color: nth($primary, 2);
-// $link-visited-border-pos: $link-border-pos;
+// $link-visited-border-width: $link-border-width;
 ///// Hover
 // $link-hover-link-color: lighten($link-color, 10%);
 // $link-text-decoration: none; 
-// $link-hover-border-pos: $link-border-pos;
+// $link-hover-border-width: $link-border-width;
 ///// Active
 // $link-active-link-color: $link-color;
 //
 //
 // $h1-margin-pos: none;
-// $h1-border-width: 0; 
-// $h2-border-pos: none; 
-// $h2-border-width: 0;
-// $h3-border-pos: none; 
-// $h3-border-width: 0; 
+// $h1-border-width: false;  
+// $h2-border-width: false; 
+// $h3-border-width: false; 
 //
 // $button-padding: 0.33em .66em;
 // $button-border-color: nth($black, 3);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: compass-pattern-primer
 version: !ruby/object:Gem::Version 
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors: 
 - Mark Reilly
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-05-29 00:00:00 Z
+date: 2013-07-02 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -31,6 +31,16 @@ dependencies:
         version: 0.12.1
   type: :runtime
   version_requirements: *id002
+- !ruby/object:Gem::Dependency 
+  name: toolkit
+  prerelease: false
+  requirement: &id003 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: 1.0.0
+  type: :runtime
+  version_requirements: *id003
 description: A Compass extension to help create style guides
 email: 
 - mark@alienresident.net
@@ -41,6 +51,8 @@ extensions: []
 extra_rdoc_files: []
 
 files: 
+- README.md
+- CHANGELOG.md
 - lib/compass-pattern-primer.rb
 - stylesheets/compass-pattern-primer/_base.scss
 - stylesheets/compass-pattern-primer/_modules.scss
@@ -72,7 +84,6 @@ files:
 - stylesheets/compass-pattern-primer/partials/variables/modules/_feedback.scss
 - stylesheets/compass-pattern-primer/partials/variables/modules/_options.scss
 - stylesheets/compass-pattern-primer/partials/variables/modules/_pagination.scss
-- stylesheets/compass-pattern-primer/partials/variables/modules/compass-pattern-primer.scss
 - stylesheets/compass-pattern-primer/reset/_reset.scss
 - stylesheets/compass-pattern-primer/reset/libraries/_eric_meyer_reset.scss
 - stylesheets/compass-pattern-primer/reset/libraries/_formalize.scss
@@ -131,6 +142,6 @@ rubyforge_project: compass-pattern-primer
 rubygems_version: 2.0.3
 signing_key: 
 specification_version: 4
-summary: An easy to use system to build style guide based off of Jeremy Keith's Pattern Primer.
+summary: An easy to use system to build a website's styleguide. It's based off of Jeremy Keith's Pattern Primer.
 test_files: []
 

data/stylesheets/compass-pattern-primer/partials/variables/modules/compass-pattern-primer.scss

@@ -1,12 +0,0 @@
-@import "compass-pattern-primer/reset"; 
-
-@import "compass-pattern-primer/partials/_mixins";
-@import "compass-pattern-primer/partials/_functions";
-@import "compass-pattern-primer/partials/variables/_variables";
-@import "compass-pattern-primer/partials/_extendables";
-@import "compass-pattern-primer/partials/_colors";
-
-@import "compass-pattern-primer/base";
-
-@import "compass-pattern-primer/modules";
-