assets/test.html in edge_framework-0.8.1 vs assets/test.html in edge_framework-0.9.0
- old
+ new
@@ -17,18 +17,15 @@
width:1140px; margin:0 auto; background: #333; color: white; position:fixed; top:0;
right:0; left:0; z-index: 2; padding: 10px 0;
}
</style>
-
- <!--SYNTAX HIGHLIGHTER-->
- <script type="text/javascript" src="js/edge/edge.prism.js"></script>
</head>
<body>
<div id="main-wrapper">
- <header class="top-bar">
- </header>
+<!-- <header class="top-bar">
+ </header> -->
<!-- <div class="row" data-page="typography">
<div class="large-12 columns">
<article class="blog-post baseline">
<div class="row">
@@ -136,15 +133,15 @@
</div>
</article>
</div>
</div> -->
-<!-- <div class="row">
+<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" data-line="7"><code>
+ <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;
<div> ... </div>
Add class ".line-numbers" to include numbering
@@ -183,16 +180,16 @@
def do_something():
puts "Hello World"
end
</code></pre>
</div>
-</div> -->
+</div>
-<div class="row" data-page="block-grid">
+<!-- <div class="row" data-page="tile">
<div class="large-12 columns">
- <div class="demo-block-grid">
- <h1>Block Grid</h1>
+ <div class="demo-tile">
+ <h1>Tile</h1>
<ul class="large-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>
@@ -203,12 +200,12 @@
<li><p>1</p></li>
<li><p>1</p></li>
<li><p>1</p></li>
<li><p>1</p></li>
</ul>
- <h2>Block Grid Collapsed</h2>
- <ul class="large-tile-7 small-tile-5 collapse">
+ <h2>Tile Collapse</h2>
+ <ul class="large-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>
@@ -220,14 +217,50 @@
<li><p>1</p></li>
<li><p>1</p></li>
</ul>
</div>
</div>
-</div>
+</div> -->
+<!-- <div class="row" data-page="custom-tile">
+ <div class="large-12 columns">
+ <div class="demo-tile">
+ <h1>Custom Tile</h1>
+ <ul class="custom-tile1">
+ <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>
+ <h2>Custom Tile Collapsed</h2>
+ <ul class="custom-tile2">
+ <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>
+ </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>
@@ -354,12 +387,156 @@
</div>
</div>
</div>
</div>
-</div> -->
+</div>
+
+<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 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>
+
+<!-- <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>
+
+ <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>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>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-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-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>
+
+ <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>
+
+ <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>
+
+ <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> -->
+
+
+
<!-- <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>
@@ -446,7 +623,12 @@
<div id="footer-push"></div>
</div>
<footer id="footer">
</footer>
+
+
+<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>
</body>
</html>
\ No newline at end of file