RubyGems - groundworkcss - Versions diffs - 0.4.4 → 2.0.0 - Mend

groundworkcss 0.4.4 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (411) hide show

data/app/views/groundworkdocs/navigation.html.erb ADDED Viewed

@@ -0,0 +1,500 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Navigation Bars</h1>
+            <p class="quicksand">Responsive navigation created by <a href="http://twitter.com/ghepting" target="_blank">Gary Hepting</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 4 of 14</p>
+            <p><a href="typography.html" rel="prev" class="blue button">Back</a> <a href="buttons.html" rel="next" class="green button">Next: Buttons</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Target Breakpoints</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <h4>iPad</h4>
+                <nav title="iPad Menu" role="navigation" class="nav">
+                  <ul role="menubar">
+                    <li>
+                      <button>Nav Item 1</button>
+                    </li>
+                    <li role="menu" class="menu">
+                      <button>Nav Menu 1</button>
+                      <ul>
+                        <li>
+                          <button>Menu Item 1</button>
+                        </li>
+                        <li role="menu" class="menu">
+                          <button>Sub Menu 1</button>
+                          <ul>
+                            <li>
+                              <button>Sub Menu Item 1</button>
+                            </li>
+                            <li>
+                              <button>Sub Menu Item 2</button>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <button>Menu Item 2</button>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <button>Nav Item 3</button>
+                    </li>
+                  </ul>
+                </nav><br>
+                <pre data-lang="html">&lt;nav class=&quot;nav&quot; title=&quot;iPad Menu&quot;&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;button&gt;Nav Item 1&lt;/button&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;button&gt;Nav Menu 1&lt;/button&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;button&gt;Menu Item 1&lt;/button&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;button&gt;Sub Menu 1&lt;/button&gt;
+          &lt;ul&gt;
+            &lt;li&gt;&lt;button&gt;Sub Menu Item 1&lt;/button&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;button&gt;Sub Menu Item 2&lt;/button&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+        &lt;li&gt;&lt;button&gt;Menu Item 2&lt;/button&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+    &lt;li&gt;&lt;button&gt;Nav Item 3&lt;/button&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</pre>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole padded">
+                <h4>Small Tablet</h4>
+                <nav title="Small Tablet Menu" role="navigation" class="nav small-tablet">
+                  <ul role="menubar">
+                    <li>
+                      <button>Nav Item 1</button>
+                    </li>
+                    <li role="menu" class="menu">
+                      <button>Nav Menu 1</button>
+                      <ul>
+                        <li>
+                          <button>Menu Item 1</button>
+                        </li>
+                        <li role="menu" class="menu">
+                          <button>Sub Menu 1</button>
+                          <ul>
+                            <li>
+                              <button>Sub Menu Item 1</button>
+                            </li>
+                            <li>
+                              <button>Sub Menu Item 2</button>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <button>Menu Item 2</button>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <button>Nav Item 3</button>
+                    </li>
+                  </ul>
+                </nav><br>
+                <pre data-lang="html">&lt;nav class=&quot;nav small-tablet&quot; title=&quot;Small Tablet Menu&quot;&gt;...&lt;/nav&gt;</pre>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole padded">
+                <h4>Mobile</h4>
+                <nav title="Mobile Menu" role="navigation" class="nav mobile">
+                  <ul role="menubar">
+                    <li>
+                      <button>Nav Item 1</button>
+                    </li>
+                    <li role="menu" class="menu">
+                      <button>Nav Menu 1</button>
+                      <ul>
+                        <li>
+                          <button>Menu Item 1</button>
+                        </li>
+                        <li role="menu" class="menu">
+                          <button>Sub Menu 1</button>
+                          <ul>
+                            <li>
+                              <button>Sub Menu Item 1</button>
+                            </li>
+                            <li>
+                              <button>Sub Menu Item 2</button>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <button>Menu Item 2</button>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <button>Nav Item 3</button>
+                    </li>
+                  </ul>
+                </nav><br>
+                <pre data-lang="html">&lt;nav class=&quot;nav mobile&quot; title=&quot;Mobile Menu&quot;&gt;...&lt;/nav&gt;</pre>
+              </div>
+            </div>
+          </div><br>
+          <h4>Colors</h4>
+          <div class="row">
+            <div class="one third padded">
+              <nav role="navigation" class="nav yellow">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one third padded">
+              <nav role="navigation" class="nav orange">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one third padded">
+              <nav role="navigation" class="nav red">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div><br>
+          <div class="row">
+            <div class="one third padded">
+              <nav role="navigation" class="nav pink">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one third padded">
+              <nav role="navigation" class="nav purple">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one third padded">
+              <nav role="navigation" class="nav asphalt">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div><br>
+          <div class="row">
+            <div class="one third padded">
+              <nav role="navigation" class="nav blue">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one third padded">
+              <nav role="navigation" class="nav turquoise">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one third padded">
+              <nav role="navigation" class="nav green">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div><br>
+          <div class="row">
+            <div class="one third padded">
+              <nav role="navigation" class="nav charcoal">
+                <ul role="menubar">
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li role="menu" class="menu">
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li role="menu" class="menu">
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>

