Add Responsive container to the Docs picturepan2#222

trilbymedia · Jun 13, 2017 · 7e73f38 · 7e73f38
1 parent aba0d05
commit 7e73f38
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/docs/layout.html b/docs/layout.html
@@ -226,11 +226,24 @@
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-3&quot;</span>&gt;col-xs-3&lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+          <header class="text-center"><h4>Responsive container</h4></header>
+          <div class="notes">
+            <p>The responsive layout also provides fixed-width containers. Use <code>grid-480</code>, <code>grid-960</code> or <code>grid-1280</code> to <code>container</code> for a fixed-width container with the specific max-width.</p>
+          </div>
+
+<!-- layout example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container grid-960&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
+    ...
+  &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
           <header class="text-center"><h4>Responsive visibility</h4></header>
           <div class="notes">
-            <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p>
+            <p>The responsive visibility utilities help show and hide elements on specific viewport sizes. </p>
           </div>
           <table class="docs-table table text-center">
             <thead>