stipe 0.0.6.3 → 0.0.6.4

data/readme.md

@@ -1,84 +1,91 @@
-#Stipe Compass Extension
-Stipe is the life blood of the Toadstool style guide framework. Consisting of a series of mixins, extends and defaults that give Toadstool that 'instant on' experience.
+# Stipe Compass Extension
+Stipe is the core of the Toadstool style guide framework, providing of mixins, placeholder classes, and sensible defaults that give Toadstool that 'instant on' experience.
 
 [Stipe](https://rubygems.org/gems/stipe)
 
-##To install
+## To install
 `gem install stipe`
 
-##To use
+## To use
 To use the Stipe gem, using Bundler `gem 'stipe'`
 
-Stipe is a Compass Extension, so Compass is a dependency. You will need to include `require 'stipe'` in your config.rb file.
+Stipe is a Compass extension, so Compass is a dependency. You will need to include `require 'stipe'` in your config.rb file.
 
 # Stipe Changelog
 
-###0.0.6.3
 
-* Fix `-moz-placeholder` psuedo-selector syntax. Apparently requires two colons.
+### 0.0.6.4
+* Remove `max-width` from desktop @media query.
+* Remove `:link` pseudo-selector from `a` default styling in typography.
+* Typography clean up and bug fixes.
+* (Slightly) better grid documentation.
+* Clean up READMEs.
 
-###0.0.6.2
+### 0.0.6.3
+* Fix `-moz-placeholder` pseudo-selector syntax. Apparently requires two colons.
+
+### 0.0.6.2
 * Make `push`/`pull` grid mixins accept context arguments. Useful for nested, percentage-based grids.
 
-###0.0.6.1
-* Tweak `the_grid` to work with 24 column default setting
+### 0.0.6.1
+* Tweak `the_grid` to work with 24 column default setting.
 
-###0.0.6.0
-* Updated `@clearfix` to remove redundant CSS output.
-* Added some additional @media query-scoped grid placeholders.
-* Updated gem homepage.
+### 0.0.6.0
+* Update `@clearfix` to remove redundant CSS output.
+* Add some additional @media query-scoped grid placeholders.
+* Update gem homepage.
 
-###0.0.5.9
-* Removed uneccessary instances of the box-sizing mixin, namely, in the push/pull mixins.
-* Added _legacy_extends.scss file to stipe/grid. This is an optional @import, not included in the Stipe manifest. It restores some legacy placeholders. Consider it deprecated.
+### 0.0.5.9
+* Remove uneccessary instances of the box-sizing mixin, mainly in the push/pull mixins.
+* Adde _legacy_extends.scss file to stipe/grid. This is an optional @import, not included in the Stipe manifest. It restores some legacy placeholders. Consider it deprecated.
 
-###0.0.5.8
+### 0.0.5.8
 * Move grid extends to load last in style.scss manifest - when using the extended grid solution, this will move all your media queries to the end of the stylesheet.
-* Removed support for Font-Awesome and Zocial ico-fonts
-* Replaced with new and improved "build your own" ico-font solution
-* General bug fixes
+* Remove support for Font-Awesome and Zocial ico-fonts.
+* Replace with new and improved "build your own" ico-font solution.
+* General bug fixes.
 
-###0.0.5.7.9
-* BUG FIX - Addressed duplicate output for 12 col and 24 col nested placeholder selectors
+### 0.0.5.7.9
+* BUG FIX - Addressed duplicate output for 12 col and 24 col nested placeholder selectors.
 
-###0.0.5.7.8
-* ALERT!!!! Deprecated Stipe's gradient support. This code will be deleted in future releases. Please make sure to update all gradients to use Compass' `@include background-image` mixin
+### 0.0.5.7.8
+* ALERT!!!! Stipe's gradient support is now deprecated. This code will be deleted in future releases. Please make sure to update all gradients to use Compass' `@include background-image` mixin.
 * Grids have been updated to support a larger array of placeholder classes for both 12 col and 24 col grid layouts.
-* New experimental support for placeholder selectors and nested grids
+* New experimental support for placeholder selectors and nested grids.
 
-###0.0.5.7.7
-* Update grid - move box-sizing from grid scope to global attribute
-* Deprecate Stipe's grid solution in favor of using Compass
+### 0.0.5.7.7
+* Update grid - move box-sizing from grid scope to global attribute.
+* Deprecate Stipe's grid solution in favor of using Compass.
 
-###0.0.5.7.6
+### 0.0.5.7.6
 * Restore `-ms-linear-gradient(...)` in `linear_gradient_w3c()` mixin. Because Jed has no idea what he's doing.
 
-###0.0.5.7.5
-* Replaced `-ms-linear-gradient(...)` with `linear-gradient(..)` in `linear_gradient_w3c()` mixin.
+### 0.0.5.7.5
+* Replace `-ms-linear-gradient(...)` with `linear-gradient(..)` in `linear_gradient_w3c()` mixin.
 
-###0.0.5.7.4
-* Updated `_forms.scss` to support legacy versions of extends
+### 0.0.5.7.4
+* Update `_forms.scss` to support legacy versions of extends.
 
-###0.0.5.7.3
-* Removed sass-globbing dependency in stipe itself
+### 0.0.5.7.3
+* Remove sass-globbing dependency in Stipe itself.
 
-###0.0.5.7.2
-* Commonly named color values (aquamarine, white, Crimson, etc) need to be put in `' '` when processed through Rails
+### 0.0.5.7.2
+* Commonly named color values (`aquamarine`, `white`, `crimson`, etc) need to be put in `' '` when processed through Rails.
 
-###0.0.5.7.1
+### 0.0.5.7.1
 * Added `!optional` flag to Toadstool generated extended placeholder selectors to address backwards compatibility.
-* If Sass still pukes on not finding the placeholders to extend, either the name was updated or simple add `!optional` to the end of the extend declaration.
-	* For the most part this would be restricted to `_buttons.scss` and `_forms.scss`
-
-###0.0.5.7
-* Over-hauled color palette CSS
-* Updated forms extends to include `stipe_` in the name to increase visibility of where code is coming from in Toadstool
-* Added UI for `contenteditable` new functionality
-* Old button lib is dead
-* All new buttons is alive
-* Updates to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`
-	* Added new `extend_color_loop` mixin
-	* Dynamically looping through list of OOCSS names to create color block classes
-*  New `extend_color_loop` mixin
-	* Added to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`
-	* All extends generated in memory from lists of objects
+* If Sass still pukes on not finding the placeholders to extend, either the name was updated or simply add `!optional` to the end of the extend declaration.
+	* For the most part this would be restricted to `_buttons.scss` and `_forms.scss`.
+
+### 0.0.5.7
+* Over-haul color palette CSS.
+* Update forms extends to include `stipe_` in the name to increase visibility of where code is coming from in Toadstool.
+* Add UI for `contenteditable` new functionality.
+* Old button lib is dead.
+* All new buttons is alive.
+* Updates to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`.
+	* Add new `extend_color_loop` mixin.
+	* Dynamically looping through list of OOCSS names to create color block classes.
+*  New `extend_color_loop` mixins.
+	* Add to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`.
+	* All extends generated in memory from lists of objects.

data/stylesheets/stipe/_media.scss

@@ -5,15 +5,15 @@
 
 $mobile:                    "screen and (max-width: 40em)" !default;
 $mobile_portrait:	          "screen and (max-width: 40em) and (orientation : portrait)" !default;
-$mobile_landscape:	        "screen and (max-width: 40em) and (orientation : landscape)" !default; 
+$mobile_landscape:	        "screen and (max-width: 40em) and (orientation : landscape)" !default;
 
 $tablet:                    "screen and (max-width: 64em)" !default;
 $tablet_portrait:           "screen and (max-width: 64em) and (orientation: portrait)" !default;
 $tablet_landscape:          "screen and (max-width: 64em) and (orientation: landscape)" !default;
 
-$desktop:                   "screen and (max-width: 120em) and (min-width: 50em)" !default;
+$desktop:                   "screen and (min-width: 50em)" !default;
 
-$hidpi:                     "(-webkit-min-device-pixel-ratio: 1.3), 
-                             (-o-min-device-pixel-ratio: 2.6/2), 
-                             (min--moz-device-pixel-ratio: 1.3), 
-                             (min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx)" !default;
+$hidpi:                     "(-webkit-min-device-pixel-ratio: 1.3),
+                             (-o-min-device-pixel-ratio: 2.6/2),
+                             (min--moz-device-pixel-ratio: 1.3),
+                             (min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx)" !default;

data/stylesheets/stipe/color/readme.md

@@ -4,5 +4,5 @@ In your Toadstool style guide, `style.scss` calls in local `_config.scss`. Local
 
 `color/color_math` imports `stipe/color/default_color_pallet` to ensure that un-updated default values are carried forward. 
 
-In your Toadstool style guide`toadstool.scss` imports `color/extends.scss` from the local style guide so that the extends have the correct color reference. But it is in `stipe/toadstool/ui_patterns/_color_grid.scss` where these extended values are given classes that only appear in the `toadstool.css`. This principle is needed so that the site's extends will create colors from the appropiate context and the presentational classes only live in the `toadstool.css` doc.  
+In your Toadstool style guide`toadstool.scss` imports `color/extends.scss` from the local style guide so that the extends have the correct color reference. But it is in `stipe/toadstool/ui_patterns/_color_grid.scss` where these extended values are given classes that only appear in the `toadstool.css`. This principle is needed so that the site's extends will create colors from the appropriate context and the presentational classes only live in the `toadstool.css` doc.  
 

data/stylesheets/stipe/grid/readme.md

@@ -1,32 +1,34 @@
-#Grids
-Stipe's grid system is based on the original 960.gs solution. Whereas there are concepts like columns, gutters and nesting. 
+# Grids
+Stipe provides 12, 16, and 24 column grids based on the original [960.gs](http://960.gs/) solution.
 
 
-##Placeholder classes
-For the most part when framing a UI, simply extend already pre-defned placeholder classes like `@extend %grid_4of12`, for example. Stipe's placeholder classes come with support for tablet and mobile devices. 
+## Placeholder classes
+You can use the grid without placing presentational classes on your markup by applying Stipe's placeholder classes.
 
-For example, using the following Sass
+This Sass:
 
 ```sass
-.grid-block {
-  @extend %grid_4of12;
+nav {
+  @extend %grid_12of12;
+
   @media #{$mobile} {
     @extend %grid_4of4;
   }
 }
 
-.left-nav {
+.gallery img {
   @extend %grid_4of12;
+
   @media #{$mobile} {
     @extend %grid_4of4;
   }
 }
 ```
 
-You will get the following CSS
+Yields this CSS:
 
 ```css
-.grid-block, .left-nav {
+nav, .gallery img {
   float: left;
   margin-left: 1.04167%;
   margin-right: 1.04167%;
@@ -34,7 +36,7 @@ You will get the following CSS
 }
 
 @media screen and (max-width: 40em) {
-  .grid-block, .left-nav {
+  nav, .gallery img {
     float: left;
     margin-left: 3.125%;
     margin-right: 3.125%;
@@ -43,12 +45,13 @@ You will get the following CSS
 }
 ```
 
-##Building custom grid widths and nesting
-If you require more customization of a given grid, use Stipe's grid mixin `@include grid($col_count)`. Whereas you are replacing `$col_count` with the number of columns you need.
+## Building custom grid widths and nesting
+
+If you require more customization for a given column, use Stipe's grid mixin: `@include grid($col_count)`, replacing `$col_count` with the number of columns you need.
 
-When nesting grids, since Stipe uses percentages, you need to make sure to reset your context. 
+When nesting grids, since Stipe defaults to percentages, you need to make sure to reset your context by passing in the `$grid_context` argument.
 
-##Grid arguments
+## Grid arguments
 Additional arguments can be passed into the grid mixin to include `$grid_padding_l` `$grid_padding_r` `$grid_padding_tb` `$grid_border` `$border_place` `$grid_uom` `$col_gutter` `$grid_type` `$grid_align` `$grid_context`
 
 * `$grid_padding_l` => adds padding LEFT, takes integer value
@@ -60,5 +63,3 @@ Additional arguments can be passed into the grid mixin to include `$grid_padding
 * `$col_gutter` => takes integer to adjust col gutter
 * `$grid_align` => takes `center` as argument
 * `$grid_context` => Adjusts column widths based on nested grid context. Necessary when calculating with percentages
-			
-Stipe uses the `box-size` CSS property, but this is not supported by IE7. By entereing values like `$grid_padding_l, $grid_padding_r, $grid_border`, Stipe will calculate a width that IE7 can use.

data/stylesheets/stipe/resets/_toadstool.scss

@@ -121,7 +121,6 @@ input, textarea, select, button {
 
 table {
 	font-size: inherit;
-	font: 100%;
 }
 
 sub, sup {

data/stylesheets/stipe/typography/_default.scss

@@ -50,14 +50,10 @@ b {
   }
 }
 
-
-// :link Pseudo-class is totally not necessary as I can tell
-// code here to combat legacy code
 a {
-  &:link {
-    color: $href_color;
-    text-decoration: none;
-  }
+  color: $href_color;
+  text-decoration: none;
+
   &:hover, &:active {
     text-decoration: underline;
   }

data/stylesheets/stipe/typography/_extends.scss

@@ -35,6 +35,7 @@
 }
 
 
+
 %small {
   @include small;
 }
@@ -49,8 +50,6 @@
 
 
 
-
-
 //* Font family classes */
 %primary_font_family {
   font-family: $primary_font_family;
@@ -66,8 +65,6 @@
 
 
 
-
-
 //* Hide Text, Kellum Method */
 %hide_text {
   @include hide_text;
@@ -75,7 +72,6 @@
 
 
 
-
 //* Standard content block styling */
 %bulleted_list {
   @include bulleted_list;

data/stylesheets/stipe/typography/_functions.scss

@@ -11,7 +11,7 @@
 // Baseline height calculations 
 // line-height: baseline($baseline_size);
 @function baseline($baseline_size) {
-  @return ($line / $baseline_size) * ceil($baseline_size / $line) * 1em;
+  @return ($line / $baseline_size) * ceil($baseline_size / $line) * 1;
 }
 
 // Baseline margin calculations 

data/stylesheets/stipe/typography/_mixins.scss

@@ -22,12 +22,14 @@
     margin-bottom: baseline-margin($baseline_size);
   }
   @else if $margin == 0 {
-    margin-bottom: 0;
+    // no op
+  }
+  @else {
+    margin-bottom: em($margin);
   }
 }
 
 
-
 //////// standard text mixins //////////
 // ------------------------------------------------
 @mixin small ($baseline_size: $small_point_size) {
@@ -43,8 +45,6 @@
 }
 
 
-
-
 ////////// Standard bulleted list //////////////
 // --------------------------------------------
 @mixin bulleted_list {

data/stylesheets/stipe/typography/headings.md

@@ -34,7 +34,7 @@ It is the `@extend` where all the magic happens. These extends are created like
 
 As a result we get the following CSS
 
-```CSS
+```css
 h2, h1 { font-size: 3.83333em; line-height: 1.17391em; margin-bottom: 0.3913em; color: #333333; font-weight: normal; font-family: "Helvetica Neue", Arial, sans-serif; }
 
 h2 { font-size: 2.66667em; line-height: 1.125em; margin-bottom: 0.5625em; }
@@ -42,7 +42,7 @@ h2 { font-size: 2.66667em; line-height: 1.125em; margin-bottom: 0.5625em; }
 
 So lets say that in your design spec you will want to make a leading header in the view an `h1` but you want it to look like the `h2`? Well, through the magic of Sass, we can make this happen like so properly using the `@extend` function. 
 
-```SCSS
+```scss
 .name_space {
   h1 {
     @extend %headings_2;
@@ -52,17 +52,10 @@ So lets say that in your design spec you will want to make a leading header in t
 
 Which gives us the following CSS
 
-```CSS
+```css
 h2, .name_space h1, h1 { font-size: 3.83333em; line-height: 1.17391em; margin-bottom: 0.3913em; color: #333333; font-weight: normal; font-family: "Helvetica Neue", Arial, sans-serif; }
 
 h2, .name_space h1 { font-size: 2.66667em; line-height: 1.125em; margin-bottom: 0.5625em; }
 ```
 
-So what we gain here is the ability to seperate the semantics of heading tags from the look of the headers. Using the `@extend` function and how Stipe's architecture, we are able to redefine our CSS as needed without unnecessary duplicating style rules.  
-
-
-
-
-
-
-
+So what we gain here is the ability to separate the semantics of heading tags from the look of the headers. Using the `@extend` function and how Stipe's architecture, we are able to redefine our CSS as needed without unnecessary duplicating style rules.  

data/stylesheets/stipe/typography/readme.md

@@ -3,22 +3,22 @@
 Much of your Typography has already been addressed with Toadstool. Simply use [Toadstool's config file](http://goo.gl/PqQSK) to address your `$font_size, $heading_1 - 6, $small_point_size and $large_point_size`. As well designate your `$primary_font_family, $secondary_font_family and $heading_font_family` variables.
 
 ##Typography functions
-The functions indluded here are the part of Toadstool's design foundation. Functions for calculating `em` and `rem` values as well as calculating baseline heights for vertical rhythm. 
+The functions included here are the part of Toadstool's design foundation. Functions for calculating `em` and `rem` values as well as calculating baseline heights for vertical rhythm. 
 
 ##Typography defaults
 How does this work? Stipe's typography library contains a `_default.scss` file that is carried into the Toadstool project via the [_typograhy.scss](http://goo.gl/1YrDS) file. This file contains the basic bootstrap stylings for `html`, `h1-h6`, `p`, `b`, and `a` tags. Toadstool's [_typography.scss](http://goo.gl/d9yvC) file will mirror the default settings from Stipe. Feel free to edit as necessary, but I have found these pre-defined styles to be pretty stable. 
 
 ##Typography mixns
-Default mixins to define headings and body text that includes the `baseline` function for automates `line-height` maangement. There are mixins for small, medium and large font sizes. A standard mixin for bulleted lists and a robust `font-face` mixin for adding new web fonts to your site.
+Default mixins to define headings and body text that includes the `baseline` function for automates `line-height` management. There are mixins for small, medium and large font sizes. A standard mixin for bulleted lists and a robust `font-face` mixin for adding new web fonts to your site.
 
 ##Typography extends
-Part of the Stipe API is the use of [extends](http://goo.gl/iJfy9) for general use typography. Making use of these silent selectors will halp to keep your UI consistent and your CSS nice and lean. These extends take advantage of the mixins already installed in Stipe. Uses included are headings 1-6, small, medium, and large font sizes, primary, secondary and heading font-families.
+Part of the Stipe API is the use of [extends](http://goo.gl/iJfy9) for general use typography. Making use of these silent selectors will help to keep your UI consistent and your CSS nice and lean. These extends take advantage of the mixins already installed in Stipe. Uses included are headings 1-6, small, medium, and large font sizes, primary, secondary and heading font-families.
 
 ##The ems have it
 It should be noted that Toadstool DOES NOT USE PIXELS for any values. At any time you need use a width/height/size value, use Stipe's [em function](http://goo.gl/rK2Ae), for example: `font-size: em(12);` or `width: em(100);`. The value passed into the em function are roughly equal to a pixel size. This will help to address conversions from pixel specifications to the more flexible em value. [Why Ems?](http://css-tricks.com/why-ems/)
 
-Stipe's em function takes two arguments, `$target` and `$context`. By default `$context` is set to the `$font-size` you set in the your [config.scss](http://goo.gl/PqQSK) file. The function will take the value of the argument, devide it by the context and convert that to an em vlaue for the final output.
+Stipe's `em` function takes two arguments, `$target` and `$context`. By default `$context` is set to the `$font-size` you set in the your [config.scss](http://goo.gl/PqQSK) file. The function will take the value of the argument, divide it by the context and convert that to an em vlaue for the final output.
 
-But why the second argument? The gotcha of ems is it's parental relationship. If at any time you redefined the parent font size, you need to redefine the context of this function. For example, if the partent was changed to `font-size: em(18);` and you wanted a header inside to be 24px, by resetting the context you will get the correct em value, like so: `font-size: em(24, 18);`.
+But why the second argument? The gotcha of ems is it's parental relationship. If at any time you redefined the parent font size, you need to redefine the context of this function. For example, if the parent was changed to `font-size: em(18);` and you wanted a header inside to be 24px, by resetting the context you will get the correct em value, like so: `font-size: em(24, 18);`.
 
-Stipe also has a rem funciton that works the same way, example: `font-size: rem(24);` whereas this function takes the initial argument and devides by the font-size set in the `html` selector. Read more on rem from [snook.ca](http://goo.gl/85fhM), but use with caution, no support for IE8 and below.
+Stipe also has a rem function that works the same way, example: `font-size: rem(24);` whereas this function takes the initial argument and divides by the font-size set in the `html` selector. Read more on rem from [snook.ca](http://goo.gl/85fhM), but use with caution, no support for IE8 and below.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.6.3
+  version: 0.0.6.4
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-07-18 00:00:00.000000000 Z
+date: 2013-11-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass