atlas_assets 0.3.4 → 0.4.0

data/.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 _site
-*.gem
+*.gem
+.sass-cache/

data/Gemfile.lock

@@ -1,15 +1,15 @@
 GIT
   remote: git://github.com/ixti/jekyll-assets.git
-  revision: 88155428176def0eb02353fd8c7c50490ba93c7a
+  revision: a9e859acff53f6c329e169a58482f11a2a47a37c
   specs:
-    jekyll-assets (0.7.2)
+    jekyll-assets (0.7.3)
       jekyll (~> 1.0)
       sprockets (~> 2.10)
 
 PATH
   remote: .
   specs:
-    atlas_assets (0.3.4)
+    atlas_assets (0.4.0)
       handlebars_assets (~> 0.12.1)
 
 GEM
@@ -28,7 +28,7 @@ GEM
       execjs (>= 1.2.9)
       sprockets (>= 2.0.3)
       tilt
-    highline (1.6.19)
+    highline (1.6.20)
     hike (1.2.3)
     jekyll (1.0.4)
       classifier (~> 1.3)
@@ -41,9 +41,9 @@ GEM
       pygments.rb (~> 0.5.0)
       safe_yaml (~> 0.7.0)
     kramdown (1.0.2)
-    liquid (2.5.2)
+    liquid (2.5.3)
     maruku (0.7.0)
-    multi_json (1.8.0)
+    multi_json (1.8.2)
     posix-spawn (0.3.6)
     puma (2.0.1)
       rack (>= 1.1, < 2.0)
@@ -57,7 +57,7 @@ GEM
     rack-rewrite (1.3.3)
     rake (10.0.4)
     safe_yaml (0.7.1)
-    sass (3.2.11)
+    sass (3.2.12)
     sprockets (2.10.0)
       hike (~> 1.2)
       multi_json (~> 1.0)

data/docs/_layouts/default.html

@@ -54,9 +54,9 @@
     	<div class="row">
         <div class="span3">
           <ul class="list">
-            <li class="list-item"><a href="/">Home<i class="icon-arrow-right-2"></i></a></li>
+            <li class="list-item list-padding"><a href="/">Home<i class="icon-arrow-right-2"></i></a></li>
             {% for post in site.posts %}
-              <li class="list-item"><a href="{{ post.url }}">{{ post.title }}<i class="icon-arrow-right-2"></i></a></li>
+              <li class="list-item list-padding"><a href="{{ post.url }}">{{ post.title }}<i class="icon-arrow-right-2"></i></a></li>
             {% endfor %}
           </ul>
         </div>

data/docs/_posts/2013-05-17-buttons.md

@@ -14,35 +14,33 @@ Buttons
 Sizes
 ------
 
-<p><a href="#" class="btn small">Small</a></p>
-
+<p><a href="#" class="btn btn-small">Small</a></p>
 <p><a href="#" class="btn">Normal</a></p>
-
-<p><a href="#" class="btn medium">Medium</a></p>
-
-<p><a href="#" class="btn large">Large</a></p>
+<p><a href="#" class="btn btn-medium">Medium</a></p>
+<p><a href="#" class="btn btn-large">Large</a></p>
 
 ~~~html
-<a href="#" class="btn small">Small</a>
+<a href="#" class="btn btn-small">Small</a>
 <a href="#" class="btn">Normal</a>
-<a href="#" class="btn medium">Medium</a>
-<a href="#" class="btn large">Large</a>
+<a href="#" class="btn btn-medium">Medium</a>
+<a href="#" class="btn btn-large">Large</a>
 ~~~
 
-Colors
-------
+Variations
+----------
 
-<p><a href="#" class="btn blue">Blue</a></p>
-<p><a href="#" class="btn red">Red</a></p>
-<p><a href="#" class="btn green">Green</a></p>
-<p><a href="#" class="btn gray">Gray</a></p>
-<p><a href="#" class="btn disabled">Disabled</a></p>
+<p><a href="#" class="btn btn-info">Info</a></p>
+<p><a href="#" class="btn btn-success">Success</a></p>
+<p><a href="#" class="btn btn-warning">Warning</a></p>
+<p><a href="#" class="btn btn-error">Error</a></p>
+<p><a href="#" class="btn btn-disabled">Disabled</a></p>
 
 ~~~html
-<a href="#" class="btn blue">Blue</a>
-<a href="#" class="btn red">Red</a>
-<a href="#" class="btn green">Green</a>
-<a href="#" class="btn disabled">Disabled</a>
+<a href="#" class="btn btn-info">Info</a>
+<a href="#" class="btn btn-success">Success</a>
+<a href="#" class="btn btn-warning">Warning</a>
+<a href="#" class="btn btn-error">Error</a>
+<a href="#" class="btn btn-disabled">Disabled</a>
 ~~~
 
 
