groundworkcss 0.4.4 → 2.0.0

data/app/views/groundworkdocs/layout_a.html.erb

@@ -0,0 +1,122 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Web Site Layout Example</h1>
+            <p class="quicksand">Demonstrates Typography, Styled Lists, Buttons, Source Reordering, Grid Breakpoint Modifiers and Adapters</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Example Lyaout 1 of 3</p>
+            <p><a href="home.html" rel="prev" class="blue button">Back</a> <a href="layout_b.html" rel="next" class="green button">Next: Image Gallery </a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <article class="row">
+        <section class="two fourths right-one padded bounceInDown animated"><img src="http://placehold.it/750x400/2ecc71/ffffff/&amp;text=Main+Image" alt="">
+          <hr><img src="http://placehold.it/250x130/34495e/ffffff/" alt="" class="pull-left gap-right">
+          <h1>Featured Article</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Nunc vel vehicula ante. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Nunc vel vehicula ante.</p>
+          <p>
+            <button class="asphalt">Read more</button>
+          </p>
+        </section>
+        <aside class="one fourth left-two padded border-right bounceInLeft animated">
+          <h1>Left Sidebar</h1>
+          <div class="row">
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ul class="list">
+                <li>Unordered list item #1</li>
+                <li>Unordered list item #2</li>
+                <li>Unordered list item #3</li>
+                <li>Unordered list item #4</li>
+              </ul>
+            </div>
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ol class="list">
+                <li>Ordered list item #1</li>
+                <li>Ordered list item #2</li>
+                <li>Ordered list item #3</li>
+              </ol>
+            </div>
+          </div>
+          <hr>
+          <h3>Left Sidebar Image Gallery</h3>
+          <div class="row">
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+          </div>
+          <div class="pad-right pad-left">
+            <p class="align-right">
+              <button class="orange">View more</button>
+            </p>
+          </div>
+        </aside>
+        <aside class="one fourth padded border-left bounceInRight animated">
+          <h1>Right Sidebar</h1>
+          <div class="row">
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ul class="list">
+                <li>Unordered list item #1</li>
+                <li>Unordered list item #2</li>
+                <li>Unordered list item #3</li>
+                <li>Unordered list item #4</li>
+              </ul>
+            </div>
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ol class="list">
+                <li>Ordered list item #1</li>
+                <li>Ordered list item #2</li>
+                <li>Ordered list item #3</li>
+              </ol>
+            </div>
+          </div>
+          <hr>
+          <h3>Right Sidebar Image Gallery</h3>
+          <div class="row">
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+          </div>
+          <div class="pad-right pad-left">
+            <p class="align-right">
+              <button class="red">View more</button>
+            </p>
+          </div>
+        </aside>
+      </article>
+      <article class="row bounceInUp animated">
+        <section class="one third padded">
+          <h3>Section Heading 3</h3>
+          <div class="row">
+            <div class="two-up-small-tablet one-up-mobile align-center"><img src="http://placehold.it/380x200/f02475/ffffff/" alt=""></div>
+            <div class="two-up-small-tablet one-up-mobile">
+              <p class="padded no-pad-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
+            </div>
+          </div>
+        </section>
+        <section class="one third padded">
+          <h3>Section Heading 3</h3>
+          <div class="row">
+            <div class="two-up-small-tablet one-up-mobile align-center"><img src="http://placehold.it/380x200/1abc9c/ffffff/" alt=""></div>
+            <div class="two-up-small-tablet one-up-mobile">
+              <p class="padded no-pad-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
+            </div>
+          </div>
+        </section>
+        <section class="one third padded">
+          <h3>Section Heading 3</h3>
+          <div class="row">
+            <div class="two-up-small-tablet one-up-mobile align-center"><img src="http://placehold.it/380x200/34495e/ffffff/" alt=""></div>
+            <div class="two-up-small-tablet one-up-mobile">
+              <p class="padded no-pad-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
+            </div>
+          </div>
+        </section>
+      </article>

data/app/views/groundworkdocs/layout_b.html.erb

