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/helpers.html.erb ADDED Viewed

@@ -0,0 +1,326 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Helpers</h1>
+            <p class="quicksand"><a href="breakpoints.html">Breakpoint-targeted</a> layout, typographic, and conditional helpers for responsive & adaptive layouts</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 2 of 14</p>
+            <p><a href="grid.html" rel="prev" class="blue button">Back</a> <a href="typography.html" rel="next" class="green button">Next: Typography</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded bounceInLeft animated">
+          <h4 class="zero">Conditional Display Helpers</h4>
+          <p class="small">Conditionally show and hide elements at <a href="breakpoints.html">targeted breakpoints</a></p>
+          <div class="row">
+            <div class="one half small-tablet padded">
+              <h4>Demonstration</h4>
+              <ol class="list large">
+                <li class="green desktop-only">desktop-only</li>
+                <li class="blue hide-on-desktop">hide-on-desktop</li>
+                <li class="green ipad-only">ipad-only</li>
+                <li class="blue hide-on-ipad">hide-on-ipad</li>
+                <li class="green small-tablet-only">small-tablet-only</li>
+                <li class="blue hide-on-small-tablet">hide-on-small-tablet</li>
+                <li class="green mobile-only">mobile-only</li>
+                <li class="blue hide-on-mobile">hide-on-mobile</li>
+              </ol>
+            </div>
+            <div class="one half small-tablet padded">
+              <h4 class="double gap-top-mobile">Conditional Display Classes</h4>
+              <ol class="list">
+                <li><code class="inline">.desktop-only</code></li>
+                <li><code class="inline">.hide-on-desktop</code></li>
+                <li><code class="inline">.ipad-only</code></li>
+                <li><code class="inline">.hide-on-ipad</code></li>
+                <li><code class="inline">.small-tablet-only</code></li>
+                <li><code class="inline">.hide-on-small-tablet</code></li>
+                <li><code class="inline">.mobile-only</code></li>
+                <li><code class="inline">.hide-on-mobile</code></li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInRight animated">
+          <h4 class="zero">Spacing Helpers</h4>
+          <p class="small">
+            With breakpoint-targeted conditional classes and overrides. (i.e. - <code class="inline">.no-pad-mobile</code>,  <code class="inline">.no-gap-desktop</code>,  <code class="inline">.double.gap-top-mobile</code>,  <code class="inline">.padded-small-tablet</code>,  <code class="inline">.padded-mobile</code>, etc.)
+          </p>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Padded</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="padded">.padded</div>
+                  <div class="pad-top">.pad-top</div>
+                  <div class="pad-right">.pad-right</div>
+                  <div class="pad-bottom">.pad-bottom</div>
+                  <div class="pad-left">.pad-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Double</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="double padded">.double.padded</div>
+                  <div class="double pad-top">.double.pad-top</div>
+                  <div class="double pad-right">.double.pad-right</div>
+                  <div class="double pad-bottom">.double.pad-bottom</div>
+                  <div class="double pad-left">.double.pad-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Triple</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="triple padded">.triple.padded</div>
+                  <div class="triple pad-top">.triple.pad-top</div>
+                  <div class="triple pad-right">.triple.pad-right</div>
+                  <div class="triple pad-bottom">.triple.pad-bottom</div>
+                  <div class="triple pad-left">.triple.pad-left</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Gapped</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="gapped">.gapped</div>
+                  <div class="gap-top">.gap-top</div>
+                  <div class="gap-right">.gap-right</div>
+                  <div class="gap-bottom">.gap-bottom</div>
+                  <div class="gap-left">.gap-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Double</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="double gapped">.double.gapped</div>
+                  <div class="double gap-top">.double.gap-top</div>
+                  <div class="double gap-right">.double.gap-right</div>
+                  <div class="double gap-bottom">.double.gap-bottom</div>
+                  <div class="double gap-left">.double.gap-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Triple</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="triple gapped">.triple.gapped</div>
+                  <div class="triple gap-top">.triple.gap-top</div>
+                  <div class="triple gap-right">.triple.gap-right</div>
+                  <div class="triple gap-bottom">.triple.gap-bottom</div>
+                  <div class="triple gap-left">.triple.gap-left</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInLeft animated">
+          <h4 class="zero">Layout</h4>
+          <p class="small">
+            With breakpoint-targeted conditional classes and overrides. (i.e. - <code class="inline">.block-desktop</code>, <code class="inline">.no-border-small-tablet</code>, <code class="inline">.pull-right-small-tablet</code>, <code class="inline">.center-ipad</code>
+          </p>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Display</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="inline">.inline</div>
+                  <div class="inline-block">.inline-block</div>
+                  <div class="block">.block</div>
+                  <div class="hidden">.hidden</div>
+                </div>
+              </div><br>
+              <h4>Border Radius</h4>
+              <div class="demo">
+                <div class="row">
+                  <div>
+                    <button class="square">.square</button>
+                  </div>
+                  <div>
+                    <button class="round">.round</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Floating</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="pull-none">.pull-none</div>
+                  <div class="pull-right">.pull-right</div>
+                  <div class="pull-left">.pull-left</div>
+                </div>
+              </div><br>
+              <h4>Centering</h4>
+              <div class="demo">
+                <div class="row">
+                  <div>
+                    <button class="center">.center</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Borders</h4>
+              <div class="demo">
+                <div class="bordered">.bordered</div><br>
+                <div class="border-top">.border-top</div><br>
+                <div class="border-right">.border-right</div><br>
+                <div class="border-bottom">.border-bottom</div><br>
+                <div class="border-left">.border-left</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInRight animated">
+          <h4>Typographic</h4>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Font Sizing</h4>
+              <p class="zero">.small</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="small">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.medium</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="medium">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.large</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="large">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Text Alignment</h4>
+              <p class="zero">.align-left</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="align-left">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.align-center</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="align-center">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.align-right</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="align-right">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.justify</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="justify">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Text Helpers</h4>
+              <p class="zero">.truncate </p>
+              <p class="zero small">(single-line, pure CSS)</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="truncate">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">data-truncate='2' </p>
+              <p class="zero small">(multi-line, powered by truncateLines plugin)</p>
+              <div class="demo">
+                <div class="row">
+                  <div data-truncate="2">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.responsive </p>
+              <p class="zero small">(single-line, powered by responsiveText plugin)</p>
+              <div class="demo">
+                <div class="row">
+                  <div data-compression="20.65" class="responsive">The quick brown fox jumped over the lazy dog.</div>
+                </div>
+              </div>
+              <p class="gap-top small">Note: <code class="inline">data-compression='20.65'</code> applied to increase compression</p><br>
+              <p class="zero">.responsive </p>
+              <p class="zero small">(scrollable single-line, powered by responsiveText plugin)</p>
+              <div class="demo">
+                <div class="row">
+                  <div data-scrollable="true" class="responsive">The quick brown fox jumped over the lazy dog.</div>
+                </div>
+              </div>
+              <p class="gap-top small">Note: <code class="inline">data-scrollable='true'</code> applied to enable scrolling on hover</p>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInUp animated">
+          <h4>Rotation</h4>
+          <div class="row">
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-90"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-90 </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-180"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-180 </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-270"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-270 </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-360"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-360</p>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-90-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-90-ctr  </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-180-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-180-ctr </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-270-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-270-ctr </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-360-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-360-ctr </p>
+            </div>
+          </div>
+        </div>
+      </div>

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

@@ -0,0 +1,88 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Responsive Design Made Easy</h1>
+            <p class="quicksand"> </p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Get Started</p>
+            <p><a href="layout_a.html" rel="next" class="green button">View Example Layouts </a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded bounceInLeft animated">
+          <h1 data-compression="22.25" data-min="22" class="quicksand responsive">A Responsive HTML5, CSS<br>and Javascript Framework</h1>
+          <h4>Create scalable, accessible web applications that work on virtually anything.</h4>
+          <div class="row white box">
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-th icon-2x gap-right"></i> Grid System</h4>
+              <p>A highly configurable, nestable, fractions-based, responsive & adaptive, fluid grid layout system</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-tablet icon-2x gap-right"></i> Works Everywhere</h4>
+              <p>Works on virtually everything &mdash; mobile phones, tablets, notebooks, desktops, retina and big screens</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-plus-sign-alt icon-2x gap-right"></i> Highly Accessible</h4>
+              <p>Built with a focus on accessibility, supporting <abbr title="Accessible Rich Internet Applications">ARIA</abbr> state/role and semantic element selectors</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-thumbs-up icon-2x gap-right"></i> Semantic</h4>
+              <p>Supports semantic markup with <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attribute selectors, using Sass' @extend, @mixins, %placeholders & more</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-magic icon-2x gap-right"></i> Built with Sass</h4>
+              <p>Built from the ground up with <a href="http://sass-lang.com/" target="_blank">Sass</a>, the world's most powerful CSS preprocessor</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-cogs icon-2x gap-right"></i> Write Less, Do more</h4>
+              <p>Keep source code free of vendor prefixes. <a href="https://github.com/ai/autoprefixer" target="_blank">Autoprefixer</a> is a CSS postprocessor that keeps code future-friendly</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-edit-sign icon-2x gap-right"></i> Customizable</h4>
+              <p>Easy to customize, and add your own styles and bolt on additional functionality</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-text-width icon-2x gap-right"></i> Responsive Text</h4>
+              <p>Includes the tools you need to create responsive headings, responsive text blocks and responsive tables</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-star icon-2x gap-right"></i> Rapid Prototyping</h4>
+              <p>Rapid prototyping and wireframes with dynamic placeholder text, images and fonts</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="pad-top pad-left pad-right bounceInRight animated">
+        <h4 class="zero">Example Layouts and Documentation</h4>
+        <p>Rapid prototypes and usage examples to get you started.</p>
+      </div>
+      <div class="row">
+        <div class="one fourth two-up-small-tablet padded bounceInDown animated"><a href="./layout_a.html">
+            <h5 class="asphalt box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/layout-a.png', :class => "round") %>
+                <div class="small turquoise button">Web Site Layout</div>
+              </div>
+            </h5></a></div>
+        <div class="one fourth two-up-small-tablet padded bounceInLeft animated"><a href="./layout_b.html">
+            <h5 class="yellow box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/layout-b.png', :class => "round") %>
+                <div class="small orange button">Image Gallery</div>
+              </div>
+            </h5></a></div>
+        <div class="one fourth two-up-small-tablet padded bounceInUp animated"><a href="./layout_c.html">
+            <h5 class="pink box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/layout-c.png', :class => "round") %>
+                <div class="small purple button">Ecommerce</div>
+              </div>
+            </h5></a></div>
+        <div class="one fourth two-up-small-tablet padded bounceInRight animated"><a href="./grid.html">
+            <h5 class="green box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/example-usage.png', :class => "round") %>
+                <div class="small asphalt button">Usage Examples</div>
+              </div>
+            </h5></a></div>
+      </div>