Merge pull request #9 from ianrose/gh-8-provide-default-styles-option…

…ally

gh-8 Provide default styles optionally

README.md

@@ -10,7 +10,7 @@ Set your type in Ems with modular scale, vertical rhythm, and responsive ratio b
  * It comes with a default 6px baseline to maintain rhythm on all block elements
  * It relies more on using Sass functions combined with vanilla CSS rules rather than mixins to style
  * It uses modular scale values to set font-size
- * It provides settings for adjusting headlines based on screen width
+ * It has optional default type rules, `_typesetted.scss`, that includes settings for adjusting headlines based on screen width
 
 ## How to setup
 
@@ -36,6 +36,7 @@ To start using Typesettings `@import` the `_typesettings.scss` partial into your
  $ms-ratio: 1.414;
  $paragraph-indent: true;
  $paragraph-justify: true;
+ $load-typesetted: true;
 
  @import "path/typesettings"; // Here is the _typesettings.scss partial
 

_typesetted.scss

@@ -0,0 +1,213 @@
+//==============================================================================
+// Default Type Styles
+//==============================================================================
+
+// [1] Sets the font-size of the project as a percentage. Making it easy to scale
+// up/down the whole project for specific media queries
+// [2] Stops iOS from scaling up text.
+html {
+  font-size: ($base-font-size / 16px) * 100%; // [1]
+  -webkit-text-size-adjust: 100%; // [2]
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: $font-serif;
+  font-weight: 400;
+  line-height: $base-line-height;
+  color: $text-color;
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-family: $font-sans;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+// [1] Applies a margin bottom that is a multiple of the vertical grid in EMs.
+// The first argument is the font size context and the second is multiple of the
+// vertical grid unit.
+// [2] Sets the type to one of the modular scale values and the second argument
+// sets a unitless line-height as a multiple of the vertical grid.
+// [3] A generic media query for tablet size ranges.
+// [4] Applies a margin bottom that is the same vertical grid value as the mobile
+// first rule.
+// [5] Sets the type to one of the modular scale values and the second argument
+// sets a unitless line-height as a multiple of the vertical grid.
+h1, .h1 {
+  margin-bottom: emRhythm(4, $ms-up2); // [1]
+  @include setType(6, $ms-up2); // [2]
+
+  @media (min-width: 43.75em) {
+    // [3]
+    margin-bottom: emRhythm(4, $ms-up3); // [4]
+    @include setType(8, $ms-up3); // [5]
+  }
+
+  @media (min-width: 56.25em) {
+    margin-bottom: emRhythm(4, $ms-up4);
+    @include setType(10, $ms-up4);
+  }
+}
+
+h2, .h2 {
+  margin-bottom: emRhythm(4, $ms-up1);
+  @include setType(5, $ms-up1);
+
+  @media (min-width: 43.75em) {
+    margin-bottom: emRhythm(4, $ms-up2);
+    @include setType(6, $ms-up2)
+  }
+
+  @media (min-width: 56.25em) {
+    margin-bottom: emRhythm(4, $ms-up3);
+    @include setType(8, $ms-up3);
+  }
+}
+
+h3, .h3 {
+  margin-bottom: emRhythm(4, $ms-up1);
+  @include setType(5, $ms-up1);
+
+  @media (min-width: 56.25em) {
+    margin-bottom: emRhythm(4, $ms-up2);
+    @include setType(6, $ms-up2);
+  }
+}
+
+h4, .h4 {
+  margin-bottom: emRhythm(4, $ms-up1);
+  @include setType(5, $ms-up1);
+}
+
+h5, .h5,
+h6, .h6 {
+  margin-bottom: emRhythm(4);
+  @include setType(4);
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: emRhythm(4);
+  padding-top: 0;
+  padding-bottom: 0;
+  max-width: emRhythm(96);
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  -o-hyphens: auto;
+  hyphens: auto;
+  word-wrap: break-word;
+
+  @media (min-width: 43.75em) {
+    @if $paragraph-justify {
+      text-align: justify;
+    }
+  }
+}
+
+@if $paragraph-indent {
+  p + p {
+    margin-top: emRhythm(-4);
+    text-indent: emRhythm(4);
+  }
+}
+
+small,
+.font-small {
+  @include setType(3, $ms-down1);
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: bold;
+}
+
+blockquote {
+  margin-top: emRhythm(4);
+  margin-bottom: emRhythm(4);
+  margin-left: emRhythm(-5);
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: emRhythm(4);
+  border-left: $base-vertical-unit solid lighten(#000, 50%);
+  font-family: $font-mono;
+  font-weight: bold;
+
+  footer {
+    cite {
+      &:before {
+        content: " – ";
+      }
+    }
+  }
+}
+
+pre,
+code {
+  font-family: $font-mono;
+}
+
+time,
+.time {
+  text-transform: uppercase;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: emRhythm(4);
+  margin-left: emRhythm(4);
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+ul ul,
+ol ol,
+dl dl {
+  margin-left: 0;
+}
+
+ul {
+  list-style: disc;
+}
+
+ol {
+  list-style: decimal;
+}
+
+// [1] https://developer.mozilla.org/en-US/docs/CSS/font-variant
+abbr {
+  font-variant: small-caps; // [1]
+  font-weight: 600;
+  text-transform: lowercase;
+}
+
+// Cursor changed to a question mark when it has a title
+abbr[title]:hover {
+  cursor: help;
+}
+
+// Creates horizontal rules that obey the baseline.
+// [1] Zero outs the user agent border
+hr {
+  margin-top: emRhythm(4);
+  margin-bottom: 0;
+  border: none; // [1]
+  border-top-color: $text-color;
+  border-top-style: solid;
+  @include rhythmBorderTop(1px, 4);
+}