shibori 1.0.0.beta1

data/source/_patterns/00-atoms/02-buttons/01-btn-sm.mustache

@@ -0,0 +1,7 @@
+<ul class="list-unstyled">
+  <li><button class="btn btn-sm">Default Button</button></li>
+  <li><button class="btn btn-sm btn-alt">Alternate Button</button></li>
+  <li><button class="btn btn-sm btn-white">White Button</button></li>
+  <li><button class="btn btn-sm btn-disabled">Disabled Button</button></li>
+  <li><button class="btn btn-sm btn-text">Text Button</button></li>
+</ul>

data/source/_patterns/00-atoms/02-buttons/02-btn-xs.mustache

@@ -0,0 +1,7 @@
+<ul class="list-unstyled">
+  <li><button class="btn btn-xs">Default Button</button></li>
+  <li><button class="btn btn-xs btn-alt">Alternate Button</button></li>
+  <li><button class="btn btn-xs btn-white">White Button</button></li>
+  <li><button class="btn btn-xs btn-disabled">Disabled Button</button></li>
+  <li><button class="btn btn-xs btn-text">Text Button</button></li>
+</ul>

data/source/_patterns/00-atoms/02-buttons/03-btn-block.mustache

@@ -0,0 +1,7 @@
+<ul class="list-unstyled">
+  <li><button class="btn btn-block">Default Button</button></li>
+  <li><button class="btn btn-block btn-alt">Alternate Button</button></li>
+  <li><button class="btn btn-block btn-white">White Button</button></li>
+  <li><button class="btn btn-block btn-disabled">Disabled Button</button></li>
+  <li><button class="btn btn-block btn-text">Text Button</button></li>
+</ul>

data/source/_patterns/00-atoms/02-buttons/04-btn-deploy.mustache

@@ -0,0 +1,4 @@
+ <a class='btn btn-primary deploy btn-block'>
+  <span class="hk-icon hk-icon-deploy"></span>
+  Deploy <span class="to-heroku">to Heroku</span>
+ </a>

data/source/_patterns/00-atoms/03-forms/00-text-fields.mustache

@@ -0,0 +1,24 @@
+<div class="input-group">
+  <label for="text">Text Input <sup class="required" title="Required">*</sup></label>
+  <input id="text" type="text" placeholder="Text Input">
+</div>
+<div class="input-group">
+  <label for="password">Password</label>
+  <input id="password" type="password" placeholder="Type your Password">
+</div>
+<div class="input-group">
+  <label for="webaddress">Web Address</label>
+  <input id="webaddress" type="url" placeholder="http://yoursite.com">
+</div>
+<div class="input-group">
+  <label for="emailaddress">Email Address</label>
+  <input id="emailaddress" type="email" placeholder="name@email.com">
+</div>
+<div class="input-group">
+  <label for="text">Number Input <sup class="required" title="Required">*</sup></label>
+  <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
+</div>
+<div class="input-group">
+  <label for="textarea">Textarea</label>
+  <textarea id="textarea" rows="4" placeholder="Enter your message here"></textarea>
+</div>

data/source/_patterns/00-atoms/03-forms/01-select-menu.mustache

@@ -0,0 +1,6 @@
+<select name="Select Menu" id="select-menu">
+  <option value="Option 1">Option 1</option>
+  <option value="Option 2">Option 2</option>
+  <option value="Option 3">Option 3</option>
+  <option value="Option 4">Option 4</option>
+</select>

data/source/_patterns/00-atoms/03-forms/02-checkbox.mustache

@@ -0,0 +1,10 @@
+<fieldset>
+  <div class="input-group options">
+    <legend>Check an option</legend>
+    <ul>
+      <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
+      <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
+      <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
+    </ul>
+  </div>
+</fieldset>

data/source/_patterns/00-atoms/03-forms/03-radios.mustache

@@ -0,0 +1,10 @@
+<fieldset>
+  <div class="input-group options">
+    <legend>Choose one option</legend>
+    <ul>
+      <li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Choice A</label></li>
+      <li><label for="radio2"><input id="radio2" name="radio" type="radio"> Choice B</label></li>
+      <li><label for="radio3"><input id="radio3" name="radio" type="radio"> Choice C</label></li>
+    </ul>
+  </div>
+</fieldset>

data/source/_patterns/00-atoms/03-forms/04-validation.mustache

