type scss

scss/_variables.scss

@@ -2,8 +2,8 @@
 // Brand Colors
 // -------------------------------
 
-$brand-default:            #fff;
+$brand-default:         #fff;
-$brand-secondary:            #f5f5f5;
+$brand-secondary:       #f5f5f5;
 $brand-primary:         #6999e9;
 $brand-success:         #89c163;
 $brand-warning:         #f0b840;
@@ -11,8 +11,10 @@ $brand-danger:          #de5645;
 $brand-info:            #60d2e6;
 $brand-dark:            #444;
 
+
 // Scaffolding
 // -------------------------------
+
 $link-color:            $brand-primary !default;
 $link-hover-color:      darken($link-color, 15%) !default;
 

scss/ionic.scss

@@ -9,6 +9,7 @@
   "ionic/reset",
   "ionic/base",
   "ionic/grid",
+  "ionic/type",
 
   // Nav
   "ionic/bar",

scss/ionic/_reset.scss

@@ -1,6 +1,6 @@
 /**
 * Adapted from normalize.css and some reset.css. We don't care even one
-* bit about IE, so we don't need any hacks for that in here.
+* bit about old IE, so we don't need any hacks for that in here.
 * 
 * There are probably other things we could remove here, as well.
 *
@@ -120,16 +120,6 @@ a:hover {
    Typography
    ========================================================================== */
 
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari 5, and Chrome.
- */
-
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
 
 /**
  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.

scss/ionic/_type.scss

@@ -0,0 +1,146 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 ($line-height-computed / 2);
+}
+.lead {
+  margin-bottom: $line-height-computed;
+  font-size: ($font-size-base * 1.15);
+  font-weight: 200;
+  line-height: 1.4;
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: 14px base font * 85% = about 12px
+small   { font-size: 85%; }
+
+// Undo browser default styling
+cite    { font-style: normal; }
+
+// Alignment
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  small {
+    font-weight: normal;
+    line-height: 1;
+  }
+}
+
+h1,
+h2,
+h3 {
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+}
+h4,
+h5,
+h6 {
+  margin-top: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
+}
+
+h1, .h1 { font-size: floor($font-size-base * 2.60); } // ~36px
+h2, .h2 { font-size: floor($font-size-base * 2.15); } // ~30px
+h3, .h3 { font-size: ceil($font-size-base * 1.70); } // ~24px
+h4, .h4 { font-size: ceil($font-size-base * 1.25); } // ~18px
+h5, .h5 { font-size:  $font-size-base; }
+h6, .h6 { font-size: ceil($font-size-base * 0.85); } // ~12px
+
+h1 small, .h1 small { font-size: ceil($font-size-base * 1.70); } // ~24px
+h2 small, .h2 small { font-size: ceil($font-size-base * 1.25); } // ~18px
+h3 small, .h3 small,
+h4 small, .h4 small { font-size: $font-size-base; }
+
+
+// Description Lists
+dl {
+  margin-bottom: $line-height-computed;
+}
+dt,
+dd {
+  line-height: $line-height-base;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 0; // Undo browser default
+}
+
+// Blockquotes
+blockquote {
+  padding: ($line-height-computed / 2) $line-height-computed;
+  margin: 0 0 $line-height-computed;
+  border-left: 5px solid gray;
+  p {
+    font-size: ($font-size-base * 1.25);
+    font-weight: 300;
+    line-height: 1.25;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+  small {
+    display: block;
+    line-height: $line-height-base;
+    &:before {
+      content: '\2014 \00A0';// EM DASH, NBSP
+    }
+  }
+
+  // Float right with text-align: right
+  &.pull-right {
+    padding-right: 15px;
+    padding-left: 0;
+    border-right: 5px solid gray;
+    border-left: 0;
+    p,
+    small {
+      text-align: right;
+    }
+    small {
+      &:before {
+        content: '';
+      }
+      &:after {
+        content: '\00A0 \2014';// NBSP, EM DASH
+      }
+    }
+  }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+// Addresses
+address {
+  display: block;
+  margin-bottom: $line-height-computed;
+  font-style: normal;
+  line-height: $line-height-base;
+}

test/index.html

@@ -35,6 +35,15 @@
         <p><a class="button button-block button-default" href="popovers.html">Popovers</a></p>
         <p><a class="button button-block button-default" href="pull-to-refresh.html">Pull To Refresh</a></p>
         <p><a class="button button-block button-default" href="tab-bars.html">Tab Bars</a></p>
+        <hr>
+        <h1>I'm an H1 Element</h1>
+        <h2>I'm an H2 Element</h2>
+        <h3>I'm an H3 Element</h3>
+        <h4>I'm an H4 Element</h4>
+        <h5>I'm an H5 Element</h5>
+        <h6>I'm an H6 Element</h6>
+        <p>I'm a paragraph Element!</p>
+        <p>As am I'm a paragraph Element too.</p>
       </main>
 
     </section>