themepile-abstractio 1.0.4 → 4.1.7

data/docs/components/block-grid.html.erb

@@ -0,0 +1,132 @@
+<% @side_nav = "grid" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Block Grid" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.</h4>
+
+        <ul class="small-block-grid-2 large-block-grid-4">
+          <li><img class="th" src="../img/demos/demo1.jpg"></li>
+          <li><img class="th" src="../img/demos/demo2.jpg"></li>
+          <li><img class="th" src="../img/demos/demo3.jpg"></li>
+          <li><img class="th" src="../img/demos/demo4.jpg"></li>
+        </ul>
+
+        <hr>
+
+        <h3>Building With Predefined HTML Classes</h3>
+        <p>Block grids are made from a <code>ul.small-block-grid-#</code> or <code>ul.large-block-grid-#</code>. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.</p>
+
+        <p>These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the <code>small-block-grid</code> only, the grid will keep its spacing and configuration no matter the screen size. If you use <code>large-block-grid</code> only, the list items will stack on top of each other for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.</p>
+
+<%= code_example '
+<!-- Using only the small-block-grid -->
+<ul class="small-block-grid-2">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></li>
+</ul>
+
+<!-- Using only the large-block-grid -->
+<ul class="large-block-grid-4">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></li>
+</ul>
+
+<!-- Using both block grids together for different layouts -->
+<ul class="small-block-grid-2 large-block-grid-4">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></li>
+</ul>
+', :html %>
+
+        <p>For these styles to take effect, make sure you have the <strong>default Abstractio CSS package</strong> or that you've <strong>selected block grid from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Using The Mixin</h3>
+        <p>We've included SCSS mixins used to style block-grids. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/abstractio/tree/master/scss/abstractio/components">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/abstractio/tree/master/scss/abstractio/components">_block-grid.scss</a> from Github and throw them into a abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/block-grid";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure. Since we don't have any media queries baked into the mixin itself, you can apply the styles at whatever breakpoint you want! Just change the configuration within each.</p>
+
+<%= code_example '
+<ul class="your-class-name">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></li>
+</ul>', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your block-grid using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options configuring the block grid layout and margin on the fly. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Mixin and configurable options */
+.your-class-name { @include block-grid($per-row, $spacing, $base-styles); }
+
+/* This controls how many elements will be on each row of the block grid. */
+/* Set this to whatever number you need, up to the max allowed in the variable */
+$per-row: false
+
+/* This controls how much space is between each item in the block grid */
+$spacing: $block-grid-default-spacing
+
+/* This controls whether or not base styles come through, set to false to leave out */
+/* This is handy for when you create multiple block-grids and want less CSS output repetition */
+$base-style: true
+', :css %>
+
+        <ul class="small-block-grid-5">
+          <li><img src="../img/demos/demo1.jpg"></li>
+          <li><img src="../img/demos/demo2.jpg"></li>
+          <li><img src="../img/demos/demo3.jpg"></li>
+          <li><img src="../img/demos/demo4.jpg"></li>
+          <li><img src="../img/demos/demo5.jpg"></li>
+        </ul>
+
+        <h5>Clearing Block Grid Rows</h5>
+        <p>We have this built into the CSS, but you'll need to add a bit of code if you want your block grid to change layout between breakpoints. If you don't use this, it will inherit whatever you put in the smallest media query. This code looks for the <code>n+1</code> of the grid so that it clears properly. That code looks like this:</p>
+
+<%= code_example '
+.your-small-class-name > li { clear: none !important; }
+', :css %>
+
+        <p><strong>Note:</strong> If you are using the same class across breakpoints, your mixin should override this and you won't need it. If you want to control the layout using different classes, use the above snippet.</p>
+
+        <h5>Available SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to control the maximum blocks and spacing */
+$block-grid-elements: 12;
+$block-grid-default-spacing: 10px;
+
+/* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
+$block-grid-media-queries: true
+', :css %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+
+
+

data/docs/components/breadcrumbs.html.erb

@@ -0,0 +1,156 @@
+<% @side_nav = "nav" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Breadcrumbs" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Breadcrumbs come in handy to show a navigation trail for users clicking through a site or app. They'll conform to 100% of the container width you put them in.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <ul class="breadcrumbs">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Features</a></li>
+          <li class="unavailable"><a href="#">Gene Splicing</a></li>
+          <li class="current"><a href="#">Cloning</a></li>
+        </ul>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build breadcrumbs in Abstractio 4: with our predefined HTML classes or with our structure and mixins. Building breadcrumbs using our predefined class is easy. You'll need an <code>&lt;ul class="breadcrumbs"&gt;</code> with <code>&lt;li&gt;</code> elements inside. You have access to two state classes: <code>&lt;li class="unavailable"&gt;</code> and <code>&lt;li class="current"&gt;</code> to control link intentions. The default markup looks like this:</p>
+
+<%= code_example '
+<ul class="breadcrumbs">
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Features</a></li>
+  <li class="unavailable"><a href="#">Gene Splicing</a></li>
+  <li class="current"><a href="#">Cloning</a></li>
+</ul>
+
+<!-- You can also use this markup -->
+<nav class="breadcrumbs">
+  <a href="#">Home</a>
+  <a href="#">Features</a>
+  <a class="unavailable" href="#">Gene Splicing</a>
+  <a class="current" href="#">Cloning</a>
+</nav>', :html %>
+
+        <p>For these styles to come across, make sure you have the <strong>default Abstractio CSS package</strong> or that you've selected <strong>breadcrumbs from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with Mixins</h3>
+        <p>We've included SCSS mixins used to style breadcrumbs. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/_abstractio-global.scss">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_breadcrumbs.scss">_breadcrumbs.scss</a> from Github and throw them into a Abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/breadcrumbs";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>
+
+<%= code_example '
+<ul class="your-class-name">
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Features</a></li>
+  <li class="unavailable"><a href="#">Gene Splicing</a></li>
+  <li class="current"><a href="#">Cloning</a></li>
+</ul>', :html %>
+
+        <h5>Container Mixin</h5>
+        <p>You can build your breadcrumbs using our global mixin by including it on your custom class or ID in your stylesheet. The container mixin will create the necessary style for the <code>&lt;ul&gt;</code>. The global mixin looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include crumb-container; }
+', :css %>
+
+    <ul class="crumb-container">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Features</a></li>
+      <li class="unavailable"><a href="#">Gene Splicing</a></li>
+      <li class="current"><a href="#">Cloning</a></li>
+    </ul>
+
+        <h5>Crumbs Mixin</h5>
+        <p>Use this mixin to apply the list item and link styles to items inside the breadcrumb container. You attach this mixin to the list items inside of your container.</p>
+
+
+<%= code_example '
+.your-class-name {
+  @include crumb-container;
+
+  li { @include crumbs; }
+}
+', :css %>
+
+    <ul class="crumb-container crumbs">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Features</a></li>
+      <li class="unavailable"><a href="#">Gene Splicing</a></li>
+      <li class="current"><a href="#">Cloning</a></li>
+    </ul>
+
+        <h5>Radius Mixin</h5>
+        <p>We've also created a global radius mixin that you can use to add border-radius to any element you'd like.</p>
+
+<%= code_example '
+.your-class-name {
+  @include crumb-container;
+  @include radius($radius);
+
+  li { @include crumbs; }
+}
+', :css %>
+
+    <ul class="crumb-container crumbs radius">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Features</a></li>
+      <li class="unavailable"><a href="#">Gene Splicing</a></li>
+      <li class="current"><a href="#">Cloning</a></li>
+    </ul>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use this to set the background color for the breadcrumb container */
+$crumb-bg:                     lighten($secondaryColor, 5%);
+
+/* We use these to set the padding around the breadcrumbs. */
+$crumb-padding:                emCalc(6px) emCalc(14px) emCalc(9px);
+$crumb-side-padding:           emCalc(12px);
+
+/* We use these to control border styles. */
+$crumb-function-factor:        10%;
+$crumb-border-size:            1px;
+$crumb-border-style:           solid;
+$crumb-border-color:           darken($crumb-bg, $crumb-function-factor);
+$crumb-radius:                 $global-radius;
+
+/* We use these to set various text styles for breadcrumbs. */
+$crumb-font-size:              emCalc(11px);
+$crumb-font-color:             $primary-color;
+$crumb-font-color-current:     #333;
+$crumb-font-color-unavailable: #999;
+$crumb-font-transform:         uppercase;
+$crumb-link-decor:             underline;
+
+/* We use these to control the slash between breadcrumbs */
+$crumb-slash-color:            #aaa;
+$crumb-slash:                  "/";
+', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/button-groups.html.erb

