modularis 0.0.1

data/docs/components/clearing.html.erb

@@ -0,0 +1,152 @@
+<% @side_nav = "js" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Clearing" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Since Orbit isn't intended for variable-height content, we decided it would be a great idea to create a plugin that would help in that regard. Clearing makes it easy to create responsive lightboxes with any size image.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <ul class="clearing-thumbs" data-clearing>
+          <li><a class="th" href="../img/demos/demo1.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="../img/demos/demo1-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo3.jpg"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="../img/demos/demo3-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo4.jpg"><img src="../img/demos/demo4-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo5.jpg"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="../img/demos/demo5-th.jpg"></a></li>
+        </ul>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build Your Clearing Lightbox</h3>
+        <p>There is only one way to build a Clearing lightbox, using our predefined class and data-attribute structure. We've made it really easy: gather some images, decide on their order, and put them into a <code>&lt;ul class="clearing-thumbs"&gt;</code> of your choice. In order to get Clearing to build itself properly, you'll need to have Javascript properly included. We outline <a href="#js">Clearing JS</a> a bit further down the page.</p>
+
+        <p>Once you get your JS hooked up, you'll need to add <code>data-clearing</code> to your list container. Here's an example of the most basic markup needed:</p>
+
+<%= code_example '
+<ul class="clearing-thumbs" data-clearing>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+</ul>', :html %>
+
+        <h5>Styling the List</h5>
+        <p>We're using the <code>.th</code> class from Modularis to style the thumbnails in the Clearing example at the top of the page. You can also use <code>@include thumb;</code> in SCSS to use those same styles.</p></aside>
+
+        <hr>
+
+        <h4>Start From a Featured Image</h4>
+        <p>Sometimes you don't want to show a gallery full of images on your site, but you want to open the gallery from a single image. By including all of your images in the list and using <code>.clearing-feature</code> on the <code>&lt;li&gt;</code> of your choice, you'll be able to hide the rest of the images in the on-page gallery. If you want to show more than once, try using our <code>.hide</code> class to set the ones you don't want to <code>display: none;</code>.</p>
+
+<%= code_example '
+<ul class="clearing-thumbs" data-clearing>
+  <li class="clearing-feature"><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+</ul>', :html %>
+
+        <div class="row">
+          <div class="large-12 columns">
+            <ul class="clearing-thumbs" data-clearing>
+              <li class="clearing-feature"><a class="th" href="../img/demos/demo1.jpg"><img src="../img/demos/demo1-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo3.jpg"><img src="../img/demos/demo3-th.jpg"></a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h4>Including Captions</h4>
+        <p>Another common use-case for Lightboxes is to include a caption per image. We've made this quick and easy by using data-attributes to hold the content. You'll just attach this attribute to the image it belongs to and voila!</code> Here's the code example:</p>
+
+<%= code_example '
+<ul class="clearing-thumbs" data-clearing>
+  <li><a href="path/to/your/img"><img data-caption="caption here..." src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img data-caption="caption 2 here..." src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img data-caption="caption 3 here..." src="path/to/your/img-th"></a></li>
+</ul>', :html %>
+
+        <div class="row">
+          <div class="large-12 columns">
+            <ul class="clearing-thumbs" data-clearing>
+              <li><a class="th" href="../img/demos/demo1.jpg"><img data-caption="caption here..." src="../img/demos/demo1-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo2.jpg"><img data-caption="caption 2 here..." src="../img/demos/demo2-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo3.jpg"><img data-caption="caption 3 here..." src="../img/demos/demo3-th.jpg"></a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Available SCSS Variables</h3>
+        <p>We opted not to create mixins for this plugin because it relies on classes in the JS to work. These variables should give you the control you need to change styles as you see fit:</p>
+<%= code_example '
+/* We use these to set the background colors for parts of Clearing. */
+$clearing-bg:                           #111;
+$clearing-caption-bg:                   $clearing-bg;
+$clearing-carousel-bg:                  #111;
+$clearing-img-bg:                       $clearing-bg;
+
+/* We use these to style the close button */
+$clearing-close-color:                  #fff;
+$clearing-close-size:                   40px;
+
+/* We use these to style the arrows */
+$clearing-arrow-size:                   16px;
+$clearing-arrow-color:                  $clearing-close-color;
+
+/* We use these to style captions */
+$clearing-caption-font-color:           #fff;
+$clearing-caption-padding:              10px 30px;
+
+/* We use these to make the image and carousel height and style */
+$clearing-active-img-height:            75%;
+$clearing-carousel-height:              150px;
+$clearing-carousel-thumb-width:         175px;
+$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
+', :css %>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>To make sure Clearing works properly, you'll need to include <code>modularis.clearing.js</code> if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>modularis.js</code> above the Clearing plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory:</p>
+
+        <p><a href="../javascript.html" title="How to install Modularis JavaScript">Read how to install Modularis JavaScript</a></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>As of Clearing 4.1.2, you can now pass in options to <code>data-options</code> when the clearing is initialized on the page.</p>
+
+<%= code_example "
+{
+  // specify the classes or IDs will close clearing when clicked.
+  close_selectors : '.clearing-close'
+}", :js %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>