@@ -51,18 +49,36 @@ Button Groups
 
 <p>
 <div class="btn-group">
-  <button type="button" class="btn medium gray">PDF</button>
-  <button type="button" class="btn medium gray">MOBI</button>
-  <button type="button" class="btn medium gray">EPUB</button>
-  <button type="button" class="btn medium gray">HTML</button>
+  <button type="button" class="btn">PDF</button>
+  <button type="button" class="btn">MOBI</button>
+  <button type="button" class="btn">EPUB</button>
+  <button type="button" class="btn">HTML</button>
+</div>
+</p>
+
+~~~html
+<div class="btn-group">
+  <button type="button" class="btn">PDF</button>
+  <button type="button" class="btn">MOBI</button>
+  <button type="button" class="btn">EPUB</button>
+  <button type="button" class="btn">HTML</button>
+</div>
+~~~
+
+You can even use colors and sizes:
+
+<p>
+<div class="btn-group">
+  <button type="button" class="btn btn-medium">Hey</button>
+  <button type="button" class="btn btn-medium btn-info">Look At Me</button>
+  <button type="button" class="btn btn-medium">Hello</button>
 </div>
 </p>
 
 ~~~html
 <div class="btn-group">
-  <button type="button" class="btn medium gray">PDF</button>
-  <button type="button" class="btn medium gray">MOBI</button>
-  <button type="button" class="btn medium gray">EPUB</button>
-  <button type="button" class="btn medium gray">HTML</button>
+  <button type="button" class="btn btn-medium">Hey</button>
+  <button type="button" class="btn btn-medium btn-info">Look At Me</button>
+  <button type="button" class="btn btn-medium">Hello</button>
 </div>
 ~~~

data/docs/_posts/2013-05-17-fonts.md

@@ -7,24 +7,19 @@ date:   2013-05-17 23:24:04
 Fonts
 =====
 
-
-Headings
---------
-
 All HTML headings, `<h1>` through `<h6>` are available.
 
 <div class="example">
-
 	<h1>h1. Heading 1</h1>
-	
 	<h2>h2. Heading 2</h2>
-	
 	<h3>h3. Heading 3</h3>
-	
 	<h4>h4. Heading 4</h4>
-	
 	<h5>h5. Heading 5</h5>
-	
 	<h6>h6. Heading 6</h6>
+</div>
 
+Paragraph text and links:
+
+<div class="example">
+	<p>Magna cornhole freegan dolore, ugh PBRB sriracha YOLO art party direct trade  gluten-free put a bird on it deep v <a href="#">skateboard whatever</a>. Occaecat  sartorial hashtag, master cleanse consequat pug excepteur  dolor  pariatur Pinterest whatever. Consequat try-hard 90's, disrupt delectus Shoreditch placeat mollit  tattooed quinoa freegan <a href="#" class="underline">with .underline</a> reprehenderit  ennui. Tempor Austin blog, flannel reprehenderit  asymmetrical ugh quinoa bitters post-ironic Marfa lomo. Deserunt  single-origin coffee accusamus, tote bag YOLO laborum voluptate  aliquip street art letterpress gentrify cray elit officia. Tofu banh mi shabby chic salvia Echo Park. Excepteur  proident occupy, voluptate  exercitation food truck cupidatat  duis  master cleanse.</p>
 </div>

data/docs/_posts/2013-05-17-icons.md

@@ -14,9 +14,31 @@ date:   2013-05-17 23:24:04
 	}
 </style>
 
-Glyphicons
+Icons
 ==========
 
