atlas_assets 0.0.7

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

@@ -0,0 +1,76 @@
+---
+layout: default
+title:  "Lists"
+date:   2013-05-17 23:24:04
+---
+
+Lists
+=====
+
+You can style any list by adding the class `.list` to the `ul` or `div` container, and the class `.list-item` to every single item in the list. The default list item does not have any padding, in order to allow custom styling.
+
+<ul class="list">
+	<li class="list-item">Item 1</li>
+	<li class="list-item">Item 2</li>
+	<li class="list-item">Item 3</li>
+	<li class="list-item">Item 4</li>
+</ul>
+
+~~~html
+<ul class="list">
+	<li class="list-item">Item 1</li>
+	<li class="list-item">Item 2</li>
+	<li class="list-item">Item 3</li>
+	<li class="list-item">Item 4</li>
+</ul>
+~~~
+
+Links
+-----
+
+If you have a link in the list, it will apply a default padding to the links.
+
+<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>
+</ul>
+
+~~~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>
+</ul>
+~~~
+
+Link Arrow
+----------
+
+You can add a arrow icon, which will automatically flow to the right of the list.
+
+<ul class="list">
+	<li class="list-item"><a href="#">Item 1<i class="icon-arrow-right-2"></i></a></li>
+	<li class="list-item"><a href="#">Item 2<i class="icon-arrow-right-2"></i></a></li>
+	<li class="list-item"><a href="#">Item 3<i class="icon-arrow-right-2"></i></a></li>
+	<li class="list-item"><a href="#">Item 4<i class="icon-arrow-right-2"></i></a></li>
+</ul>
+
+~~~html
+<ul class="list">
+	<li class="list-item">
+		<a href="#">Item 1<i class="icon-arrow-right-2"></i></a>
+	</li>
+	<li class="list-item">
+		<a href="#">Item 2<i class="icon-arrow-right-2"></i></a>
+	</li>
+	<li class="list-item">
+		<a href="#">Item 3<i class="icon-arrow-right-2"></i></a>
+	</li>
+	<li class="list-item">
+		<a href="#">Item 4<i class="icon-arrow-right-2"></i></a>
+	</li>
+</ul>
+~~~

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

@@ -0,0 +1,73 @@
+---
+layout: default
+title:  "Navbar"
+date:   2013-05-17 23:24:04
+---
+
+Navbar
+======
+
+Basic Navbar
+-------------
+
+<div class="navbar">
+	<div class="navbar-inner">
+		<a class="brand" href="/">Brand</a>
+		<ul class="nav">
+		  <li><a href="#">Item 1</a></li>
+		  <li><a href="#">Item 2</a></li>
+		</ul>
+	</div>
+</div>
+
+~~~html
+<div class="navbar">
+	<div class="navbar-inner">
+		<a class="brand" href="/">Brand</a>
+		<ul class="nav">
+		  <li><a href="#">Item 1</a></li>
+		  <li><a href="#">Item 2</a></li>
+		</ul>
+	</div>
+</div>
+~~~
+
+Alignment
+-------------
+
+You can align a `.nav` to the right by appending a `.pull-right` class.
+
+<div class="navbar">
+	<div class="navbar-inner">
+		<a class="brand" href="/">Brand</a>
+		<ul class="nav pull-right">
+		  <li><a href="#">Item 1</a></li>
+		  <li><a href="#">Item 2</a></li>
+		</ul>
+	</div>
+</div>
+
+~~~html
+<ul class="nav pull-right">
+  <li><a href="#">Item 1</a></li>
+  <li><a href="#">Item 2</a></li>
+</ul>
+~~~
+
+Forms
+-----------------
+
+<div class="navbar">
+	<div class="navbar-inner">
+		<a class="brand" href="/">Brand</a>
+		<ul class="nav pull-right">
+		  <li><input type="text" placeholder="Search ..." /></li>
+		</ul>
+	</div>
+</div>
+
+~~~html
+<ul class="nav pull-right">
+  <li><input type="text" placeholder="Search ..." /></li>
+</ul>
+~~~

data/docs/_posts/2013-05-21-forms.md

