built in doc framework

formula-framework.gemspec

@@ -9,4 +9,5 @@ Gem::Specification.new do |s|
   s.files       = ["lib/formula.rb"]
   s.homepage    =
     'http://rubygems.org/gems/formula'
+  s.add_dependency('compass', '~> 0.13.alpha.4')
 end

stylesheets/formula/classes.scss

@@ -61,11 +61,11 @@
     @include leader($h5-leader, $h5-size);
     @include trailer($h5-trailer, $h5-size);
   }
-  h6{
+  h6 {
     @include leader($h6-leader, $h6-size);
     @include trailer($h6-trailer, $h6-size);
   }
-  p,ul, ol, dl, blockquote, pre {
+  p, ul, ol, dl, blockquote, pre {
     @include leader(1);
     @include trailer(1)
   }

stylesheets/formula/config.scss

@@ -2,8 +2,11 @@ $legacy-support-for-ie: false;
 $legacy-support-for-mozilla: false;
 $support-for-original-webkit-gradients: false;
 
-$base-font-size: 16px;
-$base-line-height: 24px;
+$rhythm-unit: 'rem';
+// $rem-with-px-fallback: false;
+
+$base-font-size: 16px !default;
+$base-line-height: 24px !default;
 
 $total-columns:     24 !default;
 $container-width:   100% !default;

stylesheets/formula/forms.scss

@@ -1,14 +1,4 @@
-%fields {
-	@include clearfix();
-	margin-left: -0.5em;
-	margin-right: -0.5em;
-	label {
-		@extend %column;
-	}
-}
-
 fieldset {
-	@extend %fields;
 	@include box-sizing(border-box);
 	@include rhythm-borders(1px, 0);
   margin: 1em 0 0;

stylesheets/formula/grid.scss

@@ -17,13 +17,20 @@
   }
 }
 
+@mixin contains-columns(){
+  @include clearfix();
+  padding-left: 0;
+  padding-right: 0;
+}
+
 @mixin last-column() {
   float: right;
 }
 
 @mixin center-column {
   float: none;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 };
 
 @mixin pre($amount) {
@@ -34,6 +41,14 @@
   margin-right: grid-calc($amount);
 }
 
+@mixin padding-pre($amount) {
+  padding-left: grid-calc($amount);
+}
+
+@mixin padding-post($amount) {
+  padding-right: grid-calc($amount);
+}
+
 @mixin container($width: $container-width, $max: $container-max, $gutter: $container-gutter) {
   @extend %container;
   max-width: $max;
@@ -42,7 +57,7 @@
   padding-right: $gutter;
 }
 
-@mixin sticky-footer($wrapper: "#wrapper", $content: "#content", $footer: "#footer", $height: 72px, $offset: 72px){
+@mixin sticky-footer($height: 72px, $offset: 72px, $wrapper: "#wrapper", $content: "#content", $footer: "#footer"){
   html, body {
     height: 100%;
   }

stylesheets/formula/reset.scss

@@ -2,11 +2,13 @@ html {
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
+  @include establish-baseline($base-font-size);
 }
 
 body {
   margin: 0;
-  @include establish-baseline($base-font-size);
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 article,
@@ -120,11 +122,11 @@ input[type="search"] {
 }
 
 button,
-html input[type="button"], /* 1 */
+html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
+  -webkit-appearance: button;
+  cursor: pointer;
 }
 
 button,

stylesheets/formula/typography.scss

@@ -1,6 +1,7 @@
 #{headers(all)} {
 	font-family: $header-font;
 	font-weight: $header-font-weight;
+  margin: 0;
 }
 
 // <h1> elements can have a <h1.leader> and/or <h1.trailer> class to add spacing before or after the element.
@@ -10,7 +11,8 @@
 //
 // Styleguide 5.1.1.
 h1 {
-	@include adjust-font-size-to($h1-size, $h1-lines);
+	@include adjust-font-size-to($h1-size, lines-for-font-size($h1-size));
+
 }
 
 // <h2> elements can have a <h2.leader> and/or <h2.trailer> class to add spacing before or after the element.
@@ -20,7 +22,7 @@ h1 {
 //
 // Styleguide 5.1.2.
 h2 {
-	@include adjust-font-size-to($h2-size, $h2-lines);
+	@include adjust-font-size-to($h2-size, lines-for-font-size($h2-size));
 }
 
 // <h3> elements can have a <h3.leader> and/or <h3.trailer> class to add spacing before or after the element.
@@ -30,7 +32,7 @@ h2 {
 //
 // Styleguide 5.1.2.
 h3 {
-	@include adjust-font-size-to($h3-size, $h3-lines);
+	@include adjust-font-size-to($h3-size, lines-for-font-size($h3-size));
 }
 
 // <h4> elements can have a <h4.leader> and/or <h4.trailer> class to add spacing before or after the element.
@@ -40,7 +42,7 @@ h3 {
 //
 // Styleguide 5.1.4.
 h4 {
-	@include adjust-font-size-to($h4-size, $h4-lines);
+	@include adjust-font-size-to($h4-size, lines-for-font-size($h4-size));
 }
 
 // <h5> elements can have a <h5.leader> and/or <h5.trailer> class to add spacing before or after the element.
@@ -51,7 +53,7 @@ h4 {
 // Styleguide 5.1.5.
 h5 {
 	font-weight: 500;
-	@include adjust-font-size-to($h5-size, $h5-lines);
+	@include adjust-font-size-to($h5-size, lines-for-font-size($h5-size));
 }
 
 // <h6> elements can have a <h6.leader> and/or <h6.trailer> class to add spacing before or after the element.
@@ -62,7 +64,7 @@ h5 {
 // Styleguide 5.1.5.
 h6 {
 	font-weight: 500;
-	@include adjust-font-size-to($h6-size, $h6-lines);
+	@include adjust-font-size-to($h6-size, lines-for-font-size($h6-size));
 }
 
 // Blockquote elements have a slight border to the left.
@@ -89,7 +91,6 @@ a {
     @if $link-hover {
       color: $link-hover;
     }
-    color: $link-hover;
 		outline: 0;
 		cursor: pointer;
 	}
@@ -128,7 +129,7 @@ samp {
 }
 
 code {
-  @include rhythm-borders(1px, .25, 16px, solid);
+  @include rhythm-borders(1px, .25, 1rem, solid $black);
   font-family: monospace;
   white-space: pre;
 }