ink changes

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 8867cda4117fddafde3b42e42c04b2cfb43aa323..bdf8d840e65eb7a2eaa75a6b8858c37b4f3ac680 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -1 +1,6 @@
 @import 'foundation';
+
+.docs-code-iframe {
+  width: 100%;
+  height: 200px;
+}
\ No newline at end of file

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 4ab212711a480d851e6108301c0ee394b2c05067..95494a6007052ce7489c21a36155f8f723096b44 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -1,23 +1,103 @@
 ---
 title: Button
-description: Button!
+description: Dynamic and effective calls to actions.
 sass: ./scss/ink/components/_button.scss
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic repellendus deserunt, tenetur amet dolorum, fugiat minima quisquam ducimus ad. Numquam magnam possimus quae corporis sint assumenda, sit vel harum repellendus?
+To get buttons that look awesome in most clients we make a table with the class <code>.button</code> that wraps your 
+<code>&lt;a&gt;</code> tag. Buttons expand to the full width of their container by default. You can contain the buttons in sub-grid or block-grid elements. 
 
+Check out this basic button:
 ```inky
-<center>
-  <row>
-    <column>
-      <table class="button">
-        <tr>
-          <td>
-            <a href="#">Button!</a>
-          </td>
-        </tr>
-      </table>
-    </column>
-  </row>
-</center>
+    <center>
+      <row>
+        <column>
+        <table class="button">
+          <tr>
+            <td>
+              <a href="#">Button!</a>
+            </td>
+          </tr>
+        </table>
+      </column>
+    </row>
+  </center>
+```
+
+You can quickly modify the size of our buttons by adding these classes:
+```inky
+    <center>
+      <row>
+        <column>
+        <table class="button tiny">
+          <tr>
+            <td>
+              <a href="#">Button!</a>
+            </td>
+          </tr>
+        </table>
+      </column>
+    </row>
+      <row>
+        <column>
+        <table class="button small">
+          <tr>
+            <td>
+              <a href="#">Button!</a>
+            </td>
+          </tr>
+        </table>
+      </column>
+    </row>
+      <row>
+        <column>
+        <table class="button large">
+          <tr>
+            <td>
+              <a href="#">Button!</a>
+            </td>
+          </tr>
+        </table>
+      </column>
+    </row>
+  </center>
+```
+
+You can also change the color using our color classes here:
+```inky
+    <center>
+      <row>
+        <column>
+        <table class="button secondary">
+          <tr>
+            <td>
+              <a href="#">Button!</a>
+            </td>
+          </tr>
+        </table>
+      </column>
+    </row>
+      <row>
+        <column>
+        <table class="button success">
+          <tr>
+            <td>
+              <a href="#">Button!</a>
+            </td>
+          </tr>
+        </table>
+      </column>
+    </row>
+      <row>
+        <column>
+        <table class="button warning">
+          <tr>
+            <td>
+              <a href="#">Button!</a>
+            </td>
+          </tr>
+        </table>
+      </column>
+    </row>
+  </center>
 ```

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index b1337a2c9b17900d96d7200a41ba9e3014b9301e..737f5ff56bc9a26f1befb14b65dcac949ff82b58 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -1,72 +1,19 @@
 <ul class="vertical menu-bar docs-menu">
-  <li class="docs-menu-title">Getting Started</li>
-  <li><a href="installation.html">Installation</a></li>
-  <li><a href="starter-projects.html">Starter Projects</a></li>
-  <li><a href="compatibility.html">Compatibility</a></li>
-  <li><a href="accessibility.html">Accessibility</a></li>
-  <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
+  <li class="docs-menu-title">Components</li>
+  <li><a href="">Alignment</a></li>
+  <li><a href="">Block Grid</a></li>
+  <li><a href="/button.html">Button</a></li>
+  <li><a href="">Callout</a></li>
+  <li><a href="">Global</a></li>
 
-  <li class="docs-menu-title">General</li>
-  <li><a href="global.html">Global Styles</a></li>
-  <li><a href="rtl.html">Right-to-Left Support</a></li>
-  <li><a href="sass.html">Sass</a></li>
-  <li><a href="javascript.html">JavaScript</a></li>
-  <li><a href="media-queries.html">Media Queries</a></li>
-  <li><a href="grid.html">Grid</a></li>
-  <li><a href="flex-grid.html">Flex Grid</a></li>
-  <li><a href="forms.html">Forms</a></li>
-  <li><a href="visibility.html">Visibility Classes</a></li>
-  <li><a href="float-classes.html">Float Classes</a></li>
+  <li class="docs-menu-title">Grid</li>
 