@@ -0,0 +1,37 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Image Gallery Layout Example</h1>
+            <p class="quicksand">Demonstrates Grid Breakpoint Adapters</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Example Layout 2 of 3</p>
+            <p><a href="layout_a.html" rel="prev" class="blue button">Back</a> <a href="layout_c.html" rel="next" class="green button">Next: Ecommerce</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <article class="row">
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInLeft animated"><a href="http://placehold.it/900x500/2ecc71/ffffff/&amp;text=Image+1" title="View Larger Image" class="block green"><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Image+1" alt="Image 1" class="round"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInDownLeft animated"><a href="http://placehold.it/900x500/3498db/ffffff/&amp;text=Image+2" title="View Larger Image" class="block blue"><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Image+2" alt="Image 2"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInDown animated"><a href="http://placehold.it/900x500/9b59b6/ffffff/&amp;text=Image+3" title="View Larger Image" class="block purple"><img src="http://placehold.it/300x300/9b59b6/ffffff/&amp;text=Image+3" alt="Image 3"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInUp animated"><a href="http://placehold.it/900x500/f1c40f/ffffff/&amp;text=Image+4" title="View Larger Image" class="block yellow"><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Image+4" alt="Image 4"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInUpRight animated"><a href="http://placehold.it/900x500/e67e22/ffffff/&amp;text=Image+5" title="View Larger Image" class="block orange"><img src="http://placehold.it/300x300/e67e22/ffffff/&amp;text=Image+5" alt="Image 5"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInRight animated"><a href="http://placehold.it/900x500/e74c3c/ffffff/&amp;text=Image+6" title="View Larger Image" class="block red"><img src="http://placehold.it/300x300/e74c3c/ffffff/&amp;text=Image+6" alt="Image 6"></a></div>
+      </article>
+      <article class="row">
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInLeft animated"><a href="http://placehold.it/900x500/f02475/ffffff/&amp;text=Image+7" title="View Larger Image" class="block pink"><img src="http://placehold.it/300x300/f02475/ffffff/&amp;text=Image+7" alt="Image 7"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInDownLeft animated"><a href="http://placehold.it/900x500/1abc9c/ffffff/&amp;text=Image+8" title="View Larger Image" class="block turquoise"><img src="http://placehold.it/300x300/1abc9c/ffffff/&amp;text=Image+8" alt="Image 8"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInDown animated"><a href="http://placehold.it/900x500/34495e/ffffff/&amp;text=Image+9" title="View Larger Image" class="block asphalt"><img src="http://placehold.it/300x300/34495e/ffffff/&amp;text=Image+9" alt="Image 9"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInUp animated"><a href="http://placehold.it/900x500/2ecc71/ffffff/&amp;text=Image+10" title="View Larger Image" class="block green"><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Image+10" alt="Image 10"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInUpRight animated"><a href="http://placehold.it/900x500/3498db/ffffff/&amp;text=Image+11" title="View Larger Image" class="block blue"><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Image+11" alt="Image 11"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInRight animated"><a href="http://placehold.it/900x500/9b59b6/ffffff/&amp;text=Image+12" title="View Larger Image" class="block purple"><img src="http://placehold.it/300x300/9b59b6/ffffff/&amp;text=Image+12" alt="Image 12"></a></div>
+      </article>
+      <article class="row">
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInLeft animated"><a href="http://placehold.it/900x500/f1c40f/ffffff/&amp;text=Image+13" title="View Larger Image" class="block yellow"><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Image+13" alt="Image 13"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInDownLeft animated"><a href="http://placehold.it/900x500/e67e22/ffffff/&amp;text=Image+14" title="View Larger Image" class="block orange"><img src="http://placehold.it/300x300/e67e22/ffffff/&amp;text=Image+14" alt="Image 14"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInDown animated"><a href="http://placehold.it/900x500/e74c3c/ffffff/&amp;text=Image+15" title="View Larger Image" class="block red"><img src="http://placehold.it/300x300/e74c3c/ffffff/&amp;text=Image+15" alt="Image 15"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInUp animated"><a href="http://placehold.it/900x500/f02475/ffffff/&amp;text=Image+16" title="View Larger Image" class="block pink"><img src="http://placehold.it/300x300/f02475/ffffff/&amp;text=Image+16" alt="Image 16"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInUpRight animated"><a href="http://placehold.it/900x500/1abc9c/ffffff/&amp;text=Image+17" title="View Larger Image" class="block turquoise"><img src="http://placehold.it/300x300/1abc9c/ffffff/&amp;text=Image+17" alt="Image 17"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInRight animated"><a href="http://placehold.it/900x500/34495e/ffffff/&amp;text=Image+18" title="View Larger Image" class="block asphalt"><img src="http://placehold.it/300x300/34495e/ffffff/&amp;text=Image+18" alt="Image 18"></a></div>
+      </article>

