site/views/docs/grid.erb in edge_framework-0.1.0 vs site/views/docs/grid.erb in edge_framework-0.2.0
- old
+ new
@@ -1,146 +1,121 @@
<div class="row">
<div class="large-12 columns">
<div class="demo-grid">
<h1>Grid</h1>
<div class="row">
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
+ <div class="large-4 columns"><p>4</p></div>
+ <div class="large-4 columns"><p>4</p></div>
+ <div class="large-4 columns"><p>4</p></div>
</div>
<div class="row">
- <div class="large-4 columns">4</div>
- <div class="large-4 columns">4</div>
- <div class="large-4 columns">4</div>
+ <div class="large-6 columns"><p>6</p></div>
+ <div class="large-6 columns"><p>6</p></div>
</div>
<div class="row">
- <div class="large-6 columns">6</div>
- <div class="large-6 columns">6</div>
+ <div class="large-12 columns"><p>12</p></div>
</div>
- <div class="row">
- <div class="large-12 columns">12</div>
- </div>
<h1>Collapsed Grid</h1>
<div class="row collapse">
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
- <div class="large-1 columns">1</div>
+ <div class="large-4 columns"><p>4</p></div>
+ <div class="large-4 columns"><p>4</p></div>
+ <div class="large-4 columns"><p>4</p></div>
</div>
<div class="row collapse">
- <div class="large-4 columns">4</div>
- <div class="large-4 columns">4</div>
- <div class="large-4 columns">4</div>
+ <div class="large-6 columns"><p>6</p></div>
+ <div class="large-6 columns"><p>6</p></div>
</div>
<div class="row collapse">
- <div class="large-6 columns">6</div>
- <div class="large-6 columns">6</div>
+ <div class="large-12 columns"><p>12</p></div>
</div>
- <div class="row collapse">
- <div class="large-12 columns">12</div>
- </div>
<h1>Responsive Grid</h1>
<div class="row">
- <div class="large-4 small-4 columns">large-4 small-4</div>
- <div class="large-4 small-4 columns">large-4 small-4</div>
- <div class="large-4 small-4 columns">large-4 small-4</div>
+ <div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
+ <div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
+ <div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
</div>
<div class="row">
- <div class="large-6 small-8 columns">large-6 small-8</div>
- <div class="large-6 small-4 columns">large-6 small-4</div>
+ <div class="large-6 small-8 columns"><p>large-6 small-8</p></div>
+ <div class="large-6 small-4 columns"><p>large-6 small-4</p></div>
</div>
<div class="row">
- <div class="large-8 small-4 columns">large-8 small-4</div>
- <div class="large-4 small-8 columns">large-4 small-8</div>
+ <div class="large-8 small-4 columns"><p>large-8 small-4</p></div>
+ <div class="large-4 small-8 columns"><p>large-4 small-8</p></div>
</div>
<h1>Offset and Source Ordering</h1>
<div class="row">
- <div class="large-3 columns">large-3</div>
- <div class="large-6 large-offset-3 columns">large-6 large-offset-3</div>
+ <div class="large-3 columns"><p>large-3</p></div>
+ <div class="large-6 large-offset-3 columns"><p>large-6 large-offset-3</p></div>
</div>
<div class="row">
- <div class="large-3 push-9 columns">push-9</div>
- <div class="large-9 pull-3 columns">pull-3, last-child</div>
+ <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">push-9</div>
- <div class="large-9 pull-3 columns">pull-3, last-child</div>
+ <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">
- 12
+ <p>12</p>
<div class="row">
<div class="large-8 columns">
- 8
+ <p>8</p>
<div class="row">
- <div class="large-6 columns">6</div>
- <div class="large-6 columns">6</div>
+ <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">
- 4
+ <p>4</p>
<div class="row">
- <div class="large-7 columns">7</div>
- <div class="large-5 columns">5</div>
+ <div class="large-7 columns"><p>7</p></div>
+ <div class="large-5 columns"><p>5</p></div>
</div>
</div>
</div>
</div>
</div>
<h1>Responsive Nested Grid</h1>
<div class="row">
<div class="large-12 small-12 columns">
- 12-12
+ <p>12-12</p>
<div class="row">
<div class="large-8 small-8 columns">
- 8-8
+ <p>8-8</p>
<div class="row">
- <div class="large-6 small-9 columns">6-9</div>
- <div class="large-6 small-3 columns">6-3</div>
+ <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">
- 4-4
+ <p>4-4</p>
<div class="row">
- <div class="large-7 small-7 columns">7-7</div>
- <div class="large-5 small-5 columns">5-5</div>
+ <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 Grid with Offset</h1>
<div class="row">
- <div class="large-8 large-offset-2 small-5 small-offset-3 columns">large-8 large-offset-2 small-5 off-3</div>
+ <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 small-centered columns">
- large-6 large-centered small-8 small-centered
+ <p>large-6 large-centered small-8 small-centered</p>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file