Rewrote the typography sizing and spacing to use ems and rems instead…

… of px
sebnitu · Mar 30, 2015 · 478a18a · 478a18a
1 parent 8828325
commit 478a18a
Show file tree

Hide file tree

Showing 16 changed files with 110 additions and 131 deletions.
diff --git a/docs/css/baseweb.css b/docs/css/baseweb.css
@@ -68,9 +68,9 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
  * Headings
  */
 h1, h2, h3, h4, h5, h6 {
-  margin: 10px 0;
+  margin: 1rem 0;
   font-family: inherit;
-  font-weight: 600;
+  font-weight: bold;
   line-height: 1.5em;
   color: #303030; }
   h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
@@ -80,34 +80,29 @@ h1, h2, h3, h4, h5, h6 {
       color: #bc6bd3; }
 
 h1 {
-  font-size: 42px;
-  line-height: 50px; }
+  font-size: 3.5em; }
 
 h2 {
-  font-size: 34px;
-  line-height: 42px; }
+  font-size: 2.5em; }
 
 h3 {
-  font-size: 26px;
-  line-height: 34px; }
+  font-size: 1.75em; }
 
 h4 {
-  font-size: 18px;
-  line-height: 26px; }
+  font-size: 1.3em; }
 
 h5 {
-  font-size: 16px;
-  line-height: 22px; }
+  font-size: 1.15em; }
 
 h6 {
-  font-size: 14px;
-  line-height: 20px; }
+  font-size: 1.15em;
+  color: #909090; }
 
 /**
  * Paragraphs
  */
 p {
-  margin: 10px 0; }
+  margin: 1rem 0; }
 
 /**
  * Anchors
@@ -152,20 +147,18 @@ abbr[title], abbr[data-original-title] {
  * Stylistic Classes
  */
 .text-lead {
-  font-size: 18px;
-  line-height: 26px;
+  font-size: 1.3em;
   color: #303030; }
 
 .text-small {
-  font-size: 0.8em;
-  line-height: 1.5em; }
+  font-size: 0.8em; }
 
 .text-soften {
   font-weight: normal;
   color: #909090; }
 
 .text-harden {
-  font-weight: 600;
+  font-weight: bold;
   color: #303030; }
 
 /**
@@ -251,11 +244,11 @@ dl {
  */
 .list {
   list-style: none;
-  margin: 20px 0;
+  margin: 1rem 0;
   background: none; }
   .list > li {
     margin: 0;
-    padding: 10px;
+    padding: 1rem;
     background-clip: padding-box; }
     .list > li:after {
       content: '';
@@ -305,14 +298,14 @@ dl {
   @Blockquotes
 ==============================================================================*/
 blockquote {
-  margin: 15px 0;
-  padding: 10px 20px;
+  margin: 1rem 0;
+  padding: 1rem 2rem;
   background: rgba(0, 0, 0, 0.05);
   border-radius: 3px; }
   blockquote footer, blockquote .blockquote-footer {
     display: block;
     position: relative;
-    margin: 10px 0;
+    margin: 1rem 0;
     font-size: 100%; }
 
 /*==============================================================================
@@ -334,14 +327,14 @@ code {
   color: #d25992; }
 
 pre {
-  margin: 20px 0;
-  padding: 5px;
+  margin: 1.5rem 0;
+  padding: 0.75rem;
   overflow: auto;
   color: #303030; }
   pre code {
     display: block;
     margin: 0;
-    padding: 15px;
+    padding: 0.75rem;
     overflow: auto;
     white-space: pre;
     font-size: 100%;
@@ -359,7 +352,7 @@ table {
   border-spacing: 0;
   width: 100%;
   max-width: 100%;
-  margin: 20px 0;
+  margin: 1rem 0;
   overflow: auto; }
   table tr {
     vertical-align: top; }
@@ -375,11 +368,11 @@ table {
  * Base Modifiers Styles
  */
 .table {
-  margin: 20px 0;
+  margin: 1rem 0;
   background: none;
   border-collapse: separate; }
   .table td, .table th {
-    padding: 10px; }
+    padding: 1rem; }
 
 /**
  * Border Variations
@@ -407,10 +400,10 @@ table {
  * Padding Variations
  */
 .table-condensed td, .table-condensed th {
-  padding: 5px; }
+  padding: 0.5rem; }
 
 .table-expanded td, .table-expanded th {
-  padding: 15px; }
+  padding: 1.5rem; }
 
 /**
  * Miscellaneous Modifiers
@@ -469,7 +462,7 @@ table {
  * Responsive Tables
  */
 .table-responsive {
-  margin: 20px 0; }
+  margin: 1rem 0; }
   .table-responsive > table {
     margin: 0; }
   @media (max-width: 759px) {
@@ -483,7 +476,7 @@ table {
 ==============================================================================*/
 img {
   display: block;
-  margin: 10px 0;
+  margin: 1rem 0;
   max-width: 100%;
   height: auto; }
 
@@ -501,14 +494,14 @@ p .align-center {
 
 .align-left {
   float: left;
-  margin: 10px 15px 10px 0; }
+  margin: 1rem 1.5rem 1rem 0; }
 
 p .align-left {
   margin-top: 0; }
 
 .align-right {
   float: right;
-  margin: 10px 0 10px 15px; }
+  margin: 1rem 0 1rem 1.5rem; }
 
 p .align-right {
   margin-top: 0; }
@@ -525,7 +518,7 @@ p .align-right {
 .img-polaroid {
   background: #ffffff;
   background-clip: padding-box;
-  padding: 5px;
+  padding: 0.5rem;
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
 
@@ -537,7 +530,7 @@ hr {
   height: 0;
   width: 100%;
   clear: both;
-  margin: 20px 0;
+  margin: 1.5rem 0;
   padding: 0;
   background: none;
   border: 0 none;
@@ -1802,7 +1795,7 @@ body {
 
 .example-content-input pre {
   margin: 0;
-  padding: 20px;
+  padding: 2rem;
   background: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 0; }

diff --git a/docs/css/baseweb.min.css b/docs/css/baseweb.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -484,8 +484,8 @@ <h1 class="docs-header">List Variables</h1>
   </li>
   <li><code>$lists('nth')</code> <code class="right value">odd</code></li>
 
-  <li><code>$lists('margin')</code> <code class="right value">20px 0</code></li>
-  <li><code>$lists('padding')</code> <code class="right value">10px</code></li>
+  <li><code>$lists('margin')</code> <code class="right value">1rem 0</code></li>
+  <li><code>$lists('padding')</code> <code class="right value">1rem</code></li>
 
   <li><code>$lists('background')</code> <code class="right value">none</code></li>
   <li><code>$lists('background-stripe')</code> <code class="right value">rgba($black, 0.05)</code></li>
@@ -827,10 +827,10 @@ <h1 class="docs-header">Table Variables</h1>
   <li><code>$tables('nth')</code> <code class="right value">odd</code></li>
   <li><code>$tables('stripe')</code> <code class="right value">horizontal</code></li>
 
-  <li><code>$tables('margin')</code> <code class="right value">20px 0</code></li>
-  <li><code>$tables('padding')</code> <code class="right value">10px</code></li>
-  <li><code>$tables('padding-condensed')</code> <code class="right value">5px</code></li>
-  <li><code>$tables('padding-expanded')</code> <code class="right value">15px</code></li>
+  <li><code>$tables('margin')</code> <code class="right value">1rem 0</code></li>
+  <li><code>$tables('padding')</code> <code class="right value">1rem</code></li>
+  <li><code>$tables('padding-condensed')</code> <code class="right value">0.1rem</code></li>
+  <li><code>$tables('padding-expanded')</code> <code class="right value">1.5rem</code></li>
 
   <li><code>$tables('background')</code> <code class="right value">none</code></li>
   <li><code>$tables('background-stripe')</code> <code class="right value">rgba($black, 0.05)</code></li>

diff --git a/docs/scss/custom/_tpl-examples.scss b/docs/scss/custom/_tpl-examples.scss
@@ -157,7 +157,7 @@
 
   pre {
     margin: 0;
-    padding: 20px;
+    padding: 2rem;
     background: none;
     border-bottom: 1px solid rgba($black, 0.1);
     @include border-radius(0);

diff --git a/docs/templates/pages/elements/lists.mustache b/docs/templates/pages/elements/lists.mustache
@@ -72,8 +72,8 @@
   </li>
   <li><code>$lists('nth')</code> <code class="right value">odd</code></li>
 
-  <li><code>$lists('margin')</code> <code class="right value">20px 0</code></li>
-  <li><code>$lists('padding')</code> <code class="right value">10px</code></li>
+  <li><code>$lists('margin')</code> <code class="right value">1rem 0</code></li>
+  <li><code>$lists('padding')</code> <code class="right value">1rem</code></li>
 
   <li><code>$lists('background')</code> <code class="right value">none</code></li>
   <li><code>$lists('background-stripe')</code> <code class="right value">rgba($black, 0.05)</code></li>

diff --git a/docs/templates/pages/elements/tables.mustache b/docs/templates/pages/elements/tables.mustache
@@ -62,10 +62,10 @@
   <li><code>$tables('nth')</code> <code class="right value">odd</code></li>
   <li><code>$tables('stripe')</code> <code class="right value">horizontal</code></li>
 
-  <li><code>$tables('margin')</code> <code class="right value">20px 0</code></li>
-  <li><code>$tables('padding')</code> <code class="right value">10px</code></li>
-  <li><code>$tables('padding-condensed')</code> <code class="right value">5px</code></li>
-  <li><code>$tables('padding-expanded')</code> <code class="right value">15px</code></li>
+  <li><code>$tables('margin')</code> <code class="right value">1rem 0</code></li>
+  <li><code>$tables('padding')</code> <code class="right value">1rem</code></li>
+  <li><code>$tables('padding-condensed')</code> <code class="right value">0.1rem</code></li>
+  <li><code>$tables('padding-expanded')</code> <code class="right value">1.5rem</code></li>
 
   <li><code>$tables('background')</code> <code class="right value">none</code></li>
   <li><code>$tables('background-stripe')</code> <code class="right value">rgba($black, 0.05)</code></li>