data/app/views/groundworkdocs/layout_c.html.erb

@@ -0,0 +1,116 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Ecommerce Example Layout</h1>
+            <p class="quicksand">Demonstrates Responsive Text, Truncated Lines, Icons, Vertical (To Menu) Navigation, Grid Breakpoint Modifiers and Adapters</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Example Layout 3 of 3</p>
+            <p><a href="layout_b.html" rel="prev" class="blue button">Back</a> <a href="grid.html" rel="next" class="green button">Next: Grid System</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="align-right padded"><a href="#" class="gap-right">My Account <i class="icon-user"></i></a><a href="#" class="gap-right">View Cart <i class="icon-shopping-cart"></i></a><a href="#">Sign Out <i class="icon-signout"></i></a></div>
+      <div class="row">
+        <aside class="one fifth padded bounceInLeft animated">
+          <nav data-label="Shop by Category" class="nav vertical menu">
+            <ul style="display:block;">
+              <li class="one whole"><a>Nav item #1</a></li>
+              <li class="one whole"><a>Nav item #2</a></li>
+              <li class="one whole"><a>Nav item #3</a></li>
+              <li class="one whole"><a>Nav item #4</a></li>
+              <li class="one whole"><a>Nav item #5</a></li>
+            </ul>
+          </nav>
+        </aside>
+        <article class="four fifths">
+          <div class="row">
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInDown animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 1</h4><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Product+1">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInUp animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 2</h4><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Product+2">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded rotateInDownRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 3</h4><img src="http://placehold.it/300x300/9b59b6/ffffff/&amp;text=Product+3">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 4</h4><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Product+4">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInDown animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 5</h4><img src="http://placehold.it/300x300/e67e22/ffffff/&amp;text=Product+5">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInUp animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 6</h4><img src="http://placehold.it/300x300/e74c3c/ffffff/&amp;text=Product+6">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded rotateInDownRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 7</h4><img src="http://placehold.it/300x300/f02475/ffffff/&amp;text=Product+7">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 8</h4><img src="http://placehold.it/300x300/1abc9c/ffffff/&amp;text=Product+8">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInDown animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 9</h4><img src="http://placehold.it/300x300/34495e/ffffff/&amp;text=Product+9">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInUp animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 10</h4><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Product+10">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded rotateInDownRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 11</h4><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Product+11">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 12</h4><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Product+12">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>

data/app/views/groundworkdocs/media_queries.html.erb

@@ -0,0 +1,75 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Media Queries</h1>
+            <p class="quicksand">Restrict CSS rules to targeted browser conditions, such as viewport widths & pixel densities</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Documentation: Media Queries</p>
+            <p><a href="breakpoints.html" class="green button">Also See: Targeted Breakpoints <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Example Media Queries</h4>
+            <div class="row">
+              <div class="one half padded">
+                <p>Mobile</p>
+                <pre data-lang="css">@media (max-width: 480px) {
+  // CSS that only applies to viewports 
+  // less than or equal to 480 pixles goes here
+}</pre>
+              </div>
+              <div class="one half padded">
+                <p>Not Mobile</p>
+                <pre data-lang="css">@media (min-width: 481px) {
+  // CSS that only applies to viewports 
+  // greater than 480 pixles goes here
+}</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <p>Small Tablet</p>
+                <pre data-lang="css">@media (max-width: 767px) {
+  // CSS that only applies to viewports 
+  // less than 768 pixles goes here
+}</pre>
+              </div>
+              <div class="one half padded">
+                <p>iPad</p>
+                <pre data-lang="css">@media (min-width: 768px) and (max-width:1024px) {
+  // CSS that only applies to viewports 
+  // of similar size to the ipad goes here
+}</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <p>Desktop</p>
+                <pre data-lang="css">@media (min-width: 1025px) {
+  // CSS that only applies to viewports 
+  // greater than 1024 pixles goes here
+}</pre>
+              </div>
+              <div class="one half padded">
+                <p>iPad Retina</p>
+                <pre data-lang="css">@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
+  // CSS that only applies to viewports 
+  // of similar size to the ipad and 
+  // with double pixel density goes here
+}</pre>
+              </div>
+            </div><br>
+            <hr><br>
+          </div>
+          <div class="bounceInUp animated">
+            <h4>Targeted Breakpoints</h4>
+            <p>Groundwork utilizes Sass variables to introduce <a href="breakpoints.html">logical media queries</a> which can help keep code organized, meaningful, and easier to read. The Sass variable names make targeting common devices and viewport size ranges a more intuitive and more natural step in the optimization process.</p>
+            <p><a href="breakpoints.html" class="green button">Read More <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>

