assets/kitchensink.html in edge_framework-1.4.1 vs assets/kitchensink.html in edge_framework-2.0.0.a
- old
+ new
@@ -22,15 +22,16 @@
<body>
<div id="main-wrapper">
<!-- <header class="top-bar">
</header> -->
+
<!-- <div class="row" data-page="vertical-rhythm">
- <div class="large-12 columns">
+ <div class="large-12 column">
<article class="blog-post baseline">
<div class="row">
- <div class="large-6 columns">
+ <div class="large-6 column">
<div class="typo-wrapper">
<h1>Unordered List</h1>
<ul class="bullet-list">
<li>Lorem ipsum dolor sit</li>
<li>
@@ -43,11 +44,11 @@
<li>Consequatur ipsum a aut iusto tempore</li>
<li>Impedit sint nulla nobis suscipit rem aspernatur</li>
</ul>
</div>
</div>
- <div class="large-6 columns">
+ <div class="large-6 column">
<div class="typo-wrapper">
<h1>Ordered List</h1>
<ol>
<li>Lorem ipsum dolor sit.</li>
<li> Eligendi, eos, voluptates, ducimus fugit
@@ -62,11 +63,11 @@
</ol>
</div>
</div>
</div>
<div class="row">
- <div class="large-6 small-9 columns">
+ <div class="large-6 small-9 column">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
</p>
<p>
@@ -106,11 +107,11 @@
</table>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
</p>
</div>
- <div class="large-3 small-3 columns">
+ <div class="large-3 small-3 column">
<div class="sidebar">
<h2>SIDEBAR</h2>
<p>
<em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, autem.</em>
</p>
@@ -139,14 +140,14 @@
<div class="box1" data-animate="fadein 500"></div>
</div>
</section> -->
<!-- <div class="row" data-page="typography">
- <div class="large-12 columns">
+ <div class="large-12 column">
<article>
<div class="row">
- <div class="large-6 columns">
+ <div class="large-6 column">
<h1>Unordered List</h1>
<ul>
<li>Lorem ipsum dolor sit</li>
<li>
Consectetur <a>adipisicing</a> elit
@@ -157,11 +158,11 @@
</li>
<li>Consequatur ipsum a aut iusto tempore</li>
<li>Impedit sint nulla nobis suscipit rem aspernatur</li>
</ul>
</div>
- <div class="large-6 columns">
+ <div class="large-6 column">
<h1>Ordered List</h1>
<ol>
<li>Lorem ipsum dolor sit.</li>
<li> Eligendi, eos, voluptates, ducimus fugit
<ol>
@@ -176,11 +177,11 @@
<li>Minima voluptatum eos sit a recusandae eligendi</li>
</ol>
</div>
</div>
<div class="row">
- <div class="large-6 small-9 columns">
+ <div class="large-6 small-9 column">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
</p>
<p>
@@ -195,11 +196,11 @@
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
</p>
</div>
- <div class="large-3 small-3 columns">
+ <div class="large-3 small-3 column">
<div class="sidebar">
<h2>SIDEBAR</h2>
<p>
<em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, autem.</em>
</p>
@@ -294,11 +295,11 @@
</div>
</div> -->
<!--
<div class="row" data-page="code">
- <div class="large-12 columns">
+ <div class="large-12 column">
<h1>EDGE Code</h1>
<h3>Markup</h3>
<pre class="line-numbers" data-lang="markup"><code>
<pre class="line-numbers" data-lang="markup" data-line="7"><code>
Unlike other code-highlighter, you don't need to escape < into &lt;
@@ -343,486 +344,419 @@
</code></pre>
</div>
</div> -->
<!-- <div class="row" data-page="tile">
- <div class="large-12 columns">
+ <div class="large-12 column">
<div class="demo-tile">
<h1>Tile</h1>
- <ul class="tile-7 small-tile-5">
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- </ul>
+ <h-tile class="block-7 small-block-4">
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ </h-tile>
<h2>Tile Collapse</h2>
- <ul class="tile-5 small-tile-3 collapse">
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- </ul>
+ <h-tile class="block-5 small-block-3 collapse">
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ </h-tile>
</div>
</div>
</div> -->
-<div class="row" data-page="custom-tile">
- <div class="large-12 columns">
+<!-- <div class="row" data-page="custom-tile">
+ <div class="large-12 column">
<div class="demo-tile">
<h1>Custom Tile</h1>
- <ul class="custom-tile-1">
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- </ul>
+ <h-tile class="ctile-1">
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ </h-tile>
<h2>Custom Tile Collapsed</h2>
- <ul class="custom-tile-2">
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- </ul>
+ <h-tile class="ctile-2">
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ </h-tile>
<h2>Custom Tile Mini</h2>
- <ul class="custom-tile-3">
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- <li><p>1</p></li>
- </ul>
+ <h-tile class="ctile-3">
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ <h-ti><p>1</p></h-ti>
+ </h-tile>
</div>
</div>
-</div>
+</div> -->
-<!-- <div data-page="grid">
- <div>
- <div class="demo-grid">
- <h1>Grid</h1>
- <div class="row">
- <div class="large-4 small-4 columns"><p>l4 s4</p></div>
- <div class="large-4 small-4 columns"><p>l4 s4</p></div>
- <div class="large-4 small-4 columns"><p>l4 s4</p></div>
- </div>
- <div class="row">
- <div class="large-6 small-9 columns"><p>l6</p></div>
- <div class="large-6 small-3 columns"><p>l6</p></div>
- </div>
-
- <h1>Collapsed Grid</h1>
- <div class="row collapse">
- <div class="large-6 small-6 columns"><p>l6 s6</p></div>
- <div class="large-6 small-6 columns"><p>l6 s6</p></div>
- </div>
- <div class="row collapse">
- <div class="large-8 columns"><p>8</p></div>
- <div class="large-4 columns"><p>4</p></div>
- </div>
+<section data-page="grid">
+ <div class="demo-grid">
+ <h1>Grid</h1>
+ <h-row>
+ <h-column class="large-4 small-4"><p>l4 s4</p></h-column>
+ <h-column class="large-4 small-4"><p>l4 s4</p></h-column>
+ <h-column class="large-4 small-4"><p>l4 s4</p></h-column>
+ </h-row>
+ <h-row>
+ <h-column class="large-6 small-9"><p>l6 s9</p></h-column>
+ <h-column class="large-6 small-3"><p>l6 s3</p></h-column>
+ </h-row>
+
+ <h1>Collapsed Grid</h1>
+ <h-row class="collapse">
+ <h-column class="large-6 small-6"><p>l6 s6</p></h-column>
+ <h-column class="large-6 small-6"><p>l6 s6</p></h-column>
+ </h-row>
+ <h-row class="collapse">
+ <h-column class="large-8"><p>l8</p></h-column>
+ <h-column class="large-4"><p>l4</p></h-column>
+ </h-row>
- <h1>Nested Collapsed vs. Nested</h1>
- <div class="row">
- <div class="large-6 small-6 columns">
- <p>l6 s6</p>
- <div class="row collapse">
- <div class="large-9 small-6 column">
- <p>l9 s6</p>
- </div>
- <div class="large-3 small-6 column">
- <p>l3 s6</p>
- </div>
- </div>
- </div>
- <div class="large-6 small-6 columns">
- <p>l6 s6</p>
- <div class="row">
- <div class="large-9 small-6 column">
- <p>l9 s6</p>
- </div>
- <div class="large-3 small-6 column">
- <p>l3 s6</p>
- </div>
- </div>
- </div>
- </div>
-
+ <h1>Nested Variation</h1>
+ <h-row>
+ <h3>normal then normal</h3>
+ <h-column class="large-6">
+ <p>l6</p>
+ <h-row>
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-8"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-2"><p>l2</p></h-column>
+ </h-row>
- <h1>Offset and Source Ordering</h1>
- <div class="row">
- <div class="large-3 small-5 columns">
- <p>
- <span class="hide-for-small">large-3</span><span class="hide-for-large">small-5</span>
- </p>
- </div>
- <div class="large-6 large-offset-3 small-5 columns">
- <p>
- <span class="hide-for-small">large-6 offset-3</span><span class="hide-for-large">small-5</span>
- </p>
- </div>
- </div>
- <p>collapsed</p>
- <div class="row collapse">
- <div class="large-3 large-offset-3 small-5 columns">
- <p>
- <span class="hide-for-small">large-3 offset-3</span><span class="hide-for-large">small-5</span>
- </p>
- </div>
- <div class="large-6 small-5 small-offset-2 columns">
- <p>
- <span class="hide-for-small">large-6</span><span class="hide-for-large">small-5 offset-2</span>
- </p>
- </div>
- </div>
- <div class="row">
- <div class="large-3 push-9 columns"><p>push-9</p></div>
- <div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
- </div>
- <div class="row collapse">
- <p>collapsed</p>
- <div class="large-3 push-9 columns"><p>push-9</p></div>
- <div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
- </div>
-
- <h1>Nested Grid</h1>
- <div class="row">
- <div class="large-12 columns">
- <p>12</p>
- <div class="row">
- <div class="large-8 columns">
- <p>8</p>
- <div class="row">
- <div class="large-6 columns"><p>6</p></div>
- <div class="large-6 columns"><p>6</p></div>
- </div>
-
- </div>
- <div class="large-4 columns">
- <p>4</p>
- <div class="row">
- <div class="large-7 columns"><p>7</p></div>
- <div class="large-5 columns"><p>5</p></div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <h-row class="collapse">
+ <h3>collapse then collapse</h3>
+ <h-column class="large-6">
+ <p>l6</p>
+ <h-row class="collapse">
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-8"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-2"><p>l2</p></h-column>
+ </h-row>
- <h1>Responsive Nested Grid</h1>
- <div class="row">
- <div class="large-12 small-12 columns">
- <p>12-12</p>
- <div class="row">
- <div class="large-8 small-8 columns">
- <p>8-8</p>
- <div class="row">
- <div class="large-6 small-9 columns"><p>6-9</p></div>
- <div class="large-6 small-3 columns"><p>6-3</p></div>
- </div>
- </div>
- <div class="large-4 small-4 columns">
- <p>4-4</p>
- <div class="row">
- <div class="large-7 small-7 columns"><p>7-7</p></div>
- <div class="large-5 small-5 columns"><p>5-5</p></div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <h1>Responsive offset and Centering</h1>
- <div class="row">
- <div class="large-8 large-offset-2 small-5 small-offset-3 columns">
- <p>large-8 large-offset-2 small-5 off-3</p>
- </div>
- </div>
- <div class="row">
- <div class="large-6 large-centered small-8 columns">
- <p>large-6 large-centered small-8 small-centered</p>
- </div>
- </div>
-
- </div>
- </div>
-</div> -->
+ <h-row>
+ <h3>normal then collapse</h3>
+ <h-column class="large-6">
+ <p>l6</p>
+ <h-row class="collapse">
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-8"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-2"><p>l2</p></h-column>
+ </h-row>
-<!-- <section class="row" data-page="visibility">
- <div class="large-12 column">
- <h2>Using the Class</h2>
- <div class="visibility-class">
- <p class="hide-for-large">This is hidden on large</p>
- <p class="hide-for-small">This is hidden on small and mini</p>
- <p class="hide-for-mini">This is hidden on mini</p>
- <p class="show-for-large">This is shown for large</p>
- <p class="show-for-small">This is shown for small and mini</p>
- <p class="show-for-mini">This is shown for mini</p>
- </div>
+ <h-row class="collapse">
+ <h3>collapse then normal</h3>
+ <h-column class="large-6">
+ <p>l6</p>
+ <h-row>
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-8"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="large-4"><p>l4</p></h-column>
+ <h-column class="large-2"><p>l2</p></h-column>
+ </h-row>
- <h2>Span Visibility</h2>
- <div class="visibility-span">
- <p>This is <span class="hide-for-large">hidden on large</span></p>
- <p>This is <span class="hide-for-small">hidden on small and mini</span></p>
- <p>This is <span class="hide-for-mini">hidden on mini</span></p>
- <p>This is <span class="show-for-large">shown for large</span></p>
- <p>This is <span class="show-for-small">shown for small and mini</span></p>
- <p>This is <span class="show-for-mini">shown for mini</span></p>
- </div>
+ <h1>Nested Collapsed vs. Nested</h1>
+ <h-row>
+ <h-column class="large-6 small-6">
+ <p>l6 s6</p>
+ <h-row class="collapse">
+ <h-column class="large-9 small-6">
+ <p>l9 s6</p>
+ </h-column>
+ <h-column class="large-3 small-6">
+ <p>l3 s6</p>
+ </h-column>
+ </h-row>
+ </h-column>
- <h2>Using the Mixin</h2>
- <div class="visibility-mixin">
- <p class="hfl">This is hidden on large</p>
- <p class="hfs">This is hidden on small and mini</p>
- <p class="hfm">This is hidden on mini</p>
- <p class="sfl">This is shown for large</p>
- <p class="sfs">This is shown for small and mini</p>
- <p class="sfm">This is shown for mini</p>
- </div>
+ <h-column class="large-6 small-6">
+ <p>l6 s6</p>
+ <h-row>
+ <h-column class="large-9 small-6">
+ <p>l9 s6</p>
+ </h-column>
+ <h-column class="large-3 small-6">
+ <p>l3 s6</p>
+ </h-column>
+ </h-row>
+ </h-column>
+ </h-row>
+
- <h2>Table Visibility</h2>
- <div class="visibility-table">
- <table border="1" class="hide-for-large">
- <tr>
- <td>hide-for-large</td>
- </tr>
- </table>
- <table border="1" class="hide-for-small">
- <tr>
- <td>hide-for-small</td>
- </tr>
- </table>
- <table border="1" class="hide-for-mini">
- <tr>
- <td>hide-for-mini</td>
- </tr>
- </table>
- <table border="1" class="show-for-large">
- <tr>
- <td>show-for-large</td>
- </tr>
- </table>
- <table border="1" class="show-for-small">
- <tr>
- <td>show-for-small</td>
- </tr>
- </table>
- <table border="1" class="show-for-mini">
- <tr>
- <td>show-for-mini</td>
- </tr>
- </table>
- </div>
+ <h1>Offset and Source Ordering</h1>
+ <h-row>
+ <h-column class="large-3 small-5">
+ <p>
+ l3 s5
+ </p>
+ </h-column>
+ <h-column class="large-6 offset-3 small-5">
+ <p>
+ l6 o3 - s5
+ </p>
+ </h-column>
+ </h-row>
- <h2>Td Visibility</h2>
- <div class="visibility-td">
- <table border="1">
- <tr>
- <td>This is</td>
- <td class="hide-for-large">hide-for-large</td>
- </tr>
- </table>
- <table border="1">
- <tr>
- <td>This is</td>
- <td class="hide-for-small">hide-for-small</td>
- </tr>
- </table>
- <table border="1">
- <tr>
- <td>This is</td>
- <td class="hide-for-mini">hide-for-mini</td>
- </tr>
- </table>
- <table border="1">
- <tr>
- <td>This is</td>
- <td class="show-for-large">show-for-large</td>
- </tr>
- </table>
- <table border="1" >
- <tr>
- <td>This is</td>
- <td class="show-for-small">show-for-small</td>
- </tr>
- </table>
- <table border="1" >
- <tr>
- <td>This is</td>
- <td class="show-for-mini">show-for-mini</td>
- </tr>
- </table>
- </div>
+ <p>collapsed</p>
+ <h-row class="collapse">
+ <h-column class="large-3 large-offset-3 small-5">
+ <p>
+ l3 o3 - s5
+ </p>
+ </h-column>
+ <h-column class="large-6 small-5 small-offset-2">
+ <p>
+ l6 - s5 so2
+ </p>
+ </h-column>
+ </h-row>
+ <h1>Nested Grid</h1>
+ <h-row>
+ <h-column class="large-12">
+ <p>l12</p>
+ <h-row>
+ <h-column class="large-8">
+ <p>l8</p>
+ <h-row>
+ <h-column class="large-6"><p>l6</p></h-column>
+ <h-column class="large-6"><p>l6</p></h-column>
+ </h-row>
+
+ </h-column>
+ <h-column class="large-4">
+ <p>l4</p>
+ <h-row>
+ <h-column class="large-7"><p>l7</p></h-column>
+ <h-column class="large-5"><p>l5</p></h-column>
+ </h-row>
+ </h-column>
+ </h-row>
+ </h-column>
+ </h-row>
+
+ <h1>Responsive Nested Grid</h1>
+ <h-row>
+ <h-column class="large-12 small-12">
+ <p>l12 s12</p>
+ <h-row>
+ <h-column class="large-8 small-8">
+ <p>l8 s8</p>
+ <h-row>
+ <h-column class="large-6 small-9"><p>l6 s9</p></h-column>
+ <h-column class="large-6 small-3"><p>l6 s3</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="large-4 small-4">
+ <p>l4 s4</p>
+ <h-row>
+ <h-column class="large-7 small-7"><p>l7 s7</p></h-column>
+ <h-column class="large-5 small-5"><p>l5 s5</p></h-column>
+ </h-row>
+ </h-column>
+ </h-row>
+ </h-column>
+ </h-row>
+
+ <h1>Responsive offset and Centering</h1>
+ <h-row>
+ <h-column class="large-8 offset-2 small-5 small-offset-3">
+ <p>l8 o2 - s5 so3</p>
+ </h-column>
+ </h-row>
+ <h-row>
+ <h-column class="large-6 centered small-8">
+ <p>l6 c - s8 sc</p>
+ </h-column>
+ </h-row>
+
</div>
</section>
- -->
-<!-- <section class="row" data-page="custom-grid">
- <div class="large-12 column">
- <div class="demo-grid">
-
- <h1>Demo Custom Grid</h1>
- <h3>Large (L) only</h3>
- <div class="row">
- <div class="cgrid-1 column">
- <p>l5</p>
- </div>
- <div class="cgrid-2 column">
- <p>l7</p>
- </div>
- </div>
- <h3>L - Small (S)</h3>
- <div class="row">
- <div class="cgrid-a1 column">
- <p>l5 s10</p>
- </div>
- <div class="cgrid-a2 column">
- <p>l7 s2</p>
- </div>
- </div>
+<section class="demo-grid" data-page="custom-grid">
+
+ <h1>Custom Grid</h1>
+ <ul>
+ <li>L = Large</li>
+ <li>S = Small</li>
+ <li>M = Mini</li>
+ <li>O = Offset</li>
+ <li>C = Collapsed</li>
+ </ul>
- <h3>Centering and Small uncentering</h3>
- <div class="row">
- <div class="cgrid-center column">
- <p>l-center s-uncenter</p>
- </div>
- </div>
+ <h3>L only</h3>
+ <h-row>
+ <h-column class="cgrid-l1">
+ <p>l5</p>
+ </h-column>
+ <h-column class="cgrid-l2">
+ <p>l7</p>
+ </h-column>
+ </h-row>
+
+ <h3>L - S</h3>
+ <h-row>
+ <h-column class="cgrid-ls1">
+ <p>l5 s10</p>
+ </h-column>
+ <h-column class="cgrid-ls2">
+ <p>l7 s2</p>
+ </h-column>
+ </h-row>
- <h3>L-S-Mini (M) Collapse</h3>
- <div class="row collapse">
- <div class="cgrid-b1 column">
- <p>l10 s8 m6</p>
- </div>
- <div class="cgrid-b2 column">
- <p>l2 s4 m6</p>
- </div>
- </div>
+ <h3>Center - S uncentering</h3>
+ <h-row>
+ <h-column class="cgrid-c">
+ <p>l-center s-uncenter</p>
+ </h-column>
+ </h-row>
- <h3>L Offset (O) - S</h3>
- <div class="row">
- <div class="cgrid-c1 column">
- <p>l6 lo4 s6</p>
- </div>
- <div class="cgrid-c2 column">
- <p>l2 s6</p>
- </div>
- </div>
+ <h3>L - S - M</h3>
+ <h-row>
+ <h-column class="cgrid-lsm1">
+ <p>l4 s6 m8</p>
+ </h-column>
+ <h-column class="cgrid-lsm2">
+ <p>l8 s6 m4</p>
+ </h-column>
+ </h-row>
- <h3>LO-SO</h3>
- <div class="row">
- <div class="cgrid-d1 column">
- <p>l3 lo3 s4 so4</p>
- </div>
- <div class="cgrid-d2 column">
- <p>l3 s4</p>
- </div>
- </div>
+ <h3>LO - S</h3>
+ <h-row>
+ <h-column class="cgrid-los1">
+ <p>l6 o4 - s6</p>
+ </h-column>
+ <h-column class="cgrid-los2">
+ <p>l2 s6</p>
+ </h-column>
+ </h-row>
- <h3>LO-SO-M</h3>
- <div class="row">
- <div class="cgrid-e1 column">
- <p>l3 lo3 s4 so4 m6</p>
- </div>
- <div class="cgrid-e2 column">
- <p>l3 s4 m6</p>
- </div>
- </div>
+ <h3>LO - SO - M</h3>
+ <h-row>
+ <h-column class="cgrid-losom1">
+ <p>l10 o2 - s6 so6 - m4</p>
+ </h-column>
+ </h-row>
- <h3>LO-SO-MO</h3>
- <div class="row">
- <div class="cgrid-f1 column">
- <p>l3 lo3 s4 so4 m5 mo1</p>
- </div>
- <div class="cgrid-f2 column">
- <p>l3 s4 m6</p>
- </div>
- </div>
+ <h1>Nesting</h1>
+ <h-row>
+ <h3>normal then normal</h3>
+ <h-column class="cgrid-nest1">
+ <p>l6</p>
+ <h-row>
+ <h-column class="cgrid-nest1-1"><p>l4</p></h-column>
+ <h-column class="cgrid-nest1-2"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="cgrid-nest2"><p>l4</p></h-column>
+ <h-column class="cgrid-nest3"><p>l2</p></h-column>
+ </h-row>
- <h3>L Source Ordering</h3>
- <div class="row">
- <div class="cgrid-g1 column">
- <p>First col, pushed 8</p>
- </div>
- <div class="cgrid-g2 column">
- <p>Second col, pulled 4</p>
- </div>
- </div>
+ <h-row class="cgrid-c">
+ <h3>collapse then collapse</h3>
+ <h-column class="cgrid-nest1">
+ <p>l6</p>
+ <h-row class="cgrid-c">
+ <h-column class="cgrid-nest1-1"><p>l4</p></h-column>
+ <h-column class="cgrid-nest1-2"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="cgrid-nest2"><p>l4</p></h-column>
+ <h-column class="cgrid-nest3"><p>l2</p></h-column>
+ </h-row>
- <h3>Nesting</h3>
- <div class="row">
- <div class="cgrid-h1 column">
- <p>l8 s8</p>
- <div class="row">
- <div class="cgrid-h1-1 column">
- <p>l5 s5</p>
- </div>
- <div class="cgrid-h1-2 column">
- <p>l7 s7</p>
- </div>
- </div>
- </div>
- <div class="cgrid-h2 column">
- <p>l8 s4</p>
- <div class="row">
- <div class="cgrid-h2-1 column">
- <p>l6 s6 center</p>
- </div>
- </div>
- </div>
- </div>
+ <h-row>
+ <h3>normal then collapse</h3>
+ <h-column class="cgrid-nest1">
+ <p>l6</p>
+ <h-row class="cgrid-c">
+ <h-column class="cgrid-nest1-1"><p>l4</p></h-column>
+ <h-column class="cgrid-nest1-2"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="cgrid-nest2"><p>l4</p></h-column>
+ <h-column class="cgrid-nest3"><p>l2</p></h-column>
+ </h-row>
- <h3>Custom Gutter</h3>
- <div class="cgrid-i0 row">
- <div class="cgrid-i1 column">
- <p>l6 50px</p>
- </div>
- <div class="cgrid-i2 column">
- <p>l6 50px</p>
- </div>
- </div>
-
- </div>
- </div>
-</section> -->
+ <h-row class="cgrid-c">
+ <h3>collapse then normal</h3>
+ <h-column class="cgrid-nest1">
+ <p>l6</p>
+ <h-row>
+ <h-column class="cgrid-nest1-1"><p>l4</p></h-column>
+ <h-column class="cgrid-nest1-2"><p>l8</p></h-column>
+ </h-row>
+ </h-column>
+ <h-column class="cgrid-nest2"><p>l4</p></h-column>
+ <h-column class="cgrid-nest3"><p>l2</p></h-column>
+ </h-row>
+ <h3>Custom Gutter</h3>
+ <h-row class="cgrid-gutter-r1">
+ <h-column class="cgrid-gutter1">
+ <p>l8 50px - s6 20px</p>
+ <h-row class="cgrid-gutter-r2">
+ <h-column class="large-2 small-6">
+ <p>
+ l2 10px - s6 10px
+ </p>
+ </h-column>
+ <h-column class="large-10 small-6">
+ <p>
+ l10 10px - s6 10px
+ </p>
+ </h-column>
+ </h-row>
+ </h-column>
+ <h-column class="cgrid-gutter2">
+ <p>l4 50px - s6 20px</p>
+ </h-column>
+ </h-row>
+
+</section>
+
<!-- <section class="row" data-page="design-grid">
<div class="large-12 column demo-grid">
<h1>Demo Design Custom Grid</h1>
<h3>325 (50) 175</h3>
<div class="dgrid-ar row">
@@ -833,96 +767,71 @@
<p>175</p>
</div>
</div>
</div>
</section> -->
-
-<!-- <section class="row" data-page="button">
- <div class="large-4 column">
- <h1>Button</h1>
- <a href="" class="button">Hello World</a>
- <br>
- <a href="" class="button red-button">Hello World</a>
- <br>
- <a href="" class="button yellow-button">Hello World</a>
- <br>
- <a href="" class="button blue-button">Hello World</a>
- <br>
- <a href="" class="button green-button">Hello World</a>
- <br>
- </div>
- <div class="large-4 column">
- <a href="" class="button white-button">Hello World</a>
- <br>
- <a href="" class="button grey-button">Hello World</a>
- <br>
- <a href="" class="button darkgrey-button">Hello World</a>
- <br>
- <a href="" class="button black-button">Hello World</a>
- </div>
-</section> -->
<!-- <div class="row" data-page="form">
- <div class="large-6 columns">
+ <div class="large-6 column">
<h1>Form Grid</h1>
<div class="form-row">
- <label for="" class="large-4 small-12 form-columns">Label</label>
- <input type="text" class="large-8 small-12 form-columns" placeholder="Normal input text">
+ <label for="" class="large-4 small-12 form-column">Label</label>
+ <input type="text" class="large-8 small-12 form-column" placeholder="Normal input text">
</div>
<pre class="brush:xhtml;">
<div class="form-row">
- <label class="large-4 small-12 form-columns"></label>
- <input type="text" class="large-8 small-12 form-columns">
+ <label class="large-4 small-12 form-column"></label>
+ <input type="text" class="large-8 small-12 form-column">
</div>
</pre>
<h1>Form Grid with Offset and Centered</h1>
<div class="form-row">
- <input type="text" class="large-8 large-offset-4 form-columns" placeholder="Input with offset">
+ <input type="text" class="large-8 large-offset-4 form-column" placeholder="Input with offset">
</div>
<div class="form-row">
- <input type="text" class="large-8 large-centered form-columns" placeholder="Centered Input">
+ <input type="text" class="large-8 large-centered form-column" placeholder="Centered Input">
</div>
<pre class="brush:xhtml;">
<div class="form-row">
- <input type="text" class="large-8 large-offset-4 form-columns" placeholder="Input with offset">
+ <input type="text" class="large-8 large-offset-4 form-column" placeholder="Input with offset">
</div>
<div class="form-row">
- <input type="text" class="large-8 large-centered form-columns" placeholder="Centered Input">
+ <input type="text" class="large-8 large-centered form-column" placeholder="Centered Input">
</div>
</pre>
<h1>Prefix and Postfix</h1>
<div class="form-row">
- <label for="" class="prefix large-4 small-6 form-columns">Prefix Label</label>
- <input type="text" class="large-8 small-6 form-columns" placeholder="Normal Input text">
+ <label for="" class="prefix large-4 small-6 form-column">Prefix Label</label>
+ <input type="text" class="large-8 small-6 form-column" placeholder="Normal Input text">
<div class="form-row">
- <input type="text" class="large-8 form-columns" placeholder="Your Blog name">
- <label for="" class="postfix large-4 form-columns">.blogspot.com</label>
+ <input type="text" class="large-8 form-column" placeholder="Your Blog name">
+ <label for="" class="postfix large-4 form-column">.blogspot.com</label>
</div>
<pre class="brush:xhtml;">
<div class="form-row">
- <label class="prefix large-4 small-6 form-columns"></label>
- <input type="text" class="large-8 small-6 form-columns">
+ <label class="prefix large-4 small-6 form-column"></label>
+ <input type="text" class="large-8 small-6 form-column">
<div class="form-row">
- <input type="text" class="large-8 form-columns">
- <label class="postfix large-4 form-columns"></label>
+ <input type="text" class="large-8 form-column">
+ <label class="postfix large-4 form-column"></label>
</div>
</pre>
<h1>Textarea and Select</h1>
<div class="form-row">
- <label for="" class="large-4 form-columns">Label</label>
- <textarea placeholder="Normal Input text" class="large-8 form-columns" rows="5"></textarea>
+ <label for="" class="large-4 form-column">Label</label>
+ <textarea placeholder="Normal Input text" class="large-8 form-column" rows="5"></textarea>
</div>
<div class="form-row">
- <label for="" class="large-4 form-columns">Select Dropdown</label>
- <select name="" id="" class="large-8 form-columns">
+ <label for="" class="large-4 form-column">Select Dropdown</label>
+ <select name="" id="" class="large-8 form-column">
<option value="">Asia</option>
<option value="">America</option>
<option value="">Europe</option>
<option value="">Australia</option>
<option value="">Africa</option>
@@ -930,15 +839,15 @@
</select>
</div>
<pre>
<div class="form-row">
- <label class="large-4 form-columns">Label</label>
- <textarea class="large-8 form-columns"></textarea>
+ <label class="large-4 form-column">Label</label>
+ <textarea class="large-8 form-column"></textarea>
</div>
<div class="form-row">
- <label class="large-4 form-columns">Select Dropdown</label>
- <select class="large-8 form-columns">
+ <label class="large-4 form-column">Select Dropdown</label>
+ <select class="large-8 form-column">
<option>...</option>
</select>
</div>
</pre>
\ No newline at end of file