colorgy_style 0.0.0.1 → 0.0.0.2

data/lib/colorgy_style/version.rb

@@ -1,3 +1,3 @@
 module ColorgyStyle
-  VERSION = "0.0.0.1"
+  VERSION = "0.0.0.2"
 end

data/styleguide/index.html.haml

@@ -4,4 +4,43 @@ layout: default
 ---
 
 %h1 Styleguide
-= styleblock 'button', section: '2.1'
+
+= styleblock 'button', section: 'Button'
+
+= styleblock 'button_group', section: 'ButtonGroup'
+
+= styleblock 'dropdown', section: 'Dropdown'
+
+= styleblock 'input_group', section: 'InputGroup'
+
+= styleblock 'nav', section: 'Nav'
+
+= styleblock 'navbar', section: 'Navbar'
+
+= styleblock 'breadcrumb', section: 'Breadcrumb'
+
+= styleblock 'pagination', section: 'Pagination'
+
+= styleblock 'pager', section: 'Pager'
+
+= styleblock 'label', section: 'Label'
+
+= styleblock 'badge', section: 'Badge'
+
+= styleblock 'page_header', section: 'PageHeader'
+
+= styleblock 'thumbnail', section: 'Thumbnail'
+
+= styleblock 'alert', section: 'Alert'
+
+= styleblock 'progress_bar', section: 'ProgressBar'
+
+= styleblock 'media', section: 'Media'
+
+= styleblock 'list_group', section: 'ListGroup'
+
+= styleblock 'panel', section: 'Panel'
+
+= styleblock 'well', section: 'Well'
+
+= styleblock 'toast', section: 'Toast'

data/styleguide/javascripts/body.js

@@ -1,5 +1,11 @@
 //= require colorgy
+//= require colorgy/addons/holder
 //= require ./styleguide/kss
 //= require ./styleguide/prism
 
-$(document).on('ready page:load', Prism.highlightAll);
+$(document).on('ready page:load', function () {
+  Prism.highlightAll();
+  $('.styleguide-example a[href="#"]').click(function (e) {
+    e.preventDefault();
+  });
+});

data/styleguide/styleblocks/_alert.html.erb

@@ -0,0 +1,3 @@
+<div class="alert$modifier_class" role="alert">
+  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert</a> needs your attention.
+</div>

data/styleguide/styleblocks/_badge.html.erb

@@ -0,0 +1,5 @@
+<a href="#">Inbox <span class="badge$modifier_class">42</span></a>
+
+<button class="btn" type="button">
+  Messages <span class="badge$modifier_class">4</span>
+</button>

data/styleguide/styleblocks/_breadcrumb.html.erb

@@ -0,0 +1,5 @@
+<ol class="breadcrumb$modifier_class">
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Library</a></li>
+  <li class="active">Data</li>
+</ol>

data/styleguide/styleblocks/_button.html.erb

@@ -5,19 +5,19 @@
 <input class="btn$modifier_class" type="submit" value="Submit">
 
 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
-<button type="button" class="btn btn-primary$modifier_class">Primary</button>
+<button type="button" class="btn primary$modifier_class">Primary</button>
 
 <!-- Indicates a successful or positive action -->
-<button type="button" class="btn btn-success$modifier_class">Success</button>
+<button type="button" class="btn success$modifier_class">Success</button>
 
 <!-- Contextual button for informational alert messages -->
-<button type="button" class="btn btn-info$modifier_class">Info</button>
+<button type="button" class="btn info$modifier_class">Info</button>
 
 <!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning$modifier_class">Warning</button>
+<button type="button" class="btn warning$modifier_class">Warning</button>
 
 <!-- Indicates a dangerous or potentially negative action -->
-<button type="button" class="btn btn-danger$modifier_class">Danger</button>
+<button type="button" class="btn danger$modifier_class">Danger</button>
 
 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
-<button type="button" class="btn btn-link$modifier_class">Link</button>
+<button type="button" class="btn link$modifier_class">Link</button>

data/styleguide/styleblocks/_button_group.html.erb

