Add helper layout class to center content

docs/layout.md

@@ -32,6 +32,7 @@ The grid is pretty standard—you create rows with `.columns` and individual col
 - Create your outer row to clear the floated columns with `<div class="columns">`.
 - 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`).
+- Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class.
 
 In practice, your columns will look like the example below.
 

docs/utilities.md

@@ -47,6 +47,29 @@ Quickly float something to the left or right, and clear them later.
 </div>
 {% endexample %}
 
+## Centering content
+
+Center content if it's not taking up the full width of the container. Can be used on grid columns or any other elements.
+
+
+{% example html %}
+<div class="columns">
+  <div class="one-half column centered">
+    .one-half
+  </div>
+</div>
+
+<br />
+
+<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; }