data/app/views/groundworkdocs/placeholder_text.html.erb ADDED Viewed

@@ -0,0 +1,86 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Placeholder Text</h1>
+            <p class="quicksand">Rapid prototyping with dynamic placeholder text and the <a href="https://github.com/christiannaths/Redacted-Font" target="_blank">Redacted</a> placeholder fonts.</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 13 of 14</p>
+            <p><a href="responsive_text.html" rel="prev" class="blue button">Back</a> <a href="animations.html" rel="next" class="green button">Next: Animations</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4 class="zero">Dynamic Placeholder Text</h4>
+            <p class="small zero">Dynamically generated placeholder text</p>
+            <div class="row">
+              <div class="one whole padded">
+                <div class="row">
+                  <div class="one third padded">
+                    <div class="placeholderText"></div>
+                  </div>
+                  <div class="one third padded">
+                    <div data-placeholder-type="words" data-placeholder-amount="100" class="placeholderText"></div>
+                  </div>
+                  <div class="one third padded">
+                    <h1 data-placeholder-type="words" data-placeholder-amount="3" data-placeholder-punctuation="false" data-placeholder-html="false" class="placeholderText"></h1>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="one third pad-left pad-right">
+                    <pre data-lang="html" class="gap-top">&lt;div class=&quot;placeholderText&quot;&gt;&lt;/div&gt;</pre>
+                    <p class="small">Default options (1 paragraph, including HTML paragraph tags and punctuation)</p>
+                  </div>
+                  <div class="one third pad-left pad-right">
+                    <pre data-lang="html" class="gap-top">&lt;div class=&quot;placeholderText&quot;
+     data-placeholder-type=&quot;words&quot;
+     data-placeholder-amount=&quot;100&quot;&gt;
+&lt;/div&gt;</pre>
+                    <p class="small">100 words, including HTML paragraph tags and punctuation</p>
+                  </div>
+                  <div class="one third pad-left pad-right">
+                    <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;placeholderText&quot;
+     data-placeholder-type=&quot;words&quot;
+     data-placeholder-amount=&quot;3&quot;
+     data-placeholder-punctuation=&quot;false&quot;
+     data-placeholder-html=&quot;false&quot;&gt;
+&lt;/h1&gt;</pre>
+                    <p class="small">3 words without HTML paragraph tags or punctuation</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bounceInRight animated"><br>
+            <hr>
+            <h4 class="zero">Redacted Placeholder Fonts</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <div class="row">
+                  <div class="one whole padded">
+                    <p>Redacted</p>
+                    <div data-placeholder-amount="3" class="placeholderText redacted"></div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="one third padded">
+                    <p>Redacted Script</p>
+                    <div data-placeholder-amount="1" class="placeholderText redacted-script"></div>
+                  </div>
+                  <div class="one third padded">
+                    <p>Redacted Script Light</p>
+                    <div data-placeholder-amount="1" class="placeholderText redacted-script-light"></div>
+                  </div>
+                  <div class="one third padded">
+                    <p>Redacted Script Bold</p>
+                    <div data-placeholder-amount="1" class="placeholderText redacted-script-bold"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>