@@ -0,0 +1,14 @@
+<p>Add classes to <code>.input-group</code> to create validation on inputs</p>
+
+<div class="input-group warning">
+  <label for="input-warning">Warning</label>
+  <input id="input-warning" type="text" placeholder="Text Input">
+</div>
+<div class="input-group error">
+  <label for="input-error">Error</label>
+  <input id="input-error" type="text" placeholder="Text Input">
+</div>
+<div class="input-group valid">
+  <label for="input-valid">Valid</label>
+  <input id="input-valid" type="text" placeholder="Text Input">
+</div>

data/source/_patterns/00-atoms/04-quote/00-pullquote.mustache

@@ -0,0 +1,7 @@
+<blockquote class="pullquote">
+  <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
+  <cite>
+    <h6 class="quote-author">Quote Author</h6>
+    <p class="quote-author-meta">Author meta (position, company)</p>
+  </cite>
+</blockquote>

data/source/_patterns/00-atoms/04-quote/01-quote-small.mustache

@@ -0,0 +1,7 @@
+<blockquote class="pullquote pullquote-sm">
+  <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
+  <cite>
+    <h6 class="quote-author">Quote Author</h6>
+    <p class="quote-author-meta">Author meta (position, company)</p>
+  </cite>
+</blockquote>

data/source/_patterns/00-atoms/05-code/01-pre.mustache

@@ -0,0 +1,11 @@
+<pre><code>gulp.task('sass:style', function(){
+return gulp.src('./source/css/*.scss')
+  .pipe(sass({
+    outputStyle: 'expanded',
+    precision: 8,
+    includePaths: neat.includePaths
+  }))
+  .pipe(gulp.dest('./public/css'))
+  .pipe(browserSync.stream());
+})</code>
+</pre>

data/source/_patterns/00-atoms/06-tooltips/00-text.mustache

@@ -0,0 +1,3 @@
+<p>Add a tooltip to a piece of text like this:
+  <span data-tooltip="An example tooltip">tooltip trigger.</span>
+</p>

data/source/_patterns/00-atoms/06-tooltips/01-diagram-callout.mustache

@@ -0,0 +1 @@
+<a href="" class="tooltip-marker" data-tooltip="This is a tooltip diagram marker. You can use it on things and absolutely position it to call out important details." style="position: relative; left: 10px;"></a>

data/source/_patterns/00-atoms/07-loader/00-spinner.mustache

@@ -0,0 +1,5 @@
+<div class="spinner">
+  <span></span>
+  <span></span>
+  <span></span>
+</div>

data/source/_patterns/00-atoms/08-readmore/00-readmore.mustache

@@ -0,0 +1,3 @@
+<p class="read-more">
+  Add a class of readmore to truncate text to a set pixel value. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, blanditiis adipisci, rem dignissimos laudantium neque hic laborum ipsam cupiditate commodi, asperiores facilis dolore pariatur. Nihil porro soluta nisi nobis maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, blanditiis adipisci, rem dignissimos laudantium neque hic laborum ipsam cupiditate commodi, asperiores facilis dolore pariatur. Nihil porro soluta nisi nobis maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, blanditiis adipisci, rem dignissimos laudantium neque hic laborum ipsam cupiditate commodi, asperiores facilis dolore pariatur. Nihil porro soluta nisi nobis maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, blanditiis adipisci, rem dignissimos laudantium neque hic laborum ipsam cupiditate commodi, asperiores facilis dolore pariatur. Nihil porro soluta nisi nobis maxime.
+</p>

data/source/_patterns/00-atoms/09-slider/00-dots.mustache

@@ -0,0 +1,8 @@
+<nav class="slider-nav">
+  <ol>
+    <li data-slide="0" class="slide-active">1</li>
+    <li data-slide="1" class="">2</li>
+    <li data-slide="2" class="">3</li>
+    <li data-slide="3" class="">4</li>
+  </ol>
+</nav>

data/source/_patterns/00-atoms/10-tables/00-tables.mustache

@@ -0,0 +1,26 @@
+<table class="borderless-zebra full-width">
+  <thead>
+    <tr>
+      <th>Firstname</th>
+      <th>Lastname</th>
+      <th class="center">Email</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John</td>
+      <td>Doe</td>
+      <td class="center">john@example.com</td>
+    </tr>
+    <tr>
+      <td>Mary</td>
+      <td>Moe</td>
+      <td class="center">mary@example.com</td>
+    </tr>
+    <tr>
+      <td>July</td>
+      <td>Dooley</td>
+      <td class="center">july@example.com</td>
+    </tr>
+  </tbody>
+</table>