-  <li class="docs-menu-title">Typography</li>
-  <li><a href="typography-base.html">Base Styles</a></li>
-  <li><a href="typography-helpers.html">Helper Classes</a></li>
-  <li><a href="modular-scale.html">Modular Scale</a></li>
+  <li><a href="">Grid</a></li>
+  <li><a href="">Sass</a></li>
+  <li><a href="">Inline Lists</a></li>
+  <li><a href="">Media Queries</a></li>
+  <li><a href="">Thumbnails</a></li>
 
-  <li class="docs-menu-title">Controls</li>
-  <li><a href="button.html">Button</a></li>
-  <li><a href="button-group.html">Button Group</a></li>
-  <li><a href="close-button.html">Close Button</a></li>
-  <li><a href="range-slider.html">Range Slider</a></li>
-  <li><a href="switch.html">Switch</a></li>
-
-  <li class="docs-menu-title">Navigation</li>
-  <li><a href="accordion-menu.html">Accordion Menu</a></li>
-  <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-  <li><a href="drilldown.html">Drilldown</a></li>
-  <li><a href="dropdown.html">Dropdown</a></li>
-  <li><a href="magellan.html">Magellan</a></li>
-  <li><a href="menu-bar.html">Menu Bar</a></li>
-  <li><a href="pagination.html">Pagination</a></li>
-  <li><a href="responsive-menu.html">Responsive Menu</a></li>
-
-  <li class="docs-menu-title">Containers</li>
-  <li><a href="accordion.html">Accordion</a></li>
-  <li><a href="callout.html">Callout</a></li>
-  <li><a href="card.html">Card</a></li>
-  <li><a href="media-object.html">Media Object</a></li>
-  <li><a href="off-canvas.html">Off-canvas</a></li>
-  <li><a href="reveal.html">Reveal <small>Modal</small></a></li>
-  <li><a href="table.html">Table</a></li>
-  <li><a href="tabs.html">Tabs</a></li>
-
-  <li class="docs-menu-title">Media</li>
-  <li><a href="badge.html">Badge</a></li>
-  <li><a href="flex-video.html">Flex Video</a></li>
-  <li><a href="label.html">Label</a></li>
-  <li><a href="orbit.html">Orbit <small>Carousel</small></a></li>
-  <li><a href="progress-bar.html">Progress Bar</a></li>
-  <li><a href="thumbnail.html">Thumbnail</a></li>
-  <li><a href="tooltip.html">Tooltip</a></li>
-  
-  <li class="docs-menu-title">Plugins</li>
-  <li><a href="abide.html">Abide <small>Form Validation</small></a></li>
-  <li><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
-  <li><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
-  <li><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
-  <li class="docs-menu-ph"><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-
-  <li class="docs-menu-title">Sass</li>
-  <li><a href="sass-functions.html">Functions</a></li>
-  <li><a href="sass-mixins.html">Mixins</a></li>
-</ul>
\ No newline at end of file
+  <li><a href="">Type</a></li>
+  <li><a href="">Visibility</a></li>
+ 
\ No newline at end of file

diff --git a/lib/buildInkySample.js b/lib/buildInkySample.js
index a2e1976cc51a443c0d30bc53a8f66c0581f6def3..299546300748062fa5101cca7282e6109f59ad2b 100644 (file)
--- a/lib/buildInkySample.js
+++ b/lib/buildInkySample.js
@@ -35,7 +35,13 @@ var IFRAME_TEMPLATE = multiline(function() {/*
     <table class="body">
       <tr>
         <td class="center" align="center" valign="top">
-          {0}
+          <table class="container">
+            <tr>
+              <td>
+                {0}   
+              </td>
+            </tr>
+          </table>
         </td>
       </tr>
     </table>

diff --git a/scss/ink/components/_global.scss b/scss/ink/components/_global.scss
index 5a5da64942e3fc172f124dde27e1805d3dc0a947..39b0256c09fce55e0297d2fe5d585f29f666ca34 100755 (executable)
--- a/scss/ink/components/_global.scss
+++ b/scss/ink/components/_global.scss
@@ -56,6 +56,10 @@ $column-gutter: 20px !default;
 /// @type Number
 $container-width: 580px !default;
 
-// We use these to make sure border radius matches unless we want it different.
+/// Global raidus of radius-corners.
+/// @type Number
 $global-radius: 3px !default;
+
+/// Global rounded radius of rounded-corners.
+/// @type Number
 $global-rounded: 500px !default;