@@ -0,0 +1,423 @@
+---
+layout: default
+title:  "Forms"
+date:   2013-05-17 23:24:04
+---
+
+Forms
+======
+
+Elements
+--------
+
+### Input
+
+Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Requires the use of a specified type at all times.
+
+<div class="example">
+<input type="text" placeholder="Text input">
+</div>
+
+~~~html
+<input type="text" placeholder="Text input">
+~~~
+
+### Textarea
+
+Change rows attribute as necessary.
+
+<div class="example">
+<textarea rows="3"></textarea>
+</div>
+
+~~~html
+<textarea rows="3"></textarea>
+~~~
+
+### Checkbox
+
+Checkboxes will stack on top of each other.
+
+<div class="example">
+<label class="checkbox">
+  <input type="checkbox" value="">Option
+</label>
+<label class="checkbox">
+  <input type="checkbox" value="">Option
+</label>
+</div>
+
+~~~html
+<label class="checkbox">
+  <input type="checkbox" value="">Option
+</label>
+<label class="checkbox">
+  <input type="checkbox" value="">Option
+</label>
+~~~
+
+Add the class `.inline` to enable inline flow.
+
+<div class="example">
+<label class="checkbox inline">
+  <input type="checkbox" value="option1"> Option
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" value="option2"> Option
+</label>
+</div>
+
+~~~html
+<label class="checkbox inline">
+  <input type="checkbox" value="option1"> Option
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" value="option2"> Option
+</label>
+~~~
+
+### Radio
+
+Radio boxes works in the exact same way as checkboxes.
+
+### Select
+
+Specify a multiple="multiple" to show multiple options at once.
+
+<div class="example">
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+ 
+<select multiple="multiple">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+</div>
+
+~~~html
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+ 
+<select multiple="multiple">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+~~~
+
+
+
+Default Style
+-------------
+
+Without any added classes, forms will be styled in a classic, unobtrusive style.
+
+<div class="example">
+<form>
+  <fieldset>
+    <legend>Legend</legend>
+    <label>Label name</label>
+    <input type="text" placeholder="Type something…">
+    <span class="help-block">Example block-level help text here.</span>
+    <label class="checkbox">
+      <input type="checkbox"> Check me out
+    </label>
+    <button type="submit" class="btn">Submit</button>
+  </fieldset>
+</form>
+</div>
+
+~~~html
+<form>
+  <fieldset>
+    <legend>Legend</legend>
+    <label>Label name</label>
+    <input type="text" placeholder="Type something…">
+    <span class="help-block">Example block-level help text here.</span>
+    <label class="checkbox">
+      <input type="checkbox"> Check me out
+    </label>
+    <button type="submit" class="btn">Submit</button>
+  </fieldset>
+</form>
+~~~
+
+
+Inline Style
+---------------
+
+Add `.form-inline` for left-aligned labels and inline-block controls for a compact layout.
+
+<div class="example">
+<form class="form-inline">
+  <input type="text" class="input-small" placeholder="Email">
+  <input type="password" class="input-small" placeholder="Password">
+  <label class="checkbox">
+    <input type="checkbox"> Remember me
+  </label>
+  <button type="submit" class="btn">Sign in</button>
+</form>
+</div>
+
+~~~html
+<form class="form-inline">
+  <input type="text" class="input-small" placeholder="Email">
+  <input type="password" class="input-small" placeholder="Password">
+  <label class="checkbox">
+    <input type="checkbox"> Remember me
+  </label>
+  <button type="submit" class="btn">Sign in</button>
+</form>
+~~~
+
+Horizontal Style
+----------------
+
+Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
+
+* Add .form-horizontal to the form
+* Wrap labels and controls in .control-group
+* Add .control-label to the label
+* Wrap any associated controls in .controls for proper alignment
+
+<div class="example">
+<form class="form-horizontal">
+  <div class="control-group">
+    <label class="control-label" for="inputEmail">Email</label>
+    <div class="controls">
+      <input type="text" id="inputEmail" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="inputPassword">Password</label>
+    <div class="controls">
+      <input type="password" id="inputPassword" placeholder="Password">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
+</form>
+</div>
+
+~~~html
+<form class="form-horizontal">
+  <div class="control-group">
+    <label class="control-label" for="inputEmail">Email</label>
+    <div class="controls">
+      <input type="text" id="inputEmail" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="inputPassword">Password</label>
+    <div class="controls">
+      <input type="password" id="inputPassword" placeholder="Password">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
+</form>
+~~~
+
+Grid Sizing
+-----------
+
+You can use `.span1` to `.span12` for inputs that match the same sizes of the grid columns.
+
+<div class="example">
+	<input class="span1" type="text" placeholder=".span1">
+	<input class="span2" type="text" placeholder=".span2">
+	<input class="span3" type="text" placeholder=".span3">
+</div>
+
+~~~html
+<input class="span1" type="text" placeholder=".span1">
+<input class="span2" type="text" placeholder=".span2">
+<input class="span3" type="text" placeholder=".span3">
+~~~
+
+For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.
+
+<div class="example">
+	<div class="controls">
+  	<input class="span7" type="text" placeholder=".span7">
+	</div>
+	<div class="controls controls-row">
+	  <input class="span4" type="text" placeholder=".span4">
+	  <input class="span2" type="text" placeholder=".span2">
+	  <input class="span1" type="text" placeholder=".span1">
+	</div>
+</div>
+
+~~~html
+<div class="controls">
+	<input class="span7" type="text" placeholder=".span7">
+</div>
+<div class="controls controls-row">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span2" type="text" placeholder=".span2">
+  <input class="span1" type="text" placeholder=".span1">
+</div>
+~~~
+
+Relative Sizing
+---------------
+
+You can relatively size input fields by using the `.input-[size]` classes.
+
+<div class="example">
+	<input class="input-mini" type="text" placeholder=".input-mini">
+	<input class="input-small" type="text" placeholder=".input-small">
+	<input class="input-medium" type="text" placeholder=".input-medium">
+	<input class="input-large" type="text" placeholder=".input-large">
+	<input class="input-xlarge" type="text" placeholder=".input-xlarge">
+	<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
+</div>
+
+~~~html
+<input class="input-mini" type="text" placeholder=".input-mini">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-medium" type="text" placeholder=".input-medium">
+<input class="input-large" type="text" placeholder=".input-large">
+<input class="input-xlarge" type="text" placeholder=".input-xlarge">
+<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
+~~~
+
+Prepend & Append
+----------------
+
+Wrap an .add-on and an input with one of two classes to prepend or append text to an input. You can use both at the same time to show on both sides.
+
+<div class="example">
+	<div class="input-prepend">
+  	<span class="add-on">@</span>
+  	<input class="span2" type="text" placeholder="Username">
+	</div>
+	<div class="input-append">
+	  <input class="span2" type="text">
+	  <span class="add-on">.00</span>
+	</div>
+	<div class="input-prepend input-append">
+	  <span class="add-on">$</span>
+	  <input class="span2" type="text">
+	  <span class="add-on">.00</span>
+	</div>
+</div>
+
+~~~html
+<div class="input-prepend">
+	<span class="add-on">@</span>
+	<input class="span2" type="text" placeholder="Username">
+</div>
+<div class="input-append">
+  <input class="span2" type="text">
+  <span class="add-on">.00</span>
+</div>
+<div class="input-prepend input-append">
+  <span class="add-on">$</span>
+  <input class="span2" type="text">
+  <span class="add-on">.00</span>
+</div>
+~~~
+
+You can also use buttons as prepend/append elements.
+
+<div class="example">
+	<div class="input-append">
+	  <input class="span2" type="text">
+	  <button class="btn" type="button">Go!</button>
+	</div>
+</div>
+
+~~~html
+<div class="example">
+	<div class="input-append">
+	  <input class="span2" type="text">
+	  <button class="btn" type="button">Go!</button>
+	</div>
+</div>
+~~~
+
+Even two buttons
+
+<div class="example">
+	<div class="input-append">
+	  <input class="span2" type="text">
+	  <button class="btn" type="button">Search</button>
+	  <button class="btn" type="button">Options</button>
+	</div>
+</div>
+
+~~~html
+<div class="input-append">
+  <input class="span2" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
+</div>
+~~~
+
+
+Help Text
+---------
+
+You can create inline helper text.
+
+<div class="example">
+	<input type="text"><span class="help-inline">Inline text</span>
+</div>
+
+~~~html
+<input type="text"><span class="help-inline">Inline text</span>
+~~~
+
+And you can create block helper text.
+
+<div class="example">
+	<input type="text"><span class="help-block">Long text ...</span>
+</div>
+
+~~~html
+<input type="text"><span class="help-block">Long text ...</span>
+~~~
+
+
+Disable
+-------
+
+Disable an input field by using the `disabled` attribute, or create something that looks like a form element, but isn't by using the `.uneditable-input` class.
+
+<div class="example">
+	<input class="input-xlarge" type="text" placeholder="Disabled input" disabled>
+	<span class="input-xlarge uneditable-input">Disabled fake input</span>
+</div>
+
+~~~html
+<input class="input-xlarge" type="text" placeholder="Disabled input" disabled>
+<span class="input-xlarge uneditable-input">Disabled fake input</span>
+~~~