data/docs/components/custom-forms.html.erb

@@ -0,0 +1,309 @@
+<% @side_nav = "forms" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Custom Forms" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">It's so crazy easy to create easy-to-style custom forms. It's practically a crime.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <form class="custom">
+          <div class="row">
+            <div class="large-4 columns">
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+            </div>
+            <div class="large-4 columns">
+              <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
+              <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+              <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+            </div>
+            <div class="large-4 columns">
+              <label for="customDropdown1">Medium Example</label>
+              <select id="customDropdown1" class="medium">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </div>
+          </div>
+        </form>
+
+        <hr>
+
+        <p>We've learned a lot from our previous iteration of custom forms. Thanks to awesome community contributions, we have even better custom forms. The new implementation is cleaner and more succinct, with less duplication of code. You just need to make sure to have the right JS hooked up for things to work properly; <a href="#js">learn more about that below</a>. The example above looks like this:</p>
+
+<%= code_example '
+<form class="custom">
+  <div class="row">
+    <div class="large-4 columns">
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+    </div>
+    <div class="large-4 columns">
+      <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
+      <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+      <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+    </div>
+    <div class="large-4 columns">
+      <label for="customDropdown1">Medium Example</label>
+      <select id="customDropdown1" class="medium">
+        <option DISABLED>This is a dropdown</option>
+        <option>This is another option</option>
+        <option>This is another option too</option>
+        <option>Look, a third option</option>
+      </select>
+    </div>
+  </div>
+</form>', :html %>
+
+        <hr>
+
+        <h3>Building Custom Radio Inputs</h3>
+        <p>A radio input is a common form element that can look pretty ugly by default. We've simplified the look and feel with a custom <code>&lt;span&gt;</code> that you can customize if you need to. You can even use <code>&lt;input disabled&gt;</code> to make the radio inactive.</p>
+
+<%= code_example '
+<form class="custom">
+  <label for="radio1">
+    <input name="radio1" type="radio" id="radio1" style="display:none;">
+    <span class="custom radio"></span> Radio Button 1
+  </label>
+</form>', :html %>
+
+        <form class="custom">
+          <label for="radio1">
+            <input name="radio1" type="radio" id="radio1" style="display:none;">
+            <span class="custom radio"></span> Radio Button 1
+          </label>
+        </form>
+
+        <hr>
+
+        <h3>Building Custom Checkboxes</h3>
+        <p>The checkbox input is another very common form element. These are handy for lists of options that can be selected in multiples, things like finding out which Ke$ha song should be used for a room name. You can build these using the same <code>&lt;span&gt;</code> technique. You can even use <code>&lt;input disabled&gt;</code> to make the radio inactive.</p>
+
+<%= code_example '
+<form class="custom">
+  <label for="checkbox1">
+    <input type="checkbox" id="checkbox1" style="display: none;">
+    <span class="custom checkbox"></span> Label for Checkbox
+  </label>
+</form>', :html %>
+
+        <form class="custom">
+          <label for="checkbox1">
+            <input type="checkbox" id="checkbox1" style="display: none;">
+            <span class="custom checkbox"></span> Label for Checkbox
+          </label>
+        </form>
+
+        <hr>
+
+        <h3>Building Custom Selects</h3>
+        <p>Sometimes you need to let people select a single item from a long list of options. This is what <code>&lt;select&gt;</code> elements are for. We've taken these a step further by including our own custom style that looks a lot better than inconsistent browser defaults. You can set any of the <code>&lt;option&gt;</code> elements to <code>&lt;option disabled&gt;</code> to make them unable to select. Custom selects are built like you'd expect:</p>
+        <p>For those who may want to apply custom styles to a specific dropdown, any classes on the <code>&lt;select&gt;</code> element will be appended to the generated <code>&lt;div class=&quot;custom dropdown&quot;&gt;</code> element.</p>
+
+<%= code_example '
+<form class="custom">
+  <label for="customDropdown">Medium Example</label>
+  <select id="customDropdown">
+    <option DISABLED>This is a dropdown</option>
+    <option>This is another option</option>
+    <option>This is another option too</option>
+    <option>Look, a third option</option>
+  </select>
+</form>', :html %>
+
+        <form class="custom">
+          <label for="customDropdown2">Default Example</label>
+          <select id="customDropdown2">
+            <option DISABLED>This is a dropdown</option>
+            <option>This is another option</option>
+            <option>This is another option too</option>
+            <option>Look, a third option</option>
+          </select>
+        </form>
+
+        <h5>Various Sizes</h5>
+        <p>You have access to classes that will control the size of the select element. They'll span 100% of their container by default.</p>
+
+<%= code_example '
+<select id="customDropdown" class="small"></select>
+<select id="customDropdown" class="medium"></select>
+<select id="customDropdown" class="large"></select>
+', :html %>
+
+        <div class="row">
+          <div class="large-3 columns">
+            <form class="custom">
+              <label for="customDropdown3">Small Example</label>
+              <select id="customDropdown3" class="small">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </form>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-9 columns">
+            <form class="custom">
+              <label for="customDropdown4">Medium Example</label>
+              <select id="customDropdown4" class="medium">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </form>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-12 columns">
+            <form class="custom">
+              <label for="customDropdown5">Large Example</label>
+              <select id="customDropdown5" class="large">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </form>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Using the Pre/postfix Concept With Custom Forms</h3>
+        <p>We showed you how to use the prefix and postfix elements on our <a href="forms.html">forms documentation page</a>. You can employ that same technique here and make custom forms act as your slave to create some very complex forms.</p>
+
+<%= code_example '
+<form class="custom">
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse">
+        <div class="large-9 small-9 columns">
+          <span class="prefix">mysubdomain</span>
+        </div>
+        <div class="large-3 small-3 columns">
+          <select>
+            <option>.com</option>
+            <option>.co</option>
+            <option>.ca</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse">
+        <div class="large-10 small-10 columns">
+        <select>
+          <option>google</option>
+          <option>yahoo</option>
+          <option>bing</option>
+        </select>
+        </div>
+        <div class="large-2 small-2 columns">
+          <span class="postfix">.com</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row collapse">
+    <div class="small-8 columns">
+      <select>
+        <option>google</option>
+        <option>yahoo</option>
+        <option>bing</option>
+      </select>
+    </div>
+    <div class="small-4 columns">
+      <a href="#" class="button postfix">Button</a>
+    </div>
+  </div>
+</form>', :html %>
+
+        <form class="custom">
+          <div class="row">
+            <div class="large-6 columns">
+              <div class="row collapse">
+                <div class="large-9 small-9 columns">
+                  <span class="prefix">mysubdomain</span>
+                </div>
+                <div class="large-3 small-3 columns">
+                  <select>
+                    <option>.com</option>
+                    <option>.co</option>
+                    <option>.ca</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="large-6 columns">
+              <div class="row collapse">
+                <div class="large-10 small-10 columns">
+                <select>
+                  <option>google</option>
+                  <option>yahoo</option>
+                  <option>bing</option>
+                </select>
+                </div>
+                <div class="large-2 small-2 columns">
+                  <span class="postfix">.com</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row collapse">
+            <div class="small-8 columns">
+              <select>
+                <option>google</option>
+                <option>yahoo</option>
+                <option>bing</option>
+              </select>
+            </div>
+            <div class="small-4 columns">
+              <a href="#" class="button postfix">Button</a>
+            </div>
+          </div>
+        </form>
+
+        <hr>
+
+        <h3><a name="js"></a>Using the JavaScript</h3>
+        <p>In order to get the custom forms to function, you'll need to include <code>modularis.forms.js</code>. You'll also need to make sure to include <code>zepto.js</code> and <code>modularis.js</code> above the forms plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+
+        <p><a href="../javascript.html" title="How to install Modularis JavaScript">Read how to install Modularis JavaScript</a></p>
+
+        <p>Required Modularis Library: <code>modularis.forms.js</code></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Custom Form options can only be passed in during initialization at this time. However, you can bind to the <i>open</i>, <i>change</i>, and <i>click</i> events depending on the form elements.</p>
+
+<%= code_example "
+{
+  disable_class: 'no-custom'
+}", :js %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>