data/source/_patterns/00-atoms/12-modal/00-modal.mustache

@@ -0,0 +1,14 @@
+<div class="modal">
+  <label for="modal-1">
+    <div class="modal-trigger">Click for Modal</div>
+  </label>
+  <input class="modal-state" id="modal-1" type="checkbox" />
+  <div class="modal-fade-screen">
+    <div class="modal-inner">
+      <div class="modal-close" for="modal-1"></div>
+      <h1>Modal Title</h1>
+      <p class="modal-intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi  minima.</p>
+      <p class="modal-content">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. Body text lorem ipsum dolor ipsum dolor sit sit possimus amet.</p>
+    </div>
+  </div>
+</div>

data/source/_patterns/00-atoms/13-panel/00-panel.mustache

@@ -0,0 +1,3 @@
+<div class="panel">
+  Something you can drop inside a panel.
+</div>

data/source/_patterns/00-atoms/14-users/00-avatar.mustache

@@ -0,0 +1,3 @@
+<div class="avatar">
+  <img src="http://www.nicenicejpg.com/100/100" alt="Nice Nice Avatar" width="80px" height="80px">
+</div>

data/source/_patterns/00-atoms/15-icons/00-icons.mustache

@@ -0,0 +1,333 @@
+<ul class="sg-icons sg-cf">
+
+  <li class="bit-4">
+    <div class="icon hk-icon-addon"></div>
+    <div class="codes">
+      \e000
+    </div>
+    <div class="codes">
+      .hk-icon-addon
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-app"></div>
+    <div class="codes">
+      \e001
+    </div>
+    <div class="codes">
+      .hk-icon-app
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-buildpack"></div>
+    <div class="codes">
+      \e002
+    </div>
+    <div class="codes">
+      .hk-icon-buildpack
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-connect"></div>
+    <div class="codes">
+      \e003
+    </div>
+    <div class="codes">
+      .hk-icon-connect
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-control"></div>
+    <div class="codes">
+      \e004
+    </div>
+    <div class="codes">
+      .hk-icon-control
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-dataclips"></div>
+    <div class="codes">
+      \e005
+    </div>
+    <div class="codes">
+      .hk-icon-dataclips
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-dyno"></div>
+    <div class="codes">
+      \e006
+    </div>
+    <div class="codes">
+      .hk-icon-dyno
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-github"></div>
+    <div class="codes">
+      \e007
+    </div>
+    <div class="codes">
+      .hk-icon-github
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-metrics"></div>
+    <div class="codes">
+      \e008
+    </div>
+    <div class="codes">
+      .hk-icon-metrics
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-postgres"></div>
+    <div class="codes">
+      \e009
+    </div>
+    <div class="codes">
+      .hk-icon-postgres
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-redis"></div>
+    <div class="codes">
+      \e00a
+    </div>
+    <div class="codes">
+      .hk-icon-redis
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-rollback"></div>
+    <div class="codes">
+      \e00b
+    </div>
+    <div class="codes">
+      .hk-icon-rollback
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-scale"></div>
+    <div class="codes">
+      \e00c
+    </div>
+    <div class="codes">
+      .hk-icon-scale
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-spaces"></div>
+    <div class="codes">
+      \e00d
+    </div>
+    <div class="codes">
+      .hk-icon-spaces
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-support"></div>
+    <div class="codes">
+      \e00e
+    </div>
+    <div class="codes">
+      .hk-icon-support
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-sync"></div>
+    <div class="codes">
+      \e00f
+    </div>
+    <div class="codes">
+      .hk-icon-sync
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-team"></div>
+    <div class="codes">
+      \e010
+    </div>
+    <div class="codes">
+      .hk-icon-team
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-user"></div>
+    <div class="codes">
+      \e011
+    </div>
+    <div class="codes">
+      .hk-icon-user
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-control-2"></div>
+    <div class="codes">
+      \e012
+    </div>
+    <div class="codes">
+      .hk-icon-control-2
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-data"></div>
+    <div class="codes">
+      \e013
+    </div>
+    <div class="codes">
+      .hk-icon-data
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-deploy"></div>
+    <div class="codes">
+      \e014
+    </div>
+    <div class="codes">
+      .hk-icon-deploy
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-twitter"></div>
+    <div class="codes">
+      \e015
+    </div>
+    <div class="codes">
+      .hk-icon-twitter
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-pipelines"></div>
+    <div class="codes">
+      \e016
+    </div>
+    <div class="codes">
+      .hk-icon-pipelines
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-github-2"></div>
+    <div class="codes">
+      \e017
+    </div>
+    <div class="codes">
+      .hk-icon-github-2
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-cli"></div>
+    <div class="codes">
+      \e018
+    </div>
+    <div class="codes">
+      .hk-icon-cli
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-clock"></div>
+    <div class="codes">
+      \e019
+    </div>
+    <div class="codes">
+      .hk-icon-clock
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-events"></div>
+    <div class="codes">
+      \e01a
+    </div>
+    <div class="codes">
+      .hk-icon-events
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-kafka"></div>
+    <div class="codes">
+      \e01b
+    </div>
+    <div class="codes">
+      .hk-icon-kafka
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-levelup"></div>
+    <div class="codes">
+      \e01c
+    </div>
+    <div class="codes">
+      .hk-icon-levelup
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-enterprise"></div>
+    <div class="codes">
+      \e01d
+    </div>
+    <div class="codes">
+      .hk-icon-enterprise
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-stars"></div>
+    <div class="codes">
+      \e01f
+    </div>
+    <div class="codes">
+      .hk-icon-stars
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-check"></div>
+    <div class="codes">
+      \e020
+    </div>
+    <div class="codes">
+      .hk-icon-check
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-cancel"></div>
+    <div class="codes">
+      \e021
+    </div>
+    <div class="codes">
+      .hk-icon-cancel
+    </div>
+  </li>
+
+</ul>