@@ -0,0 +1,41 @@
+<!-- Basic -->
+<div class="btn-group$modifier_class" role="group" aria-label="...">
+  <a type="button" class="btn btn-default">Left</a>
+  <a type="button" class="btn btn-default">Middle</a>
+  <a type="button" class="btn btn-default">Right</a>
+</div>
+
+<!-- Combine sets in a toolbar -->
+<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group$modifier_class" role="group" aria-label="First group">
+    <a type="button" class="btn btn-default">1</a>
+    <a type="button" class="btn btn-default">2</a>
+    <a type="button" class="btn btn-default">3</a>
+    <a type="button" class="btn btn-default">4</a>
+  </div>
+  <div class="btn-group$modifier_class" role="group" aria-label="Second group">
+    <a type="button" class="btn btn-default">5</a>
+    <a type="button" class="btn btn-default">6</a>
+    <a type="button" class="btn btn-default">7</a>
+  </div>
+  <div class="btn-group$modifier_class" role="group" aria-label="Third group">
+    <a type="button" class="btn btn-default">8</a>
+  </div>
+</div>
+
+<!-- Nesting with dropdowns -->
+<div class="btn-group$modifier_class" role="group" aria-label="...">
+  <a type="button" class="btn btn-default">1</a>
+  <a type="button" class="btn btn-default">2</a>
+
+  <div class="btn-group$modifier_class" role="group">
+    <a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+      Dropdown
+      <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu" role="menu">
+      <li><a href="#">Dropdown link</a></li>
+      <li><a href="#">Dropdown link</a></li>
+    </ul>
+  </div>
+</div>

data/styleguide/styleblocks/_dropdown.html.erb

@@ -0,0 +1,65 @@
+<div class="dropdown">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
+    Dropdown
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu$modifier_class" role="menu" aria-labelledby="dropdownMenu3">
+    <li role="presentation" class="dropdown-header">Dropdown header</li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+    <li role="presentation" class="dropdown-header">Dropdown header</li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+    <li role="presentation" class="divider"></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
+  </ul>
+</div>
+
+<hr>
+
+<!-- Droup "up" -->
+<div class="dropup">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
+    Dropup
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu$modifier_class" role="menu" aria-labelledby="dropdownMenu2">
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<hr>
+
+<!-- Single button dropdown -->
+<div class="btn-group">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+    Action <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu$modifier_class" role="menu">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<!-- Split button dropdown -->
+<div class="btn-group">
+  <button type="button" class="btn btn-danger">Action</button>
+  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+    <span class="caret"></span>
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <ul class="dropdown-menu$modifier_class" role="menu">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>

data/styleguide/styleblocks/_input_group.html.erb

@@ -0,0 +1,131 @@
+<div class="input-group$modifier_class">
+  <span class="input-group-addon" id="basic-addon1">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
+</div>
+
+<div class="input-group$modifier_class">
+  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+  <span class="input-group-addon" id="basic-addon2">@example.com</span>
+</div>
+
+<div class="input-group$modifier_class">
+  <span class="input-group-addon">$</span>
+  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+  <span class="input-group-addon">.00</span>
+</div>
+
+<!-- Checkboxes and radio addons -->
+<div class="row">
+  <div class="col-lg-6">
+    <div class="input-group$modifier_class">
+      <span class="input-group-addon">
+        <input type="checkbox" aria-label="...">
+      </span>
+      <input type="text" class="form-control" aria-label="...">
+    </div><!-- /input-group -->
+  </div><!-- /.col-lg-6 -->
+  <div class="col-lg-6">
+    <div class="input-group$modifier_class">
+      <span class="input-group-addon">
+        <input type="radio" aria-label="...">
+      </span>
+      <input type="text" class="form-control" aria-label="...">
+    </div><!-- /input-group -->
+  </div><!-- /.col-lg-6 -->
+</div><!-- /.row -->
+
+<!-- Button addons -->
+<div class="row">
+  <div class="col-lg-6">
+    <div class="input-group$modifier_class">
+      <span class="input-group-btn">
+        <button class="btn btn-default" type="button">Go!</button>
+      </span>
+      <input type="text" class="form-control" placeholder="Search for...">
+    </div><!-- /input-group -->
+  </div><!-- /.col-lg-6 -->
+  <div class="col-lg-6">
+    <div class="input-group$modifier_class">
+      <input type="text" class="form-control" placeholder="Search for...">
+      <span class="input-group-btn">
+        <button class="btn btn-default" type="button">Go!</button>
+      </span>
+    </div><!-- /input-group -->
+  </div><!-- /.col-lg-6 -->
+</div><!-- /.row -->
+
+<!-- Buttons with dropdowns -->
+<div class="row">
+  <div class="col-lg-6">
+    <div class="input-group$modifier_class">
+      <div class="input-group-btn">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </div><!-- /btn-group -->
+      <input type="text" class="form-control" aria-label="...">
+    </div><!-- /input-group -->
+  </div><!-- /.col-lg-6 -->
+  <div class="col-lg-6">
+    <div class="input-group$modifier_class">
+      <input type="text" class="form-control" aria-label="...">
+      <div class="input-group-btn">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
+        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </div><!-- /btn-group -->
+    </div><!-- /input-group -->
+  </div><!-- /.col-lg-6 -->
+</div><!-- /.row -->
+
+<!-- Segmented buttons -->
+<div class="row">
+  <div class="col-lg-6">
+    <div class="input-group">
+      <div class="input-group-btn">
+        <button type="button" class="btn btn-default">Action</button>
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+          <span class="caret"></span>
+          <span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </div>
+      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
+    </div><!-- /.input-group -->
+  </div><!-- /.col-lg-6 -->
+  <div class="col-lg-6">
+    <div class="input-group">
+      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
+      <div class="input-group-btn">
+        <button type="button" class="btn btn-default">Action</button>
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+          <span class="caret"></span>
+          <span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </div>
+    </div><!-- /.input-group -->
+  </div><!-- /.col-lg-6 -->
+</div>