data/docs/index.html

@@ -0,0 +1,31 @@
+---
+layout: default
+title: Your New Jekyll Site
+---
+
+
+<h1>Atlas Style Guide</h1>
+
+Welcome to the O'Reilly Atlas Style Guide. Please choose an item in the menu to the left.
+
+
+<h2>Running on Localhost</h2>
+
+<p>If you need to add or change styles in this gem, first get a local environment set up:</p>
+
+<ol>
+	<li>Clone down the gem to your local machine</li>
+	<li>Run `bundle` from the gem root</li>
+	<li>Fire up jekyll by running <code>jekyll serve --watch</code></li>
+</ol>
+
+<p>You now have the site running in your browser on <code>localhost:4000</code></p>
+
+<h2>Adding new Styles</h2>
+
+<ol>
+	<li>Create you own feature branch</li>
+	<li>Implement your style by tweaking the CSS and checking the documentation on `localhost:4000`. Do not work from the specific Atlas </li>Rails app by updating the gem constantly. All new styles should be developed using the `docs`, and should be independent from a particular application.
+	<li>When ready, bump the version number in `lib/atlas_assets/version.rb`, and send a pull request to the master branch.</li>
+	<li>Bump the `atlas_assets` gem version in your apps `Gemfile`, run `bundle`, and use the new styles.</li>
+</ol>