data/source/_patterns/00-atoms/15-icons/04-icon-colors.mustache

@@ -0,0 +1,38 @@
+<ul class="sg-icons sg-cf">
+
+  <li class="bit-4">
+    <div class="icon hk-icon-addon icon-black"></div>
+    <div class="codes">
+      .icon-black
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-addon icon-purple"></div>
+    <div class="codes">
+      .icon-purple
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-addon icon-blue"></div>
+    <div class="codes">
+      .icon-blue
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-addon icon-green"></div>
+    <div class="codes">
+      .icon-green
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon hk-icon-addon icon-white"></div>
+    <div class="codes">
+      .icon-white
+    </div>
+  </li>
+
+</ul>

data/source/_patterns/00-atoms/15-icons/05-icon-sizes.mustache

@@ -0,0 +1,31 @@
+<ul class="sg-icons sg-cf">
+
+  <li class="bit-4">
+    <div class="icon icon-xs hk-icon-user"></div>
+    <div class="codes">
+      .icon-xs
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon icon-sm hk-icon-user"></div>
+    <div class="codes">
+      .icon-sm
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon icon-md hk-icon-user"></div>
+    <div class="codes">
+      .icon-md
+    </div>
+  </li>
+
+  <li class="bit-4">
+    <div class="icon icon-lg hk-icon-user"></div>
+    <div class="codes">
+      .icon-lg
+    </div>
+  </li>
+
+</ul>

data/source/_patterns/00-atoms/16-video/01-video.mustache

@@ -0,0 +1,3 @@
+<div class="video-wrapper">
+  <iframe src="https://player.vimeo.com/video/136115305?color=ffffff&title=0&byline=0&portrait=0" width="656" height="369" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+</div>

data/source/_patterns/00-atoms/17-utilities/00-visibility.mustache

@@ -0,0 +1,8 @@
+<p class="is-hidden"><code>.is-hidden</code> - This text is hidden</p>
+<p class="is-hidden-mobile"><code>.is-hidden-mobile</code> - This text is hidden on mobile</p>
+<p class="is-hidden-tablet"><code>.is-hidden-tablet</code> - This text is hidden on tablet</p>
+<p class="is-hidden-desktop"><code>.is-hidden-desktop</code> - This text is hidden on Desktop</p>
+
+<p class="is-visible"><code>.is-visible</code> - This text is visible</p>
+<p class="is-hidden-visually"><code>.is-hidden-visually</code> - This text is hidden but visible to screenreaders</p>
+<p class="is-invisible"><code>.is-invisible</code> - This text is invisible</p>

data/source/_patterns/00-atoms/17-utilities/01-ui-elements.mustache

@@ -0,0 +1,3 @@
+<p class="is-actionable">This text is actionable</p>
+<p class="is-draggable">This text is draggable</p>
+<p class="is-disabled">This text is disabled</p>

data/source/_patterns/01-molecules/00-text/00-header-groups.mustache

@@ -0,0 +1,4 @@
+<div class="header-group text-center">
+  <h2>This is an h2 title paired with</h2>
+  <h3>A subtitle made from an h3</h3>
+</div>