stipe 0.0.4.8 → 0.0.4.9

data/readme.md

@@ -11,10 +11,6 @@ To use the Stipe gem, using Bundler `gem 'stipe'`
 
 Stipe is a Compass Extension, so Compass is set as a depdency. You will need to include `require 'stipe'` in your config.rb file.
 
-##Sass / Compass
-**(BLEEDING EDGE ALERT)** Toadstool is using ``3.2.0.alpha.*``
-For [reasons explained](/Anotheruiguy/toadstool/blob/master/doc-src/exploited-bug.md) please continue using the alpha gem and upgrading to Sass 3.2 will break Toadstool and Stipe. 
-
 # Stipe Changelog
 ## 0.0.4.8
 * Updated typography extends to better minimize headings styles
@@ -29,42 +25,4 @@ For [reasons explained](/Anotheruiguy/toadstool/blob/master/doc-src/exploited-bu
 * Addressed bug with vendor prefix variables 
 
 ## 0.0.4.0
-* Deprecated legacy `@mixin placeholder` Will be deleted from future releases of the library
-
-## 0.0.3.9
-* Addressed no-boxsizing calculation in grid to account for a border on a single side
-* Added support for a grid debug view
-
-## 0.0.3.8
-* Addressed bugs with new Flexbox spec ... yeah, I did it wrong ;(
-
-## 0.0.3.7
-* Updates to Toadstool nav and grid display for legacy browsers
-* Updates to flexbox to support legacy and new based on current support
-
-## 0.0.3.5
-* Updated code blocks to be 100% of view versus two columns by default
-
-## 0.0.3.4
-* Updated default text to have text-adjust set to none.
-
-## 0.0.3.3
-* Updates to grid soluiton for legacy browser support
-
-## 0.0.3.2
-* Updates to how default color extends are created in `toadstool.css`
-** Created new `readme.md` in Stipe's color directory
-* Modifications to css for Toadstool's style guide look and feel. Addressed bugs with styles stomping on generic tags in prototype views
-
-## 0.0.2.8/0.0.2.9
-* Updated Toadstool Sass to use better named spaced class for main content block. 
-** Changed .main_content to .toadstool_main_contnet
-
-## 0.0.2.7
-* Sass and UI work related to default form views
-
-## 0.0.2.6
-* Created color views in Toadstool
-* Created remaining semantic color variables silent classes
-* Updated Toadstool `_design / _ui_manifest.scss` 
-
+* Deprecated legacy `@mixin placeholder` Will be deleted from future releases of the library

data/stylesheets/stipe/_color.scss

@@ -3,6 +3,6 @@
 // Preferred uses include @extend %class; or repurpose the mixin within the class.
 //
 
-@import "color/default_color_pallet";
+@import "color/default_color_palette";
 //@import "color/extends";
 

data/stylesheets/stipe/resets/_toadstool.scss

@@ -3,7 +3,7 @@
 // -----------------------------------------------------------------
 
 
-@import "../color/default_color_pallet";
+@import "../color/default_color_palette";
 
 
 // *-------------------------------------------------------------------------------

data/stylesheets/stipe/toadstool/_config.scss

@@ -60,7 +60,7 @@ $heading_font_family: #{'Lato', sans-serif} !default;
 // -----------------------------------------------------------------------------
 // This is a bootstrap template for creating an array of colors
 // If this is not for you, feel free to comment out
-@import "stipe/color/default_color_pallet";
+@import "stipe/color/default_color_palette";
 
 // Don't like Stipe's color pallet, no worries. Uncomment these lines and go for it!
 // @import "color/color_math";

data/stylesheets/stipe/toadstool/_typography.scss

@@ -47,6 +47,18 @@ html {
 	}
 }
 
+// This is used to keep heading examples from poorly wrapping in mobile
+.element_example {
+  @media #{$mobile} {
+    h1, h2, h3, h4, h5, h6 {
+    	width: auto;
+    	white-space: nowrap;
+    	overflow: hidden;
+    	text-overflow: ellipsis;
+    }
+  }
+}
+
 
 
 h3 {

data/stylesheets/stipe/typography/headings.md

@@ -0,0 +1,68 @@
+#Headings
+
+Stipe's and Toadstool's approach to headings is more of a semantic use versus a presentational presetting of markup tags. 
+
+Typically most will default style the `h1 - h6` tags and then this will be the referential design statement for the application. But there will be cases for SEO and other related semantic reasons that you will not want a `h1` to look like the 'h1'. 
+
+##So, how do we do this?
+In Stipe's [default typography](http://goo.gl/V81v3) settings, you will see that there are default styles set for `h1 - h6` tags. This is to set the base and simplify standard UI development. 
+
+```scss
+h1 {
+  //font-size: 2em;  // user agent default
+  @extend %headings_1;
+}
+
+h2 {
+  //font-size: 1.5em;  // user agent default
+  @extend %headings_2;
+}
+```
+
+It is the `@extend` where all the magic happens. These extends are created like so from the [typography mixins](http://goo.gl/xdnQm)
+
+```scss
+%headings_1 {
+  @include heading();
+}
+
+%headings_2 {
+  @extend %headings_1;
+  @include text($heading_2);
+}
+```
+
+As a result we get the following 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; }
+```
+
+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
+.name_space {
+  h1 {
+    @extend %headings_2;
+  }
+}
+``` 
+
+Which gives us the following 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.  
+
+
+
+
+
+
+

data/stylesheets/stipe/typography/readme.md

@@ -0,0 +1,24 @@
+#General typography
+
+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 indludes 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.
+
+##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.
+
+##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.
+
+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);`.
+
+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.

data/stylesheets/stipe/typography/web_fonts/readme.md

@@ -0,0 +1,17 @@
+#Stipe's predefined web fonts
+
+Stipe comes pre-installed with icon font libraries `zocial` and `font-awesome`. 
+
+To activate these libraries in your Toadstool project, simple review the instructions in the [_web_fonts.scss](http://goo.gl/TCycJ) file. 
+
+Use of a icon font is pretty straight forward. Simply extend the silent placeholder like so ...
+
+```scss
+.bookmark {
+  @extend %icon-bookmark;
+}
+```
+
+Stipe's pre-set values will set the appropriate font family and the character needed. 
+
+Make sure that the font fmailies are loaded in your public folder like the example in [Toadstool](http://goo.gl/ZmAuO). 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.4.8
+  version: 0.0.4.9
   prerelease: 
 platform: ruby
 authors:
@@ -61,9 +61,12 @@ files:
 - stylesheets/stipe/typography/web_fonts/_zocial.scss
 - stylesheets/stipe/typography/web_fonts/_zocial_characters.scss
 - stylesheets/stipe/typography/web_fonts/_font_awesome.scss
+- stylesheets/stipe/typography/web_fonts/readme.md
 - stylesheets/stipe/typography/_mixins.scss
 - stylesheets/stipe/typography/_default.scss
+- stylesheets/stipe/typography/headings.md
 - stylesheets/stipe/typography/_functions.scss
+- stylesheets/stipe/typography/readme.md
 - stylesheets/stipe/typography/_extends.scss
 - stylesheets/stipe/_buttons.scss
 - stylesheets/stipe/resets/_eric_meyer.scss
@@ -101,7 +104,7 @@ files:
 - stylesheets/stipe/_gradients.scss
 - stylesheets/stipe/_forms.scss
 - stylesheets/stipe/color/_grayscale_math.scss
-- stylesheets/stipe/color/_default_color_pallet.scss
+- stylesheets/stipe/color/_default_color_palette.scss
 - stylesheets/stipe/color/_color_math.scss
 - stylesheets/stipe/color/_extends_deprecated.scss
 - stylesheets/stipe/color/readme.md