assets/test.html in edge_framework-0.9.0 vs assets/test.html in edge_framework-0.9.9
- old
+ new
@@ -23,11 +23,11 @@
<body>
<div id="main-wrapper">
<!-- <header class="top-bar">
</header> -->
- <!-- <div class="row" data-page="typography">
+<!-- <div class="row" data-page="vertical-rhythm">
<div class="large-12 columns">
<article class="blog-post baseline">
<div class="row">
<div class="large-6 columns">
<div class="typo-wrapper">
@@ -131,13 +131,173 @@
</div>
</div>
</article>
</div>
- </div> -->
+ </div>
+ -->
+<!-- <section class="row" data-page="animate">
+ <div class="large-12 column">
+ <div class="box1" data-animate="fadein 500"></div>
+ </div>
+ </section> -->
-<div class="row" data-page="code">
+<!-- <div class="row" data-page="typography">
+ <div class="large-12 columns">
+ <article>
+ <div class="row">
+ <div class="large-6 columns">
+ <h1>Unordered List</h1>
+ <ul>
+ <li>Lorem ipsum dolor sit</li>
+ <li>
+ Consectetur <a>adipisicing</a> elit
+ <ul>
+ <li>Necessitatibus, ex assumenda veniam ullam</li>
+ <li>Ametharum labore deserunt quidem</li>
+ </ul>
+ </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">
+ <h1>Ordered List</h1>
+ <ol>
+ <li>Lorem ipsum dolor sit.</li>
+ <li> Eligendi, eos, voluptates, ducimus fugit
+ <ol>
+ <li>Tempora minus iusto veniam veritatis ea</li>
+ <li>Perspiciatis sequi et incidunt</li>
+ <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
+ </ol>
+ </li>
+ <li>Consequuntur assumenda nesciunt</li>
+ <li>Consectetur adipisicing elit</li>
+ <li>Fugit nemo hic officia asperiores fugiat</li>
+ <li>Minima voluptatum eos sit a recusandae eligendi</li>
+ </ol>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-6 small-9 columns">
+ <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>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quos hic praesentium sint impedit voluptate aliquid minus consequuntur assumenda quaerat voluptas vel corrupti ullam accusantium quo optio necessitatibus inventore molestias.
+ </p>
+ <blockquote>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, earum, deleniti repellat quam aspernatur delectus perspiciatis vel necessitatibus sunt veritatis.
+ <cite>written by Henner</cite>
+ </blockquote>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem repellendus at soluta vitae fuga ratione ad ullam? Placeat accusamus quam facere eveniet laboriosam praesentium accusantium. Fuga eum soluta molestiae?
+ </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="sidebar">
+ <h2>SIDEBAR</h2>
+ <p>
+ <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, autem.</em>
+ </p>
+ <h3>MENU</h3>
+ <p>Select your dishes</p>
+ <ul>
+ <li>Dolorum, rerum, minima</li>
+ <li>Laboriosam in atque</li>
+ <li>Quo, provident</li>
+ <li>Consectetur adipisicing</li>
+ <li>Architecto excepturi</li>
+ </ul>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, pariatur sunt ea adipisci eius dolorum aspernatur asperiores alias laudantium optio.
+ </p>
+ </div>
+
+ </div>
+ </div>
+ </article>
+ </div>
+ </div> -->
+
+ <div class="row" data-page="vr-comparison">
+ <div class="large-6 column">
+ <article class="baseline-comparison">
+ <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>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illum?
+ </p>
+ <ul class="bullet-list">
+ <li>Lorem ipsum dolor sit</li>
+ <li>
+ Consectetur adipisicing elit
+ <ul class="bullet-list">
+ <li>Necessitatibus, ex assumenda veniam ullam</li>
+ <li>Ametharum labore deserunt quidem</li>
+ </ul>
+ </li>
+ <li>Consequatur ipsum a aut iusto tempore</li>
+ <li>Impedit sint nulla nobis suscipit rem aspernatur</li>
+ </ul>
+ <h2>Explicabo consectetur vero</h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed deserunt veritatis temporibus voluptates voluptatibus deleniti quia laudantium in accusantium.
+ </p>
+ <blockquote>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, earum, deleniti repellat quam aspernatur delectus perspiciatis vel necessitatibus sunt veritatis.
+ <cite>written by Henner</cite>
+ </blockquote>
+ <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>
+ </article>
+ </div>
+ <div class="large-6 column">
+ <article class="baseline-comparison has-vr">
+ <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>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illum?
+ </p>
+ <ul class="bullet-list">
+ <li>Lorem ipsum dolor sit</li>
+ <li>
+ Consectetur adipisicing elit
+ <ul class="bullet-list">
+ <li>Necessitatibus, ex assumenda veniam ullam</li>
+ <li>Ametharum labore deserunt quidem</li>
+ </ul>
+ </li>
+ <li>Consequatur ipsum a aut iusto tempore</li>
+ <li>Impedit sint nulla nobis suscipit rem aspernatur</li>
+ </ul>
+ <h2>Explicabo consectetur vero</h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed deserunt veritatis temporibus voluptates voluptatibus deleniti quia laudantium in accusantium.
+ </p>
+ <blockquote>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, earum, deleniti repellat quam aspernatur delectus perspiciatis vel necessitatibus sunt veritatis.
+ <cite>written by Henner</cite>
+ </blockquote>
+ <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>
+ </article>
+ </div>
+ </div>
+
+<!-- <div class="row" data-page="code">
<div class="large-12 columns">
<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>
@@ -180,11 +340,11 @@
def do_something():
puts "Hello World"
end
</code></pre>
</div>
-</div>
+</div> -->
<!-- <div class="row" data-page="tile">
<div class="large-12 columns">
<div class="demo-tile">
<h1>Tile</h1>
@@ -256,11 +416,11 @@
</ul>
</div>
</div>
</div> -->
-<div class="row" data-page="grid">
+<!-- <div class="row" data-page="grid">
<div class="large-12 columns">
<div class="demo-grid">
<h1>Grid</h1>
<div class="row">
<div class="large-6 columns"><p>6</p></div>
@@ -387,31 +547,154 @@
</div>
</div>
</div>
</div>
-</div>
+</div> -->
-<div class="row collapse demo-grid" data-page="grid">
+
+<!-- <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>
+
+ <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>
+
+ <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>
+
+ <h2>Table Visibility</h2>
+ <div class="visibility-table">
+ <table border="1" class="hide-for-large">
+ <tr>
+ <td>hide-for</td>
+ <td>large</td>
+ </tr>
+ </table>
+ <table border="1" class="hide-for-small">
+ <tr>
+ <td>hide-for</td>
+ <td>small</td>
+ </tr>
+ </table>
+ <table border="1" class="hide-for-mini">
+ <tr>
+ <td>hide-for</td>
+ <td>mini</td>
+ </tr>
+ </table>
+ <table border="1" class="show-for-large">
+ <tr>
+ <td>show-for</td>
+ <td>large</td>
+ </tr>
+ </table>
+ <table border="1" class="show-for-small">
+ <tr>
+ <td>show-for</td>
+ <td>small</td>
+ </tr>
+ </table>
+ <table border="1" class="show-for-mini">
+ <tr>
+ <td>show-for</td>
+ <td>mini</td>
+ </tr>
+ </table>
+ </div>
+
+ <h2>Td Visibility</h2>
+ <div class="visibility-td">
+ <table border="1">
+ <tr>
+ <td class="hide-for-large">This is</td>
+ <td>hide-for</td>
+ <td>large</td>
+ </tr>
+ </table>
+ <table border="1">
+ <tr>
+ <td class="hide-for-small">This is</td>
+ <td>hide-for</td>
+ <td>small</td>
+ </tr>
+ </table>
+ <table border="1">
+ <tr>
+ <td class="hide-for-mini">This is</td>
+ <td>hide-for</td>
+ <td>mini</td>
+ </tr>
+ </table>
+ <table border="1">
+ <tr>
+ <td class="show-for-large">This is</td>
+ <td>show-for</td>
+ <td>large</td>
+ </tr>
+ </table>
+ <table border="1" >
+ <tr>
+ <td class="show-for-small">This is</td>
+ <td>show-for</td>
+ <td>small</td>
+ </tr>
+ </table>
+ <table border="1" >
+ <tr>
+ <td class="show-for-mini">This is</td>
+ <td>show-for</td>
+ <td>mini</td>
+ </tr>
+ </table>
+ </div>
+
+ </div>
+</section> -->
+
+<!-- <div class="row collapse demo-grid" data-page="grid">
<h1>Collapse not nested</h1>
<div class="large-8 column">
<p>8</p>
</div>
<div class="large-4 column">
<p>4</p>
</div>
-</div>
+</div> -->
+<!--
<div class="row demo-grid" data-page="grid">
<h1>Not nested</h1>
<div class="large-8 column">
<p>8</p>
</div>
<div class="large-4 column">
<p>4</p>
</div>
-</div>
+</div> -->
<!-- <section class="row" data-page="custom-grid">
<div class="large-12 column">
<div class="demo-grid">
@@ -530,13 +813,35 @@
</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">
<h1>Form Grid</h1>
<div class="form-row">
<label for="" class="large-4 small-12 form-columns">Label</label>
@@ -628,7 +933,14 @@
<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
<script type="text/javascript" src="js/edge.js"></script>
<script type="text/javascript" src="js/edge/edge.prism.js"></script>
+<script type="text/javascript" src="js/edge/edge.animate.js"></script>
+
+
+ <script>
+ //$(".box1").addClass("animated");
+ </script>
+
</body>
</html>
\ No newline at end of file