+Variations
+----------
+
+This is a normal <i class="glyphicons pencil"></i> icon.
+
+~~~html
+This is a normal <i class="ICONCLASS"></i> icon.
+~~~
+
+<p>This is a default round <i class="icn-round glyphicons ok_2"></i> icon, and here's icons <i class="icn-round icn-info icon-info"></i> <i class="icn-round icn-error glyphicons remove_2"></i> <i class="icn-round icn-success glyphicons ok_2"></i> <i class="icn-round icn-warning icon-exclamation"></i> with the semantic classes added. You can use any icon with these. They just change background color.</p>
+
+~~~html
+<i class="icn-round ICONCLASS"></i>
+<i class="icn-round icn-info ICONCLASS"></i>
+<i class="icn-round icn-error ICONCLASS"></i>
+<i class="icn-round icn-success ICONCLASS"></i>
+<i class="icn-round icn-warning ICONCLASS"></i>
+~~~
+
+Glyphicons
+----------
+
 This gem includes icons as a font, png and svg from [Glyphicons](http://glyphicons.com). Insert an icon using this syntax: `<i class="glyphicons ICON_NAME"></i>`. You can change the size of the icon by setting the `font-size`.
 
 <span class="box1"><i class="glyphicons glass"></i> glass</span>

data/docs/_posts/2013-05-17-lists.md

@@ -26,46 +26,112 @@ You can style any list by adding the class `.list` to the `ul` or `div` containe
 </ul>
 ~~~
 
-Links
------
+Padding
+-------
 
-If you have a link in the list, it will apply a default padding to the links.
+The default list comes without padding. Add `.list-padding` to the list items to give them a default padding.
 
 <ul class="list">
-	<li class="list-item"><a href="#">Item 1</a></li>
-	<li class="list-item"><a href="#">Item 2</a></li>
-	<li class="list-item"><a href="#">Item 3</a></li>
-	<li class="list-item"><a href="#">Item 4</a></li>
+	<li class="list-item list-padding"><a href="#">Item 1</a></li>
+	<li class="list-item list-padding"><a href="#">Item 2</a></li>
+	<li class="list-item list-padding"><a href="#">Item 3</a></li>
+	<li class="list-item list-padding"><a href="#">Item 4</a></li>
 </ul>
 <br />
 
 ~~~html
 <ul class="list">
-	<li class="list-item"><a href="#">Item 1</a></li>
-	<li class="list-item"><a href="#">Item 2</a></li>
-	<li class="list-item"><a href="#">Item 3</a></li>
-	<li class="list-item"><a href="#">Item 4</a></li>
+	<li class="list-item list-padding"><a href="#">Item 1</a></li>
+	<li class="list-item list-padding"><a href="#">Item 2</a></li>
+	<li class="list-item list-padding"><a href="#">Item 3</a></li>
+	<li class="list-item list-padding"><a href="#">Item 4</a></li>
 </ul>
 ~~~
 
-Link Arrow
+Variations
 ----------
 
+Gray list.
+
+<ul class="list list-gray">
+	<li class="list-item list-padding"><a href="#">Item 1</a></li>
+	<li class="list-item list-padding"><a href="#">Item 2</a></li>
+	<li class="list-item list-padding"><a href="#">Item 3</a></li>
+	<li class="list-item list-padding"><a href="#">Item 4</a></li>
+</ul>
+<br />
+
+~~~html
+<ul class="list list-gray">
+	<li class="list-item list-padding"><a href="#">Item 1</a></li>
+	<li class="list-item list-padding"><a href="#">Item 2</a></li>
+	<li class="list-item list-padding"><a href="#">Item 3</a></li>
+	<li class="list-item list-padding"><a href="#">Item 4</a></li>
+</ul>
+~~~
+
+Sizes
+-----
+
+Add a size to the main list class to change the size of the list.
+
+~~~html
+<ul class="list list-SIZE">
+	...
+</ul>
+~~~
+
+This is a `.list-small`.
+
+<ul class="list list-small">
+	<li class="list-item list-padding"><a href="#">Small list</a></li>
+	<li class="list-item list-padding"><a href="#">Small list</a></li>
+	<li class="list-item list-padding"><a href="#">Small list</a></li>
+</ul>
+
+This is a normal list without an extra size class.
+
+<ul class="list">
+	<li class="list-item list-padding"><a href="#">Normal list</a></li>
+	<li class="list-item list-padding"><a href="#">Normal list</a></li>
+	<li class="list-item list-padding"><a href="#">Normal list</a></li>
+</ul>
+
+This is a `.list-medium`.
+
+<ul class="list list-medium">
+	<li class="list-item list-padding"><a href="#">Medium list</a></li>
+	<li class="list-item list-padding"><a href="#">Medium list</a></li>
+	<li class="list-item list-padding"><a href="#">Medium list</a></li>
+</ul>
+
+This is a `.list-large`.
+
+<ul class="list list-large">
+	<li class="list-item list-padding"><a href="#">Large list</a></li>
+	<li class="list-item list-padding"><a href="#">Large list</a></li>
+	<li class="list-item list-padding"><a href="#">Large list</a></li>
+</ul><br />
+
+
+Icons
+-----
+
 You can add a `list-icon` class to automatically flow the icon to the right of the list.
 
 <ul class="list">
-	<li class="list-item"><a href="#">Item 1<i class="icon-angle-right list-icon"></i></a></li>
-	<li class="list-item"><a href="#">Item 2<i class="icon-angle-right list-icon"></i></a></li>
-	<li class="list-item"><a href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
-	<li class="list-item"><a href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 1<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 2<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
 </ul>
 <br />
 
 ~~~html
 <ul class="list">
-	<li class="list-item"><a href="#">Item 1<i class="icon-angle-right list-icon"></i></a></li>
-	<li class="list-item"><a href="#">Item 2<i class="icon-angle-right list-icon"></i></a></li>
-	<li class="list-item"><a href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
-	<li class="list-item"><a href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 1<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 2<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item list-padding"><a href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
 </ul>
 ~~~

data/docs/_posts/2013-05-22-boxes.md

@@ -12,34 +12,112 @@ The `atlas_assets` gem ships with a few styles you can apply to `div` elements,
 Default Box
 -----------
 
-Add a `.box` class to a `<div>` element to style as a sectioned box. The box has a no-op `.box-inner` div, and an optional `<h3>` element. The heading can hold a `<small>` tag that is automatically pulled to the right.
+<div class="box">
+	<p>This is just a normal box</p>
+</div>
+
+~~~html
+<div class="box">
+	<p>This is just a normal box</p>
+</div>
+~~~
+
+### Box With Top
+
+<div class="box">
+	<div class="box-top">
+		This is a box with a top <i class="icn-round glyphicons leaf"></i> <a href="#" class="btn">Top Button</a>
+	</div>
+	<div class="box-inner">
+		<p>This is the content.</p>
+	</div>
+</div>
+
+~~~html
+<div class="box">
+	<div class="box-top">
+		This is a box with a top <i class="icn-round glyphicons leaf"></i> <a href="#" class="btn">Top Button</a>
+	</div>
+	<div class="box-inner">
+		<p>This is the content.</p>
+	</div>
+</div>
+~~~
+
+### Box With Bottom
 
 <div class="box">
-	<h3>Heading <small>This goes to the right!</small></h3>
 	<div class="box-inner">
-		<p>This is a box with some content</p>
+		<p>This is the content.</p>
+	</div>
+	<div class="box-bottom">
+		This is a box with a bottom <i class="icn-round glyphicons leaf"></i> <a href="#" class="btn">Bottom Button</a>
 	</div>
 </div>
 
 ~~~html
 <div class="box">
-	<h3>Heading <small>This goes to the right!</small></h3>
 	<div class="box-inner">
-		<p>This is a box with some content</p>
+		<p>This is the content.</p>
+	</div>
+	<div class="box-bottom">
+		This is a box with a bottom <i class="icn-round glyphicons leaf"></i> <a href="#" class="btn">Bottom Button</a>
+	</div>
+</div>
+~~~
+
+### Box With All The Things
+
+<div class="box">
+	<div class="box-top">
+		A Real World Example with a list instead of box-inner. <span class="pull-right"><a href="#">Yo Dawg</a></span></span>
+	</div>
+	<ul class="list">
+		<li class="list-item list-padding">Item 1</li>
+		<li class="list-item list-padding">Item 2</li>
+		<li class="list-item list-padding">Item 3</li>
+		<li class="list-item list-padding">Item 4</li>
+	</ul>
+	<div class="box-bottom">
+		This is the bottom!
+	</div>
+</div>
+
+~~~html
+<div class="box">
+	<div class="box-top">
+		A Real World Example with a list instead of box-inner. <span class="pull-right"><a href="#">Yo Dawg</a></span></span>
+	</div>
+	<ul class="list">
+		<li class="list-item list-padding">Item 1</li>
+		<li class="list-item list-padding">Item 2</li>
+		<li class="list-item list-padding">Item 3</li>
+		<li class="list-item list-padding">Item 4</li>
+	</ul>
+	<div class="box-bottom">
+		This is the bottom!
 	</div>
 </div>
 ~~~
 
 
-Styles
+Variations
 ------
 
-Add `.box-white` to create a box with slightly better contrast.
+Add `.box-white` to create a box with white background.
 
 <div class="box box-white">
-	<h3>Heading</h3>
-	<div class="box-inner">
-		<p>This is a box with some content</p>
+	<div class="box-top">
+		A Real World Example with a list instead of box-inner. <span class="pull-right"><a href="#">Yo Dawg</a></span></span>
+	</div>
+	<ul class="list">
+		<li class="list-item list-padding">Item 1</li>
+		<li class="list-item list-padding">Item 2</li>
+		<li class="list-item list-padding">Item 3</li>
+		<li class="list-item list-padding">Item 4</li>
+	</ul>
+	<div class="box-bottom">
+		This is the bottom!
 	</div>
 </div>