compass-pattern-primer 0.2.8 → 0.3.beta

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA512: 
-  data.tar.gz: b17c616e49a965d900af2f002c7588a4e1048a2f50387234eaca0d723be319df6f466d62bc1f166822d06ed7c55d19004a93fd57ec1c77d6329741556bf8fdc2
-  metadata.gz: 3150997f8458a59ffced3fb4f61e6cefc31c5c2a0bf5c567fd7f7bc5cd33844938647664efde110e9793fe28e3ca2868907b5097352d64c69d350c4a289c767e
 SHA1: 
-  data.tar.gz: b9bdae415dc552ac07d9dfc02c04ed642c528504
-  metadata.gz: 34341db7ffa706092d8e268f4f7300b3c5f4aeb9
+  data.tar.gz: 0de95f5460a05c3272087101d4dc87e492bab9bc
+  metadata.gz: 55f32509a2e6dabdd8488909fad6f5c272a4e0af
+SHA512: 
+  data.tar.gz: b6135ec2a68efa323bd60400564a54f6bc53c1b615fc8df1ffcb0c46709943e8689d0bd81b33b6cbc030b92b4461870fcc4aa69e40f9d6264c6c540dfad130d1
+  metadata.gz: b475432c33e9432bba9ce485dbe763ff572d5366d706a433b869c4c5f9ce51f6474222f3bed5bab98d21669d0ca6622c91e24a1615b460e2099fa34e16946f7f

data/CHANGELOG.md

@@ -7,4 +7,5 @@
 * **0.2.5** Fixed errors in time style in base/_tyopgraphy.scss
 * **0.2.6** Forgot to update Changelog
 * **0.2.7** Added `$forms-input-width` variable
-* **0.2.8** Added `%formstyle` extendable to fix extendable cascade issues
+* **0.2.8** Added `%formstyle` extendable to fix extendable cascade issues 
+* **0.3.beta** Remodeling reset and template files (pre-release for SassConf)

data/README.md

@@ -2,11 +2,11 @@
 ### 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. 