data/styleguide/styleblocks/_label.html.erb

@@ -0,0 +1,7 @@
+<h1>Example heading <span class="label$modifier_class">New</span></h1>
+<h2>Example heading <span class="label$modifier_class">New</span></h2>
+<h3>Example heading <span class="label$modifier_class">New</span></h3>
+<h4>Example heading <span class="label$modifier_class">New</span></h4>
+<h5>Example heading <span class="label$modifier_class">New</span></h5>
+<h6>Example heading <span class="label$modifier_class">New</span></h6>
+<p>Example paragraph <span class="label$modifier_class">New</span></p>

data/styleguide/styleblocks/_list_group.html.erb

@@ -0,0 +1,31 @@
+<div class="row">
+  <div class="col-lg-6">
+    <ul class="list-group">
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">
+        <span class="badge">14</span>
+        Dapibus ac facilisis in
+      </li>
+      <li class="list-group-item active">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item disabled">Vestibulum at eros</li>
+    </ul>
+  </div><!-- /.col-lg-6 -->
+  <div class="col-lg-6">
+    <!-- Custom content -->
+    <div class="list-group">
+      <div class="list-group-item active">
+        <h4 class="list-group-item-heading" id="list-group-item-heading">List group item heading<a class="anchorjs-link" href="#list-group-item-heading"><span class="anchorjs-icon"></span></a></h4>
+        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      </div>
+      <div class="list-group-item">
+        <h4 class="list-group-item-heading" id="list-group-item-heading">List group item heading<a class="anchorjs-link" href="#list-group-item-heading"><span class="anchorjs-icon"></span></a></h4>
+        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      </div>
+      <div class="list-group-item">
+        <h4 class="list-group-item-heading" id="list-group-item-heading">List group item heading<a class="anchorjs-link" href="#list-group-item-heading"><span class="anchorjs-icon"></span></a></h4>
+        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      </div>
+    </div>
+  </div><!-- /.col-lg-6 -->
+</div>

data/styleguide/styleblocks/_media.html.erb

@@ -0,0 +1,60 @@
+<div class="media">
+  <div class="media-left">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+  </div>
+  <div class="media-body">
+    <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
+    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+  </div>
+</div>
+<div class="media">
+  <div class="media-left">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+  </div>
+  <div class="media-body">
+    <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
+    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+    <div class="media">
+      <div class="media-left">
+        <a href="#">
+          <img class="media-object" data-src="holder.js/64x64">
+        </a>
+      </div>
+      <div class="media-body">
+        <h4 class="media-heading" id="nested-media-heading">Nested media heading<a class="anchorjs-link" href="#nested-media-heading"><span class="anchorjs-icon"></span></a></h4>
+        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+      </div>
+    </div>
+  </div>
+</div>
+<div class="media">
+  <div class="media-body">
+    <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
+    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+  </div>
+  <div class="media-right">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+  </div>
+</div>
+<div class="media">
+  <div class="media-left">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+  </div>
+  <div class="media-body">
+    <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
+    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+  </div>
+  <div class="media-right">
+    <a href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+  </div>
+</div>