data/app/views/groundworkdocs/messages.html.erb

@@ -0,0 +1,92 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Message Boxes</h1>
+            <p class="quicksand">Provide users with feedback or instructions.</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 7 of 14</p>
+            <p><a href="boxes.html" rel="prev" class="blue button">Back</a> <a href="tables.html" rel="next" class="green button">Next: Tables</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="row">
+            <div class="one whole bounceInLeft animated">
+              <div class="pad-top pad-left pad-right">
+                <h4>Message Boxes</h4>
+              </div>
+              <div class="row">
+                <div class="one half pad-left pad-right pad-bottom">
+                  <p class="message">This is an important message.</p>
+                </div>
+                <div class="one half pad-left pad-right pad-bottom">
+                  <p class="dismissible message">This is a dismissible message.</p>
+                </div>
+              </div>
+              <div class="row">
+                <div class="one half pad-left pad-right">
+                  <pre data-lang="html">&lt;p class=&quot;message&quot;&gt;This is an important message.&lt;/p&gt;</pre>
+                </div>
+                <div class="one half pad-left pad-right">
+                  <pre data-lang="html">&lt;p class=&quot;message dismissible&quot;&gt;This is a dismissible message.&lt;/p&gt;</pre>
+                </div>
+              </div>
+            </div>
+          </div><br>
+          <div class="row">
+            <div class="one half padded bounceInUp animated">
+              <h4>States</h4>
+              <p class="info message">This is an info message.</p>
+              <p class="info dismissible message">This is a dismissible info message.</p>
+              <p class="success message">This is a success message.</p>
+              <p class="success dismissible message">This is a dismissible success message.</p>
+              <p class="question message">This is a question message.</p>
+              <p class="question dismissible message">This is a dismissible question message.</p>
+              <p class="alert message">This is an alert message.</p>
+              <p class="alert dismissible message">This is a dismissible alert message.</p>
+              <p class="warning message">This is a warning message.</p>
+              <p class="warning dismissible message">This is a dismissible warning message.</p>
+              <p class="error message">This is an error message.</p>
+              <p class="error dismissible message">This is a dismissible error message.</p><br>
+              <div class="row">
+                <div class="one half small-tablet pad-right no-pad-mobile">
+                  <h4>Square</h4>
+                  <p class="message square">This is a square message.</p>
+                  <p class="message square dismissible">This is a dismissible square message.</p>
+                </div>
+                <div class="one half small-tablet">
+                  <h4>Round</h4>
+                  <p class="message round align-center">This is a round message.</p>
+                  <p class="message round dismissible align-center">This is a dismissible round message.</p>
+                </div>
+              </div>
+            </div>
+            <div class="one half padded bounceInDown animated">
+              <h4>Colors</h4>
+              <p class="yellow message">This is a yellow message.</p>
+              <p class="dismissible yellow message">This is a dismissible yellow message.</p>
+              <p class="orange message">This is a orange message.</p>
+              <p class="dismissible orange message">This is a dismissible orange message.</p>
+              <p class="red message">This is a red message.</p>
+              <p class="dismissible red message">This is a dismissible red message.</p>
+              <p class="pink message">This is a pink message.</p>
+              <p class="dismissible pink message">This is a dismissible pink message.</p>
+              <p class="purple message">This is a purple message.</p>
+              <p class="dismissible purple message">This is a dismissible purple message.</p>
+              <p class="asphalt message">This is a asphalt message.</p>
+              <p class="dismissible asphalt message">This is a dismissible asphalt message.</p>
+              <p class="blue message">This is a blue message.</p>
+              <p class="dismissible blue message">This is a dismissible blue message.</p>
+              <p class="turquoise message">This is a turquoise message.</p>
+              <p class="dismissible turquoise message">This is a dismissible turquoise message.</p>
+              <p class="green message">This is a green message.</p>
+              <p class="dismissible green message">This is a dismissible green message.</p>
+              <p class="charcoal message">This is a charcoal message.</p>
+              <p class="dismissible charcoal message">This is a dismissible charcoal message.</p>
+            </div>
+          </div>
+        </div>
+      </div>