Add 'Base styles' section

primer · paddyduke · Oct 6, 2015 · Oct 6, 2015 · Oct 7, 2015 · Oct 7, 2015
commit 37cbec0ca7c2ce8cb14d21b698c0f2a4babb7655
diff --git a/docs/_includes/sidenav.html b/docs/_includes/sidenav.html
@@ -8,6 +8,9 @@ <h4 class="menu-title">
   <a class="menu-item {% if page.title == "Code style" %}selected{% endif %}" href="{{ site.baseurl }}/code-style/">
     Code style
   </a>
+  <a class="menu-item {% if page.title == "Base styles" %}selected{% endif %}" href="{{ site.baseurl }}/base-styles/">
+    Base styles
+  </a>
   <a class="menu-item {% if page.title == "Utilities" %}selected{% endif %}" href="{{ site.baseurl }}/utilities/">
     Utilities
   </a>

diff --git a/docs/base-styles.md b/docs/base-styles.md
@@ -0,0 +1,27 @@
+---
+layout: page
+title: Base styles
+---
+
+These are the base rules upon which everything in Origin is built.
+
+## HTML5 doctype
+
+Origin makes use of certain HTML elements and CSS properties that **require** the use of the HTML5 doctype. Include it at the beginning of all your views/pages.
+
+{% highlight html %}
+<!DOCTYPE html>
+<html lang="en">
+  ...
+</html>
+{% endhighlight %}
+
+## Box-sizing
+
+We reset `box-sizing` to `border-box` for every element in Origin. This allows us to more easily assign widths to elements that also have `padding` and `border`s.
+
+## Built on Normalize
+
+For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices.
+
+[**View the source `_base.scss` for more information**](https://github.com/fac/origin/blob/master/assets/scss/local/base/_base.scss)
diff --git a/docs/components.md b/docs/components.md
@@ -149,37 +149,3 @@ The appearance of dependencies must be configured using the interface they provi
 Controlling dimensions, margins, position, and inheritable styles of a
 component can be done _indirectly_. Add a class to its root element, or wrap
 it in another element.
-
-{% highlight scss %}
-/* Excerpt */
-
-.Excerpt {
-  /* ... */
-}
-
-/* Attaches to a nested component */
-
-.Excerpt-button {
-  display: inline-block;
-  margin-top: 20px;
-}
-
-/* Wraps a nested component */
-
-.Excerpt-wrapButton {
-  display: inline-block;
-  margin-top: 20px;
-}
-{% endhighlight %}
-
-{% highlight html %}
-<article class="Excerpt u-floatContainer">
-  {{! other implementation details }}
-
-  <read-button class="Excerpt-button">Read more</read-button>
-
-  <div class="Excerpt-wrapButton">
-    <read-button>Read more</read-button>
-  </div>
-</article>
-{% endhighlight %}