@@ -0,0 +1,230 @@
+<% @side_nav = "buttons" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Button Groups" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Button groups are great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <ul class="button-group">
+          <li><a href="#" class="small button">Button 1</a></li>
+          <li><a href="#" class="small button">Button 2</a></li>
+          <li><a href="#" class="small button">Button 3</a></li>
+        </ul>
+        <ul class="button-group radius">
+          <li><a href="#" class="button secondary">Button 1</a></li>
+          <li><a href="#" class="button secondary">Button 2</a></li>
+          <li><a href="#" class="button secondary">Button 3</a></li>
+          <li><a href="#" class="button secondary">Button 4</a></li>
+        </ul>
+        <ul class="button-group round even-3">
+          <li><a href="#" class="button alert">Button 1</a></li>
+          <li><a href="#" class="button alert">Button 2</a></li>
+          <li><a href="#" class="button alert">Button 3</a></li>
+        </ul>
+        <ul class="button-group round even-3">
+          <li><input type="submit" class="button success" value="Button 1"></li>
+          <li><input type="submit" class="button success" value="Button 2"></li>
+          <li><input type="submit" class="button success" value="Button 3"></li>
+        </ul>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build button groups in Abstractio 4: with our predefined HTML classes or with our structure and mixins. Building button groups using our predefined classes is a breeze, you'll just wrap a <a href="buttons.html">button</a> inside an <code>&lt;ul&gt;</code>.</p>
+
+        <p>The button styles will work the same as they do when building a single button, but they'll float next to each other to create a group. You also have access to the same radius classes as buttons, only they'll go on the unordered list instead of the button. You can even make sure the buttons take up even space within the container you put them in.</p>
+
+        <ul class="disc">
+          <li>The radius classes: <code>.radius</code> or <code>.round</code>.</li>
+          <li>The even classes: <code>.even-2</code> through <code>.even-8</code> to control the even widths.</li>
+        </ul>
+
+<%= code_example '
+<!-- A default button-group with small buttons inside -->
+<ul class="button-group">
+  <li><a href="#" class="small button">Button 1</a></li>
+  <li><a href="#" class="small button">Button 2</a></li>
+  <li><a href="#" class="small button">Button 3</a></li>
+</ul>
+
+<!-- A round, even-3 button-group with default alert buttons inside. -->
+<!-- Do not put the radius classes on the buttons themselves. -->
+<ul class="button-group round even-3">
+  <li><a href="#" class="button alert">Button 1</a></li>
+  <li><a href="#" class="button alert">Button 2</a></li>
+  <li><a href="#" class="button alert">Button 3</a></li>
+</ul>
+', :html %>
+
+        <h5>Button Bars</h5>
+        <p>A button bar is a group of button groups (I N C E P T I O N), perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a <code>.button-bar</code> and Abstractio takes care of the rest.</p>
+
+<%= code_example '
+<div class="button-bar">
+  <ul class="button-group">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+  <ul class="button-group">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+</div>
+', :html %>
+<div class="button-bar">
+  <ul class="button-group">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+  <ul class="button-group secondary">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+</div>
+
+
+        <p>For any of these styles to take effect, make sure you have the <strong>default Abstractio CSS package</strong> or that you've selected <strong>buttons and button-groups from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with Mixins</h3>
+        <p>We've included SCSS mixins used to style button groups. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/_abstractio-global.scss">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_buttons.scss">_buttons.scss</a> and <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_button-groups.scss">_button-groups.scss</a> from Github and throw them into a Abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/buttons", "abstractio/components/button-groups";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>
+
+<%= code_example '
+<ul class="your-class-name">
+  <li><a href="#" class="your-button-class">Button 1</a></li>
+  <li><a href="#" class="your-button-class">Button 2</a></li>
+  <li><a href="#" class="your-button-class">Button 3</a></li>
+</ul>
+', :html %>
+
+        <h5>Container Mixin</h5>
+        <p>Since button groups need to be within a list to work properly, you'll need to create some styles for the list container that you use.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container; }
+', :css %>
+
+        <p>You'll also need to make sure to include some styles for your buttons inside the group. Either use a class you've already styled, or apply it specifically here.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container;
+  .your-button-class { @include button; }
+}
+', :css %>
+
+        <ul class="button-group-docs">
+          <li><a href="#" class="button-class">Button 1</a></li>
+          <li><a href="#" class="button-class">Button 2</a></li>
+          <li><a href="#" class="button-class">Button 3</a></li>
+        </ul>
+
+        <h5>Style Mixin</h5>
+        <p>With this mixin, you'll be able to make the rest of the button-group, including: radius, even with styles and floats. You'll apply this mixin to the <code>&lt;li&gt;</code> elements of the button group list.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container;
+  .your-button-class { @include button; }
+
+  & > li { @include button-group-style($radius, $even, $float); }
+}
+
+/* This controls the radius of the left and right edges. */
+/* Set to true or px value */
+$radius: false
+
+/* This makes the buttons take up even space in their container */
+/* Set to the number of buttons in the group */
+$even: false
+
+/* Controls how the buttons in the group floatm set to left or right */
+$float: left
+', :css %>
+
+    <ul class="button-group-docs list">
+      <li><a href="#" class="button-class">Button 1</a></li>
+      <li><a href="#" class="button-class">Button 2</a></li>
+      <li><a href="#" class="button-class">Button 3</a></li>
+    </ul>
+
+          <h5>Inset Shadow, Border Radius &amp; Transition Mixin</h5>
+          <p>Sometimes you want to add a nice fancy shine to the edge of your buttons. And sometimes you want to make that shine look like it gets depressed upon tap or click. We've got you covered with our quick inset shadow mixin. You can use our radius mixin to quickly apply rounded corners or a transition mixin to give the buttons a fade effect.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container;
+  .your-button-class {
+    @include button;
+    @include inset-shadow;
+    @include single-transition;
+  }
+
+  & > li { @include button-group-style(true); }
+}
+', :css %>
+
+    <ul class="button-group-docs list extras">
+      <li><a href="#" class="button-class">Button 1</a></li>
+      <li><a href="#" class="button-class">Button 2</a></li>
+      <li><a href="#" class="button-class">Button 3</a></li>
+    </ul>
+
+        <h5>Building Button Bars</h5>
+        <p>You can also build button bars with mixin options.</p>
+<%= code_example '
+<div class="your-bar-class-name">
+  <ul class="your-class-name">
+    <li><a href="#" class="your-button-class">Button 1</a></li>
+    <li><a href="#" class="your-button-class">Button 2</a></li>
+    <li><a href="#" class="your-button-class">Button 3</a></li>
+  </ul>
+  <ul class="your-class-name">
+    <li><a href="#" class="your-button-class">Button 1</a></li>
+    <li><a href="#" class="your-button-class">Button 2</a></li>
+    <li><a href="#" class="your-button-class">Button 3</a></li>
+  </ul>
+</div>
+', :html %>
+
+<%= code_example '
+.your-bar-class-name { @include clearfix;
+  .your-button-class { @include button-group-container(false,true); }
+}
+', :css %>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use this to set the margin below button groups. */
+$button-bar-margin-right: emCalc(10px);
+', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+