+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 uses a PHP document to pull in patterns (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. 
+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.
+For my own development work I needed to move beyond 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](#reset) from Eric Meyer's to Formalize and Normalize.
 
 *This is a work in progress and any feedback is very welcome.* 
 
@@ -15,72 +15,107 @@ Compass Pattern Primer is a compass extension bundled as a Ruby gem.
    
 ```bash
 gem install compass-pattern-primer
-```
+``` 
+#### Dependencies  
 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. 
 
+Depending on what [scaffolding](#create-a-new-compass-project-using-compass-pattern-primer-scaffolding) or [reset](#reset) library you use. You may need to install  [compass normalize](https://github.com/ksmandersen/compass-normalize) and/or [compass formalize](https://github.com/pengwynn/compass_formalize) or the [meyer reset](https://github.com/adamstac/meyer-reset).
+
 ## 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
+### 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\)
+### 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.* 
+compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer 
+```   
+This creates a SMACSS style scaffolding for your project. It includes an `index.php` and a patterns folder (HTML snippets). Within the patterns folder there are the default Adactio patterns as well as some additional patterns. All the partials are imported into `global.scss` which will be your main css file. It also creates a `pattern-primer.scss` which imports `global.scss` and adds a color guide for your `index.php`. The color guide adds a lot of CSS that has no business being in the production site but's very useful for the style guide.   
+
+##### Adactio's Pattern Primer
+
+```bash
+compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer/adactio 
+```   
+This adds an `index.php` and a patterns folder (HTML snippets) with only  Adactio's original patterns and CSS that's (fairly) faithful to his CSS.
+
+##### Static HTML File
+
+```bash
+compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer/static 
+```   
+This creates a SMACSS style scaffolding for your project. Instead of the `index.php` it includes `pattern-primer.html` a static html page where you can preview the style guide. You edit the html to add your own patterns.
 
 #### 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";
-```
+```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.
+The Compass Pattern Primer Reset incorporates Normalize and Formalize libraries (using their compass gems) by default.
+
+__change__
 
 ```scss
-$use_formalize_reset: false;
-$use_normalize_reset: false;
-```
+@import "compass-pattern-primer/reset";  
+```  
+__to__   
+```scss
+@import "compass-pattern-primer/reset/libraries/_normalize";  
+```  
+__or__  
+```scss
+@import "compass-pattern-primer/reset/libraries/_formalize";  
+```    
+
+The Eric Meyer Reset is available as an option.  
+
+__change__
 
-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;
-```
+@import "compass-pattern-primer/reset";
+```  
+__to__ 
+
+```scss
+@import "compass-pattern-primer/reset/libraries/_eric_meyer_reset";
+```   
 
-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:
+Unless you use the Compass Pattern Primer SMACSS scaffolding*, legacy support for older IE (6 & 7) browsers in the Normalize and Formalize libraries will be set to true. To change this add:
 
 ```scss
-$legacy-support-for-ie6: false;
+$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`.
+*In the Compass Pattern Primer SMACSS 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.
+If you don't want to use any resets simply don't import it. You can import just the base and modules.
 
 ```scss
 @import "compass-pattern-primer/base";
@@ -93,7 +128,7 @@ You can add them all:
 
 ```scss
 @import "compass-pattern-primer/base";
-```
+```    
 Or selectively, here's the full list you can select which parts:
 
 ```scss
@@ -110,15 +145,15 @@ Similarly the modules allow can be imported whole or selectively.
 
 ```scss
 @import "compass-pattern-primer/modules";
-``` 
-Or 
+```   
+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
@@ -127,7 +162,6 @@ The Compass Pattern Primer is designed to allow nearly everything about the CSS
 #### 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.
 
@@ -137,9 +171,9 @@ In this example I am extending an `input` with the `id="reset"` to `%button-acti
 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.
+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 on the `index.php` (default) or `pattern-primer.html` (static) 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.
 
@@ -156,7 +190,7 @@ $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.
 
@@ -166,24 +200,30 @@ $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.
+#### ~~More scaffolding options.~~ DONE
+~~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.
+~~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.
+~~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.
+There are now 3 [install options](#create-a-new-compass-project-using-compass-pattern-primer-scaffolding) for Compass Pattern Primer.
+	
+
+#### ~~Use existing Compass Reset gems~~ DONE
+~~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)
+- [Compass Formalize](https://github.com/pengwynn/compass_formalize)~~  
+I had to make some changes to [Compass Formalize](https://github.com/pengwynn/compass_formalize) to add `$legacy-support-for-ie6` and `$legacy-support-for-ie7` and they were accepted and pushed on in v. 0.0.5. I am now a committer on that project!
 
 
-#### ~~Simplify `bounding-box` mixin~~ DONE
+#### ~~Simplify the `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)!
+Contact [me](mailto:mark@alienresident.net) or simply file an [issue](https://github.com/alienresident/compass-pattern-primer/issues/new)! 
+
+Thanks, Mark Reilly 

data/lib/compass-pattern-primer.rb

@@ -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.8"
-  DATE = "2013-09-19"
+  VERSION = "0.3.beta"
+  DATE = "2013-10-13"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/compass-pattern-primer/_reset.scss

@@ -1,10 +1 @@
-// change legacy support to true if you want legacy versions of formalize and normalize
-$legacy-support-for-ie6: false;
-$legacy-support-for-ie7: false;
-
-// choose your reset
-$use_eric_meyer_reset: false;
-$use_formalize_reset: true;
-$use_normalize_reset: true;
-
 @import "reset/_reset";  

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

@@ -23,7 +23,5 @@ $black:     tint-stack(#333);
 $primary:   tint-stack(cs-primary());
 $secondary: tint-stack(cs-secondary());
 $tertiary:  tint-stack(cs-tertiary());
-$quadrary:  tint-stack(cs-quadrary()); 
-$darker:    shade-stack(cs-primary());
- 
-@include generate-colour-guide($black, $primary, $secondary, $tertiary, $quadrary, $darker);
+$quadrary:  tint-stack(cs-quadrary());
+$darker:    shade-stack(cs-primary());

data/stylesheets/compass-pattern-primer/reset/_reset.scss

@@ -1,19 +1,2 @@
-$use_eric_meyer_reset: false !default;
-$use_formalize_reset: true !default;
-$use_normalize_reset: true !default;
-
-@import "libraries/_eric_meyer_reset";
-@import "libraries/_normalize";
-@import "libraries/_formalize";
-
-@if $use_eric_meyer_reset {
-   @include eric_meyer_reset();
-}
-
-@if $use_formalize_reset {
-   @include formalize();
-}
-
-@if $use_normalize_reset {
-   @include normalize();
-}
+@import "normalize";
+@import "formalize";

data/stylesheets/compass-pattern-primer/reset/libraries/_eric_meyer_reset.scss

@@ -1,51 +1 @@
-@mixin eric_meyer_reset() {
-
-  /* http://meyerweb.com/eric/tools/css/reset/ 
-     v2.0 | 20110126
-     License: none (public domain)
-  */
-
-  html, body, div, span, applet, object, iframe,
-  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-  a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, img, ins, kbd, q, s, samp,
-  small, strike, strong, sub, sup, tt, var,
-  b, u, i, center,
-  dl, dt, dd, ol, ul, li,
-  fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td,
-  article, aside, canvas, details, embed, 
-  figure, figcaption, footer, header, hgroup, 
-  menu, nav, output, ruby, section, summary,
-  time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-  }
-  /* HTML5 display-role reset for older browsers */
-  article, aside, details, figcaption, figure, 
-  footer, header, hgroup, menu, nav, section {
-    display: block;
-  }
-  body {
-    line-height: 1;
-  }
-  ol, ul {
-    list-style: none;
-  }
-  blockquote, q {
-    quotes: none;
-  }
-  blockquote:before, blockquote:after,
-  q:before, q:after {
-    content: '';
-    content: none;
-  }
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-}  
+@import "meyer-reset.scss";