Merge branch 'master' into bump_v

_config.yml

@@ -1,4 +1,3 @@
-# Dependencies
 markdown: kramdown
 highlighter: rouge
 
@@ -9,6 +8,8 @@ permalink: pretty
 source: docs
 baseurl: ""
 
+version: 2.0.3
+
 sass:
   sass_dir: ../
   style: compressed

docs/_layouts/default.html

@@ -72,7 +72,7 @@
 
       <footer class="footer">
         Copyright GitHub {{ site.time | date: '%Y' }}.<br>
-        Created and maintained by the CSS team at GitHub.
+        Created and maintained by the CSS team at GitHub. <strong>Currently v{{ site.version }}.</strong>
       </footer>
     </div>
 

docs/docs.scss

@@ -217,6 +217,10 @@ body {
   line-height: 1.75;
   color: #7a7a7a;
   border-top: 1px solid #eee;
+
+  strong {
+    color: #333;
+  }
 }
 
 

docs/layout.md

@@ -26,6 +26,8 @@ The container applies `width: 980px;` and uses horizontal `margin`s to center it
 
 ## Grid
 
+### How it works
+
 The grid is pretty standard—you create rows with `.columns` and individual columns with a column class and fraction class. Here's how it works:
 
 - Add a `.container` to encapsulate everything and provide ample horizontal gutter space.
@@ -33,6 +35,8 @@ The grid is pretty standard—you create rows with `.columns` and individual col
 - Add your columns with individual `<div class="column">`s.
 - Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`).
 
+### Demo
+
 In practice, your columns will look like the example below.
 
 {% example html %}
@@ -74,3 +78,15 @@ In practice, your columns will look like the example below.
   </div>
 </div>
 {% endexample %}
+
+### Centered
+
+Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class.
+
+{% example html %}
+<div class="columns">
+  <div class="one-half column centered">
+    .one-half
+  </div>
+</div>
+{% endexample %}

docs/utilities.md

@@ -47,6 +47,20 @@ Quickly float something to the left or right, and clear them later.
 </div>
 {% endexample %}
 
+## Centering content
+
+Easily center **block level content** if it's not taking up the full width of the parent. Can be used [on grid columns](/layout/#centered) or any other elements.
+
+{% example html %}
+<nav class="menu centered">
+  <a class="menu-item selected" href="#">Account</a>
+  <a class="menu-item" href="#">Profile</a>
+  <a class="menu-item" href="#">Emails</a>
+  <a class="menu-item" href="#">Notifications</a>
+</nav>
+{% endexample %}
+
+
 ## Text alignment
 
 Change the `text-align` on elements with a class.

scss/_utility.scss

@@ -9,6 +9,17 @@
 .left { float: left; }
 
 
+// Layout
+
+// Centers content horizontally. Can be used inside or outside the grid.
+.centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
 // Text alignment
 .text-right { text-align: right; }