add 960px layout

4 files changed, 37 insertions, 12 deletions

diff --git a/demo/index.html b/demo/index.html
index f886414..be55664 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -6,9 +6,9 @@
     <link rel="stylesheet" href="../dist/spectre.css">
 </head>
 <body>
-    <section class="container">
+    <section class="container grid-960">
         <section class="typography">
-            <header class="text-center">headings</header>
+            <header class="text-center"><h4>headings</h4></header>
             <h1>H1 Title</h1>
             <h2>H2 Title</h2>
             <h3>H3 Title</h3>
@@ -16,17 +16,17 @@
             <h5>H5 Title</h5>
             <h6>H6 Title</h6>
 
-            <header class="text-center">paragraphs</header>
+            <header class="text-center"><h4>paragraphs</h4></header>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
-            <header class="text-center">blockquote</header>
+            <header class="text-center"><h4>blockquote</h4></header>
             <blockquote>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             </blockquote>
 
-            <header class="text-center">lists</header>
+            <header class="text-center"><h4>lists</h4></header>
             <ul class="list">
                 <li>list item 1</li>
                 <li>list item 2
@@ -51,7 +51,7 @@
             </ol>
         </section>
         <section class="layout">
-            <header class="text-center">flexbox layout</header>
+            <header class="text-center"><h4>flexbox layout</h4></header>
             <div class="columns">
                 <div class="column col-6">
                     First column
diff --git a/dist/spectre.css b/dist/spectre.css
index 3673bd7..2a18f31 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -505,6 +505,12 @@ ol ol {
   padding-left: 10px;
   padding-right: 10px;
 }
+.container.grid-960 {
+  width: 960px;
+}
+.container.grid-full {
+  width: 100%;
+}
 .columns {
   display: -webkit-box;
   display: -webkit-flex;
@@ -642,6 +648,12 @@ ol ol {
   position: absolute;
   left: 0;
 }
+.centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
 .mt-10 {
   margin-top: 10px;
 }
@@ -667,13 +679,13 @@ ol ol {
   margin-left: 5px;
 }
 .block {
-  display: block !important;
+  display: block;
 }
 .inline {
-  display: inline !important;
+  display: inline;
 }
 .inline-block {
-  display: inline-block !important;
+  display: inline-block;
 }
 .flex {
   display: -webkit-box;
diff --git a/src/layout.less b/src/layout.less
index 7879aff..d7f6557 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -5,6 +5,13 @@
   padding-left: 10px;
   padding-right: 10px;
   &:extend(.clearfix all);
+
+  &.grid-960 {
+    width: 960px;
+  }
+  &.grid-full {
+    width: 100%;
+  }
 }
 
 .columns {
diff --git a/src/utilities.less b/src/utilities.less
index eee854a..d49fe37 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -34,6 +34,12 @@
   .abs;
   left: 0;
 }
+.centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 .mt-10 {
   margin-top: 10px;
@@ -63,13 +69,13 @@
 
 // Display
 .block {
-  display: block !important;
+  display: block;
 }
 .inline {
-  display: inline !important;
+  display: inline;
 }
 .inline-block {
-  display: inline-block !important;
+  display: inline-block;
 }
 .flex {
   display: flex;