diff --git a/axis/images.styl b/axis/images.styl
new file mode 100644
index 0000000..6cd9d03
--- /dev/null
+++ b/axis/images.styl
@@ -0,0 +1,98 @@
+// Mixin: Bg
+//
+// Makes background (with image) declarations a little simpler. Use this with
+// the global img-path variable to set a base image path that you don't have to
+// keep repeating. Also sets 'no-repeat' as the default background-repeat.
+//
+// ex. bg: 'test.png'
+// ex. bg: 'other.jpg' center center repeat
+
+bg(path, args...)
+  args = unquote('no-repeat') unless args
+  background: url(img-path path) args
+
+// Mixin: bg-retina
+//
+// Make sure the image path is double the size, pass it halved numbers, and
+// you're in the retina-clear.
+//
+// ex. bg-retina: 'test.png' 200px 100px
+// ex. bg-retina: 'other.jpg' 100px 50px center center repeat
+
+bg-retina(path, width, height, args...)
+  args = unquote('no-repeat') unless args
+  set_size = false
+
+  for arg in args
+    if arg == 'no-repeat'
+      set_size = true
+
+  background: url(img-path path) args
+  background-size: width height
+
+  if set_size
+    size: width height
+
+// Mixin: Image Replace
+//
+// Image replacement. Pass it an image path and the image's dimensions and any
+// text will be hidden in the div and it will show an image instead. Uses the
+// fanciest new method, props to Paul Irish. Only works when called as a
+// function with parens. Do not try to do it with a colon!
+//
+// ex. ir('test.jpg', 200 400)
+
+image-replace(path, dimensions...)
+  dimensions = dimensions[0]
+  font: 0/0 a
+  text-shadow: none
+  color: transparent
+  bg: path if path
+  if length(dimensions) > 1
+    width: unit(dimensions[0], 'px')
+    height: unit(dimensions[1], 'px')
+  else
+    warn("Make sure you also pass the image dimensions. Example: ir('/img/whatever.jpg', 200px 400px)")
+
+// Alias: ir
+ir = image-replace
+
+// Function: cached-image-url
+//
+// An alternative to url() that stores images in a cache for use in
+// cache-images().
+
+background-images = null
+
+cached-image-url()
+  base = ''
+  s = unquote('url("' + base + join('', arguments) + '")')
+  push(background-images, s) unless s in background-images
+  url(arguments)
+
+// Mixin: Cache Images
+// Use this at the end of all your styles outputs the image cache script.
+
+cache-images()
+  body:after
+    display: none
+    content: background-images
+
+// Mixin: Sprite
+//
+// Given a direction in which your sprites are aligned (horizontal/vertical) and
+// an iteration, will measure the width/height of your first sprite frame and
+// step through to the nth next one, depending on the given iteration number.
+// Width/height must be defined for this to work (as is the case for any sprite)
+//
+// ex. sprite: 2
+// ex. sprite: 5 'horizontal'
+//
+// TODO: Try using image-size here if @width or @height aren't defined
+
+sprite(iteration, orientation='vertical')
+  if orientation == 'vertical'
+    background-position: 0 unit(@height*-1*iteration, 'px')
+  else if orientation == 'horizontal'
+    // warn(unit(@width*iteration, 'px'))
+    background-position: unit(@width*iteration, 'px') 0
diff --git a/axis/index.styl b/axis/index.styl
index cb6cd0b..4704d80 100644
--- a/axis/index.styl
+++ b/axis/index.styl
@@ -7,7 +7,9 @@
 @import 'vendor'
 @import 'utilities'
 @import 'gradients'
+@import 'images'
 @import 'interaction'
+@import 'layout'
 @import 'typography'
 @import 'code'
 @import 'ui'
diff --git a/axis/layout.styl b/axis/layout.styl
new file mode 100644
index 0000000..0eadb9e
--- /dev/null
+++ b/axis/layout.styl
@@ -0,0 +1,114 @@
+// Alias: group
+// Clearfix with a better name. Excellent for wrangling floats.
+
+group = clearfix
+
+// Mixin: Columns
+//
+// For css3 columns. Takes column count (int), column gap (px, em), column width
+// (px, em), and a border-like declaration if you want a column rule. This
+// follows exactly with the css3 spec, it's just quicker.
+//
+// ex. columns()
+// ex. columns: 5
+// ex. columns(8, 15px, 200px, '1px solid red')
+
+columns(count=3, gap=30px, width=null, rule=null)
+  column-count: count
+  column-gap: gap
+  column-width: width if width
+  column-rule: unquote(rule) if rule
+
+// Mixin: Avoid Column Break
+//
+// If you have a list that is broken into columns, this will make sure that the
+// list item is not split across columns awkwardly. Works only in webkit at the
+// moment.
+//
+// ex. avoid-column-break()
+
+avoid-column-break()
+  column-break-inside: avoid
+
+// Alias: Inline Block
+// Cross browser inline block display. Saves many IE headaches.
+
+inline-block()
+  display: inline-block
+
+  if support-for-ie
+    display: -moz-inline-stack
+    vertical-align: baseline
+    zoom: 1
+    *display: inline
+    *vertical-align: auto
+
+// Mixin: Vertically Align
+// Cross browser vertical align. Works down to IE9.
+//
+// ex. vertically-align() or reset it with vertically-align(false)
+
+vertically-align(reset = null)
+  if reset != false
+    position: relative
+    top: 50%
+    transform: translateY(-50%)
+  else
+    position: relative
+    top: 0
+    transform: translateY(0)
+
+// Mixin: Media
+//
+// Based on Nicole Sullivan's media class, made famous by Facebook
+// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-
+// hundreds-of-lines-of-code
+//
+// Put this on a parent and it will split the first two children left and right,
+// like you would with perhaps a comment with an avatar to the left. Pass it a
+// margin between the two. Explained fully here:
+// http://carrotblog.com/css-patterns-evolved/
+//
+// This mixin works right when the element you apply it to has two or three
+// direct children. The first one will float to the left, the second one will be
+// to the right of the first, and third will go farthest right.
+//
+// ex. media()
+// ex. media: 15px
+// ex. media: 15px 10px
+
+media(margin=10px)
+
+  left-margin = margin
+  right-margin = margin
+
+  if length(arguments) > 1
+    left-margin = arguments[0]
+    right-margin = arguments[1]
+
+  overflow: hidden
+  zoom: 1
+
+  & > *
+    inline-block()
+    overflow: hidden
+  & > *:first-child
+    float: left
+    margin-right: right-margin
+  & > *:nth-child(3)
+    float: right
+    margin-left: left-margin
+
+// Mixin: Ratio Box
+// Set a specific width/height ratio. Useful on background images and iframes.
+
+ratio-box(ratio = 1/1)
+  ratio = remove-unit(ratio)
+  overflow: hidden
+  position: relative
+
+  &:before
+    content: ''
+    display: block
+    height: 0
+    padding-top: (1 / ratio) * 100%
diff --git a/axis/reset.styl b/axis/reset.styl
index 453c168..7e95e9e 100644
--- a/axis/reset.styl
+++ b/axis/reset.styl
@@ -166,3 +166,16 @@ fluid-media()
     border: 0
     -ms-interpolation-mode: bicubic
     display: block
+
+// Mixin: Border Box HTML
+// Add border box to every element in your project. Used in your project root.
+// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+
+border-box-html()
+  html
+    box-sizing: border-box
+
+  *,
+  *:before,
+  *:after
+    box-sizing: inherit
diff --git a/axis/typography.styl b/axis/typography.styl
index 2ee05cf..7b264dc 100644
--- a/axis/typography.styl
+++ b/axis/typography.styl
@@ -2,9 +2,54 @@
 // Typography
 // ----------
 
+// Alias: Bold
+// It's just faster to type bold() than font-weight: bold
+
+bold()
+  font-weight: bold
+
+// Alias: Italic
+// It's just faster to type italic() than font-style: italic
+
+italic()
+  font-style: italic
+
+// Alias: Normal
+// Put the font-weight and style back to normal
+
+normal()
+  font-weight: normal
+  font-style: normal
+
+// Mixin: Raquo
+//
+// Because technically raquo is not semantic, it's better to add it like this.
+//
+// ex. raquo()
+
+raquo()
+  &:after
+    content: " \00BB"
+
+// Mixin: Font Face
+//
+// Super simple font-face declaration. Just give the name and the folder it
+// lives in. Make sure the font name matches the name of the files. Uses the
+// fontspring syntax:
+// http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
+//
+// ex. font-face(proxima-nova, '/fonts')
+
+font-face(name, folder, weight='normal', style='normal')
+  @font-face
+    font-family: name
+    src: url(folder unquote('/') name unquote('.eot') '?#iefix') format('embedded-opentype'), url(folder unquote('/') name unquote('.woff')) format('woff'), url(folder unquote('/') name unquote('.ttf')) format('truetype'), url(folder unquote('/') name unquote('.eot') unquote('#') name) format('svg');
+    font-weight: unquote(weight)
+    font-style: unquote(style)
+
 // Function: Line Height
-// 
-// If there is a font-size set on the parent element, adjusts the line height to 
+//
+// If there is a font-size set on the parent element, adjusts the line height to
 // match that. If not, it uses the base font-size to calculate the line-height.
 
 -line-height()
@@ -15,10 +60,10 @@
     line-height: 1.6rem
 
 // Mixin: Text Margin
-// 
+//
 // Puts nice visually pleasing top and bottom margins on a paragraph of text.
 // Put a font-size on your element to have it adjust accordingly.
-// 
+//
 // ex. p
 //       font-size: 18px
 //       text-margin()
@@ -30,10 +75,10 @@ text-margin(size=font-size)
     margin: unit(font-size*.75, 'px') 0
 
 // Mixin: Paragraph
-// 
+//
 // Sets a nice size, line-height, and margins on a paragraph of text. Pass a
 // size in to customize. Toggle margins off if you don't want them.
-// 
+//
 // ex. p()
 // ex. p: 18px
 // ex. p: 14px false
@@ -87,9 +132,9 @@ reset-case()
   text-transform: none
 
 // Mixin: Small
-// 
+//
 // Makes your text smaller and a little lighter. Great on <small /> tags.
-// 
+//
 // ex. small()
 
 small()
@@ -110,12 +155,12 @@ small()
   openTypeLigatures() if ligatures
 
 // Mixin Set: h1, h2, h3, h4, h5, h6
-// 
+//
 // These provide nice defaults for headings based off the default font size.
 // The can scale infinitely, and work best when matched to their corresponding
 // html elements. If you'd like to change the base size of a header, just pass
 // it as an option.
-// 
+//
 // ex. h3()
 // ex. h3: 3.5
 
@@ -139,11 +184,11 @@ h6(size=0.9)
   upcase()
 
 // Mixin: Link
-// 
+//
 // A nice default style for links. Accepts a color and a style. Color can be
 // anything, style can be underline, darken, lighten, or glow, each giving it a
 // different style of interaction when hovered. More suggestions here welcome.
-// 
+//
 // ex. link()
 // ex. link: green
 // ex. link: #57777E 'glow'
@@ -165,12 +210,12 @@ link(color=blue, style='underline')
   else if style == 'glow'
     &:hover
       text-shadow: 0 0 7px rgba(color, .6)
-      
+
   &:visited
     opacity: .8
 
 // Mixin: Reset Link
-// 
+//
 // Sometimes my link mixin of the browser defaults will give you questionable
 // link defaults that you don't want on certain elements. This guy gets rid of
 // that.
@@ -181,17 +226,17 @@ reset-link()
   border: none
   text-decoration: none
   color: initial
-  
+
   &:hover
     border: none
     text-decoration: none
     color: initial
-    
+
   &:visited
     opacity: 1
 
 // Mixin: Text Selection
-// 
+//
 // This guy sets the text select color intelligently based on the
 // highlight-color variable found in the settings file. If you really want, you
 // can pass it a color override too.
@@ -204,17 +249,17 @@ text-selection(color=highlight-color, textColor=null)
   &::-moz-selection
     background: color
     color: textColor
-    
+
   &::selection
     background: color
     color: textColor
 
 // Mixin: Ul
-// 
+//
 // A nice default for list styles. More or less the same as browser defaults,
 // scales nicely. You can pass it any style that list-style-type would normally
 // take. Defaults to disc. Use this on a ul element por favor.
-// 
+//
 // ex. ul()
 // ex. ul: 'square'
 
@@ -229,11 +274,11 @@ ul(style='disc')
     padding: 0.125rem
 
 // Mixin: Ol
-// 
+//
 // A nice default for list styles. More or less the same as browser defaults,
 // scales nicely. You can pass it any style that list-style-type would normally
 // take. Defaults to decimal. Use this on a ol element por favor.
-// 
+//
 // ex. ol()
 // ex. ol: 'upper-roman'
 
@@ -248,10 +293,10 @@ ol(style='decimal')
     padding: 0.125rem
 
 // Mixin: Inline List
-// 
+//
 // For when you need your list to be horizontal. Pass it the spacing you want
 // between list elements, whatever units you'd like. Defaults to 20px.
-// 
+//
 // ex. inline-list()
 // ex. inline-list: 15px
 
@@ -269,11 +314,11 @@ inline-list(spacing=20px)
     margin-right: 0
 
 // Mixin: Reset List
-// 
+//
 // If you're tired of all the list shenanigans and want to get rid of them for
 // this special list you're working on, this is your guy. Resets the margins,
 // padding, and style.
-// 
+//
 // ex. reset-list()
 
 reset-list()
@@ -287,11 +332,11 @@ reset-list()
     margin: 0
 
 // Mixin: Blockquote
-// 
+//
 // Nice styles for a blockquote, and even puts a nice hyphen in before your
 // citation. Use with a <p> and <cite>, <footer>, or <figcaption> inside for
 // best results. Pass a color or 'none' to set the left border.
-// 
+//
 // ex. blockquote()
 
 blockquote(color=blue)
@@ -317,13 +362,13 @@ blockquote(color=blue)
 blockquo = blockquote
 
 // Hyphenation
-// 
+//
 // Hyphenation is the better word-break. It’s locale aware, and inserts the
 // hyphen character at the correct place, when breaking the words. This is
 // especially important in responsive designs. It will save you from a lot of
 // ragged lines. And, no need anymore for clunky & slow Javascript hyphenation
 // fallbacks. Taken from http://www.newnet-soft.com/blog/csstypography
-// 
+//
 // ex. hyphenation()
 
 hyphenation()
@@ -336,15 +381,15 @@ hyphenation()
     hyphenate-lines:          3
 
 // Additive Mixin: Base
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // This is an essential mixin. You want this on your page. Sets your font stack,
 // size, and colors based on the settings file and makes sure that your text is
 // a great looking as possible. You can override any of the params, but there is
 // really no reason to.
-// 
+//
 // ex. base()
 
 base(fonts=font-stack, size=font-size, color=font-color)
@@ -361,12 +406,12 @@ base(fonts=font-stack, size=font-size, color=font-color)
     font-size-adjust: auto
 
 // Additive Mixin: Headers
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Adds roots' wonderful scaling header styles to your <hx> tags.
-// 
+//
 // ex. headers()
 
 headers()
@@ -389,12 +434,12 @@ headers()
     h6()
 
 // Additive Mixin: Lists
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Adds roots' styles to ul and ols.
-// 
+//
 // ex. lists()
 
 lists()
@@ -404,12 +449,12 @@ lists()
     ol()
 
 // Additive Mixin: Bold-Italic
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Adds bold and italic styles to the right tags if you did a global reset.
-// 
+//
 // ex. bold-italic()
 
 bold-italic()
@@ -423,13 +468,13 @@ bold-italic()
     italic()
 
 // Additive Mixin: Typography
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Adds roots' styles to bold and italic elements, headers, paragrapgs, small
 // text, links, lists, and blockquotes. Got all your basic elements covered.
-// 
+//
 // ex. typography()
 
 typography()
@@ -449,6 +494,6 @@ typography()
 
   blockquote
     blockquo()
-  
+
   .hyphenation
     hyphenation()
diff --git a/axis/utilities.styl b/axis/utilities.styl
index 12b27ff..7e9851d 100644
--- a/axis/utilities.styl
+++ b/axis/utilities.styl
@@ -34,111 +34,6 @@ b()
   arguments = unquote('1px solid') unless arguments
   border: arguments
 
-// Mixin: Bg
-//
-// Makes background (with image) declarations a little simpler. Use this with
-// the global img-path variable to set a base image path that you don't have to
-// keep repeating. Also sets 'no-repeat' as the default background-repeat.
-//
-// ex. bg: 'test.png'
-// ex. bg: 'other.jpg' center center repeat
-
-bg(path, args...)
-  args = unquote('no-repeat') unless args
-  background: url(img-path path) args
-
-// Mixin: bg-retina
-//
-// Make sure the image path is double the size, pass it halved numbers, and
-// you're in the retina-clear.
-//
-// ex. bg-retina: 'test.png' 200px 100px
-// ex. bg-retina: 'other.jpg' 100px 50px center center repeat
-
-bg-retina(path, width, height, args...)
-  args = unquote('no-repeat') unless args
-  set_size = false
-
-  for arg in args
-    if arg == 'no-repeat'
-      set_size = true
-
-  background: url(img-path path) args
-  background-size: width height
-
-  if set_size
-    size: width height
-
-// Alias: Bold
-// It's just faster to type bold() than font-weight: bold
-
-bold()
-  font-weight: bold
-
-// Alias: Italic
-// It's just faster to type italic() than font-style: italic
-
-italic()
-  font-style: italic
-
-// Alias: Normal
-// Put the font-weight and style back to normal
-
-normal()
-  font-weight: normal
-  font-style: normal
-
-// Mixin: Image Replace
-//
-// Image replacement. Pass it an image path and the image's dimensions and any
-// text will be hidden in the div and it will show an image instead. Uses the
-// fanciest new method, props to Paul Irish. Only works when called as a
-// function with parens. Do not try to do it with a colon!
-//
-// ex. ir('test.jpg', 200 400)
-
-image-replace(path, dimensions...)
-  dimensions = dimensions[0]
-  font: 0/0 a
-  text-shadow: none
-  color: transparent
-  bg: path if path
-  if length(dimensions) > 1
-    width: unit(dimensions[0], 'px')
-    height: unit(dimensions[1], 'px')
-  else
-    warn("Make sure you also pass the image dimensions. Example: ir('/img/whatever.jpg', 200px 400px)")
-
-// Alias: ir
-ir = image-replace
-
-// Mixin: Columns
-//
-// For css3 columns. Takes column count (int), column gap (px, em), column width
-// (px, em), and a border-like declaration if you want a column rule. This
-// follows exactly with the css3 spec, it's just quicker.
-//
-// ex. columns()
-// ex. columns: 5
-// ex. columns(8, 15px, 200px, '1px solid red')
-
-columns(count=3, gap=30px, width=null, rule=null)
-  column-count: count
-  column-gap: gap
-  column-width: width if width
-  column-rule: unquote(rule) if rule
-
-// Mixin: Avoid Column Break
-//
-// If you have a list that is broken into columns, this will make sure that the
-// list item is not split across columns awkwardly. Works only in webkit at the
-// moment.
-//
-// ex. avoid-column-break()
-
-avoid-column-break()
-  column-break-inside: avoid
-
 // Mixin: Triangle
 //
 // One of my favorites. Makes a little css triangle for you. Pass it a direction
@@ -167,152 +62,6 @@ triangle(direction='up', size=10px, color=#000)
     border-bottom: size solid transparent
     border-left: size solid color
 
-// Mixin: Sprite
-//
-// Given a direction in which your sprites are aligned (horizontal/vertical) and
-// an iteration, will measure the width/height of your first sprite frame and
-// step through to the nth next one, depending on the given iteration number.
-// Width/height must be defined for this to work (as is the case for any sprite)
-//
-// ex. sprite: 2
-// ex. sprite: 5 'horizontal'
-//
-// TODO: Try using image-size here if @width or @height aren't defined
-
-sprite(iteration, orientation='vertical')
-  if orientation == 'vertical'
-    background-position: 0 unit(@height*-1*iteration, 'px')
-  else if orientation == 'horizontal'
-    // warn(unit(@width*iteration, 'px'))
-    background-position: unit(@width*iteration, 'px') 0
-
-// Alias: group
-// Clearfix with a better name. Excellent for wrangling floats.
-
-group = clearfix
-
-// Alias: Inline Block
-// Cross browser inline block display. Saves many IE headaches.
-
-inline-block()
-  display: inline-block
-
-  if support-for-ie
-    display: -moz-inline-stack
-    vertical-align: baseline
-    zoom: 1
-    *display: inline
-    *vertical-align: auto
-
-// Mixin: Border Box HTML
-// Add border box to every element in your project. Used in your project root.
-// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
-
-border-box-html()
-  html
-    box-sizing: border-box
-
-  *,
-  *:before,
-  *:after
-    box-sizing: inherit
-
-// Mixin: Vertically Align
-// Cross browser vertical align. Works down to IE9.
-//
-// ex. vertically-align() or reset it with vertically-align(false)
-
-vertically-align(reset = null)
-  if reset != false
-    position: relative
-    top: 50%
-    transform: translateY(-50%)
-  else
-    position: relative
-    top: 0
-    transform: translateY(0)
-
-// Mixin: Media
-//
-// Based on Nicole Sullivan's media class, made famous by Facebook
-// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-
-// hundreds-of-lines-of-code
-//
-// Put this on a parent and it will split the first two children left and right,
-// like you would with perhaps a comment with an avatar to the left. Pass it a
-// margin between the two. Explained fully here:
-// http://carrotblog.com/css-patterns-evolved/
-//
-// This mixin works right when the element you apply it to has two or three
-// direct children. The first one will float to the left, the second one will be
-// to the right of the first, and third will go farthest right.
-//
-// ex. media()
-// ex. media: 15px
-// ex. media: 15px 10px
-
-media(margin=10px)
-
-  left-margin = margin
-  right-margin = margin
-
-  if length(arguments) > 1
-    left-margin = arguments[0]
-    right-margin = arguments[1]
-
-  overflow: hidden
-  zoom: 1
-
-  & > *
-    inline-block()
-    overflow: hidden
-  & > *:first-child
-    float: left
-    margin-right: right-margin
-  & > *:nth-child(3)
-    float: right
-    margin-left: left-margin
-
-// Mixin: Ratio Box
-// Set a specific width/height ratio. Useful on background images and iframes.
-
-ratio-box(ratio = 1/1)
-  ratio = remove-unit(ratio)
-  overflow: hidden
-  position: relative
-
-  &:before
-    content: ''
-    display: block
-    height: 0
-    padding-top: (1 / ratio) * 100%
-
-// Mixin: Raquo
-//
-// Because technically raquo is not semantic, it's better to add it like this.
-//
-// ex. raquo()
-
-raquo()
-  &:after
-    content: " \00BB"
-
-// Mixin: Font Face
-//
-// Super simple font-face declaration. Just give the name and the folder it
-// lives in. Make sure the font name matches the name of the files. Uses the
-// fontspring syntax:
-// http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
-//
-// ex. font-face(proxima-nova, '/fonts')
-
-font-face(name, folder, weight='normal', style='normal')
-  @font-face
-    font-family: name
-    src: url(folder unquote('/') name unquote('.eot') '?#iefix') format('embedded-opentype'), url(folder unquote('/') name unquote('.woff')) format('woff'), url(folder unquote('/') name unquote('.ttf')) format('truetype'), url(folder unquote('/') name unquote('.eot') unquote('#') name) format('svg');
-    font-weight: unquote(weight)
-    font-style: unquote(style)
-
 // Mixin: Debug
 //
 // Debugging tool - adds a border to the current element, its children,
@@ -406,27 +155,6 @@ ease-in-out-circ =  cubic-bezier(0.785,  0.135, 0.150, 0.860)
 ease-in-out-back =  cubic-bezier(0.680, -0.550, 0.265, 1.550)
 ease-in-out-swift = cubic-bezier(0.900,  0.000, 0.100, 1.000)
 
-// Function: cached-image-url
-//
-// An alternative to url() that stores images in a cache for use in
-// cache-images().
-
-background-images = null
-
-cached-image-url()
-  base = ''
-  s = unquote('url("' + base + join('', arguments) + '")')
-  push(background-images, s) unless s in background-images
-  url(arguments)
-
-// Mixin: Cache Images
-// Use this at the end of all your styles outputs the image cache script.
-
-cache-images()
-  body:after
-    display: none
-    content: background-images
-
 // Function: Rem Calculator
 //
 // Calculates and returns the rem value based on px input. Default base font
diff --git a/test/fixtures/utilities/bg.css b/test/fixtures/images/bg.css
similarity index 100%
rename from test/fixtures/utilities/bg.css
rename to test/fixtures/images/bg.css
diff --git a/test/fixtures/utilities/bg.styl b/test/fixtures/images/bg.styl
similarity index 100%
rename from test/fixtures/utilities/bg.styl
rename to test/fixtures/images/bg.styl
diff --git a/test/fixtures/utilities/image-cache.css b/test/fixtures/images/image-cache.css
similarity index 100%
rename from test/fixtures/utilities/image-cache.css
rename to test/fixtures/images/image-cache.css
diff --git a/test/fixtures/utilities/image-cache.styl b/test/fixtures/images/image-cache.styl
similarity index 100%
rename from test/fixtures/utilities/image-cache.styl
rename to test/fixtures/images/image-cache.styl
diff --git a/test/fixtures/utilities/image-replace.css b/test/fixtures/images/image-replace.css
similarity index 100%
rename from test/fixtures/utilities/image-replace.css
rename to test/fixtures/images/image-replace.css
diff --git a/test/fixtures/utilities/image-replace.styl b/test/fixtures/images/image-replace.styl
similarity index 100%
rename from test/fixtures/utilities/image-replace.styl
rename to test/fixtures/images/image-replace.styl
diff --git a/test/fixtures/utilities/sprite.css b/test/fixtures/images/sprite.css
similarity index 100%
rename from test/fixtures/utilities/sprite.css
rename to test/fixtures/images/sprite.css
diff --git a/test/fixtures/utilities/sprite.styl b/test/fixtures/images/sprite.styl
similarity index 100%
rename from test/fixtures/utilities/sprite.styl
rename to test/fixtures/images/sprite.styl
diff --git a/test/fixtures/utilities/columns.css b/test/fixtures/layout/columns.css
similarity index 100%
rename from test/fixtures/utilities/columns.css
rename to test/fixtures/layout/columns.css
diff --git a/test/fixtures/utilities/columns.styl b/test/fixtures/layout/columns.styl
similarity index 100%
rename from test/fixtures/utilities/columns.styl
rename to test/fixtures/layout/columns.styl
diff --git a/test/fixtures/utilities/group.css b/test/fixtures/layout/group.css
similarity index 100%
rename from test/fixtures/utilities/group.css
rename to test/fixtures/layout/group.css
diff --git a/test/fixtures/utilities/group.styl b/test/fixtures/layout/group.styl
similarity index 100%
rename from test/fixtures/utilities/group.styl
rename to test/fixtures/layout/group.styl
diff --git a/test/fixtures/utilities/inline-block.css b/test/fixtures/layout/inline-block.css
similarity index 100%
rename from test/fixtures/utilities/inline-block.css
rename to test/fixtures/layout/inline-block.css
diff --git a/test/fixtures/utilities/inline-block.styl b/test/fixtures/layout/inline-block.styl
similarity index 100%
rename from test/fixtures/utilities/inline-block.styl
rename to test/fixtures/layout/inline-block.styl
diff --git a/test/fixtures/utilities/media.css b/test/fixtures/layout/media.css
similarity index 100%
rename from test/fixtures/utilities/media.css
rename to test/fixtures/layout/media.css
diff --git a/test/fixtures/utilities/media.styl b/test/fixtures/layout/media.styl
similarity index 100%
rename from test/fixtures/utilities/media.styl
rename to test/fixtures/layout/media.styl
diff --git a/test/fixtures/utilities/ratio-box.css b/test/fixtures/layout/ratio-box.css
similarity index 100%
rename from test/fixtures/utilities/ratio-box.css
rename to test/fixtures/layout/ratio-box.css
diff --git a/test/fixtures/utilities/ratio-box.styl b/test/fixtures/layout/ratio-box.styl
similarity index 100%
rename from test/fixtures/utilities/ratio-box.styl
rename to test/fixtures/layout/ratio-box.styl
diff --git a/test/fixtures/utilities/vertical-align.css b/test/fixtures/layout/vertical-align.css
similarity index 100%
rename from test/fixtures/utilities/vertical-align.css
rename to test/fixtures/layout/vertical-align.css
diff --git a/test/fixtures/utilities/vertical-align.styl b/test/fixtures/layout/vertical-align.styl
similarity index 100%
rename from test/fixtures/utilities/vertical-align.styl
rename to test/fixtures/layout/vertical-align.styl
diff --git a/test/fixtures/utilities/border-box-html.css b/test/fixtures/reset/border-box-html.css
similarity index 100%
rename from test/fixtures/utilities/border-box-html.css
rename to test/fixtures/reset/border-box-html.css
diff --git a/test/fixtures/utilities/border-box-html.styl b/test/fixtures/reset/border-box-html.styl
similarity index 100%
rename from test/fixtures/utilities/border-box-html.styl
rename to test/fixtures/reset/border-box-html.styl
diff --git a/test/fixtures/utilities/font-face.css b/test/fixtures/typography/font-face.css
similarity index 100%
rename from test/fixtures/utilities/font-face.css
rename to test/fixtures/typography/font-face.css
diff --git a/test/fixtures/utilities/font-face.styl b/test/fixtures/typography/font-face.styl
similarity index 100%
rename from test/fixtures/utilities/font-face.styl
rename to test/fixtures/typography/font-face.styl
diff --git a/test/fixtures/utilities/font-weight.css b/test/fixtures/typography/font-weight.css
similarity index 100%
rename from test/fixtures/utilities/font-weight.css
rename to test/fixtures/typography/font-weight.css
diff --git a/test/fixtures/utilities/font-weight.styl b/test/fixtures/typography/font-weight.styl
similarity index 100%
rename from test/fixtures/utilities/font-weight.styl
rename to test/fixtures/typography/font-weight.styl
diff --git a/test/fixtures/utilities/raquo.css b/test/fixtures/typography/raquo.css
similarity index 100%
rename from test/fixtures/utilities/raquo.css
rename to test/fixtures/typography/raquo.css
diff --git a/test/fixtures/utilities/raquo.styl b/test/fixtures/typography/raquo.styl
similarity index 100%
rename from test/fixtures/utilities/raquo.styl
rename to test/fixtures/typography/raquo.styl
diff --git a/test/test.coffee b/test/test.coffee
index 6d5e848..566b496 100644
--- a/test/test.coffee
+++ b/test/test.coffee
@@ -107,6 +107,22 @@ describe 'gradients', ->
   it 'image-gradient', (done) ->
     compile_and_match(path.join(@path, 'image-gradient.styl'), done)
 
+describe 'images', ->
+
+  before -> @path = path.join(test_path, 'images')
+
+  it 'bg', (done) ->
+    compile_and_match(path.join(@path, 'bg.styl'), done)
+
+  it 'image-cache', (done) ->
+    compile_and_match(path.join(@path, 'image-cache.styl'), done)
+
+  it 'image-replace', (done) ->
+    compile_and_match(path.join(@path, 'image-replace.styl'), done)
+
+  it 'sprite', (done) ->
+    compile_and_match(path.join(@path, 'sprite.styl'), done)
+
 describe 'interaction', ->
 
   before -> @path = path.join(test_path, 'interaction')
@@ -129,6 +145,28 @@ describe 'interaction', ->
   it 'hover-color', (done) ->
     compile_and_match(path.join(@path, 'hover-color.styl'), done)
 
+describe 'layout', ->
+
+  before -> @path = path.join(test_path, 'layout')
+
+  it 'columns', (done) ->
+    compile_and_match(path.join(@path, 'columns.styl'), done)
+
+  it 'group', (done) ->
+    compile_and_match(path.join(@path, 'group.styl'), done)
+
+  it 'inline-block', (done) ->
+    compile_and_match(path.join(@path, 'inline-block.styl'), done)
+
+  it 'media', (done) ->
+    compile_and_match(path.join(@path, 'media.styl'), done)
+
+  it 'ratio-box', (done) ->
+    compile_and_match(path.join(@path, 'ratio-box.styl'), done)
+
+  it 'vertical-align', (done) ->
+    compile_and_match(path.join(@path, 'vertical-align.styl'), done)
+
 describe 'print', ->
 
   before -> @path = path.join(test_path, 'print')
@@ -143,6 +181,9 @@ describe 'reset', ->
   it 'fluid-media', (done) ->
     compile_and_match(path.join(@path, 'fluid-media.styl'), done)
 
+  it 'border-box-html', (done) ->
+    compile_and_match(path.join(@path, 'border-box-html.styl'), done)
+
 describe 'tables', ->
 
   before -> @path = path.join(test_path, 'tables')
@@ -154,6 +195,15 @@ describe 'typography', ->
 
   before -> @path = path.join(test_path, 'typography')
 
+  it 'raquo', (done) ->
+    compile_and_match(path.join(@path, 'raquo.styl'), done)
+
+  it 'font-face', (done) ->
+    compile_and_match(path.join(@path, 'font-face.styl'), done)
+
+  it 'font-weight', (done) ->
+    compile_and_match(path.join(@path, 'font-weight.styl'), done)
+
   it 'text-margin', (done) ->
     compile_and_match(path.join(@path, 'text-margin.styl'), done)
 
@@ -225,65 +275,24 @@ describe 'utilities', ->
   it 'b', (done) ->
     compile_and_match(path.join(@path, 'b.styl'), done)
 
-  it 'bg', (done) ->
-    compile_and_match(path.join(@path, 'bg.styl'), done)
-
-  it 'columns', (done) ->
-    compile_and_match(path.join(@path, 'columns.styl'), done)
-
   it 'debug', (done) ->
     compile_and_match(path.join(@path, 'debug.styl'), done)
 
-  it 'font-face', (done) ->
-    compile_and_match(path.join(@path, 'font-face.styl'), done)
-
-  it 'font-weight', (done) ->
-    compile_and_match(path.join(@path, 'font-weight.styl'), done)
-
-  it 'group', (done) ->
-    compile_and_match(path.join(@path, 'group.styl'), done)
-
-  it 'image-replace', (done) ->
-    compile_and_match(path.join(@path, 'image-replace.styl'), done)
-
-  it 'inline-block', (done) ->
-    compile_and_match(path.join(@path, 'inline-block.styl'), done)
-
-  it 'border-box-html', (done) ->
-    compile_and_match(path.join(@path, 'border-box-html.styl'), done)
-
-  it 'media', (done) ->
-    compile_and_match(path.join(@path, 'media.styl'), done)
-
   it 'quantity-queries', (done) ->
     compile_and_match(path.join(@path, 'quantity-queries.styl'), done)
 
-  it 'ratio-box', (done) ->
-    compile_and_match(path.join(@path, 'ratio-box.styl'), done)
-
   it 'no-select', (done) ->
     compile_and_match(path.join(@path, 'no-select.styl'), done)
 
-  it 'raquo', (done) ->
-    compile_and_match(path.join(@path, 'raquo.styl'), done)
-
   it 'rem-calculator', (done) ->
     compile_and_match(path.join(@path, 'rem-calculator.styl'), done)
 
   it 'rounded', (done) ->
     compile_and_match(path.join(@path, 'rounded.styl'), done)
 
-  it 'sprite', (done) ->
-    compile_and_match(path.join(@path, 'sprite.styl'), done)
-
   it 'triangle', (done) ->
     compile_and_match(path.join(@path, 'triangle.styl'), done)
 
-  it 'vertical-align', (done) ->
-    compile_and_match(path.join(@path, 'vertical-align.styl'), done)
-
-  it 'image-cache', (done) ->
-    compile_and_match(path.join(@path, 'image-cache.styl'), done)
 
 describe 'vendor', ->
 
diff --git a/test/visual.html b/test/visual.html
index f90b6f1..043bda5 100644
--- a/test/visual.html
+++ b/test/visual.html
@@ -29,6 +29,11 @@
     <link rel='stylesheet' href='fixtures/gradients/gradient.css' >
     <link rel='stylesheet' href='fixtures/gradients/image-gradient.css' >
 
+    <!-- images -->
+    <link rel='stylesheet' href='fixtures/images/image-replace.css' >
+    <link rel='stylesheet' href='fixtures/images/sprite.css' >
+    <link rel='stylesheet' href='fixtures/images/bg.css' >
+
     <!-- interaction -->
     <link rel='stylesheet' href='fixtures/interaction/hover-darken.css' >
     <link rel='stylesheet' href='fixtures/interaction/hover-lighten.css' >
@@ -37,10 +42,21 @@
     <link rel='stylesheet' href='fixtures/interaction/hover-fade.css' >
     <link rel='stylesheet' href='fixtures/interaction/hover-color.css' >
 
+    <!-- layout -->
+    <link rel='stylesheet' href='fixtures/layout/columns.css' >
+    <link rel='stylesheet' href='fixtures/layout/group.css' >
+    <link rel='stylesheet' href='fixtures/layout/inline-block.css' >
+    <link rel='stylesheet' href='fixtures/layout/media.css' >
+    <link rel='stylesheet' href='fixtures/layout/ratio-box.css' >
+    <link rel='stylesheet' href='fixtures/layout/vertical-align.css' >
+
     <!-- tables -->
     <link rel='stylesheet' href='fixtures/tables/table.css' >
 
     <!-- typography -->
+    <link rel='stylesheet' href='fixtures/typography/raquo.css' >
+    <link rel='stylesheet' href='fixtures/typography/font-face.css' >
+    <link rel='stylesheet' href='fixtures/typography/font-weight.css' >
     <link rel='stylesheet' href='fixtures/typography/text-margin.css' >
     <link rel='stylesheet' href='fixtures/typography/paragraph.css' >
     <link rel='stylesheet' href='fixtures/typography/fs.css' >
@@ -66,24 +82,13 @@
 
     <!-- utilities -->
     <link rel='stylesheet' href='fixtures/utilities/b.css' >
-    <link rel='stylesheet' href='fixtures/utilities/bg.css' >
-    <link rel='stylesheet' href='fixtures/utilities/columns.css' >
     <link rel='stylesheet' href='fixtures/utilities/debug.css' >
-    <link rel='stylesheet' href='fixtures/utilities/font-face.css' >
-    <link rel='stylesheet' href='fixtures/utilities/font-weight.css' >
-    <link rel='stylesheet' href='fixtures/utilities/group.css' >
-    <link rel='stylesheet' href='fixtures/utilities/image-replace.css' >
-    <link rel='stylesheet' href='fixtures/utilities/inline-block.css' >
-    <link rel='stylesheet' href='fixtures/utilities/media.css' >
-    <link rel='stylesheet' href='fixtures/utilities/quantity-queries.css' >    
-    <link rel='stylesheet' href='fixtures/utilities/ratio-box.css' >
+    <link rel='stylesheet' href='fixtures/utilities/quantity-queries.css' >
     <link rel='stylesheet' href='fixtures/utilities/no-select.css' >
-    <link rel='stylesheet' href='fixtures/utilities/raquo.css' >
     <link rel='stylesheet' href='fixtures/utilities/rem-calculator.css' >
     <link rel='stylesheet' href='fixtures/utilities/rounded.css' >
-    <link rel='stylesheet' href='fixtures/utilities/sprite.css' >
     <link rel='stylesheet' href='fixtures/utilities/triangle.css' >
-    <link rel='stylesheet' href='fixtures/utilities/vertical-align.css' >
+
 
     <style>
       body {
@@ -198,6 +203,14 @@ <h1>gradients</h1>
       <div class='block image-gradient-twocolor'></div>
     </section>
 
+    <section id='images'>
+      <h1>images</h1>
+      <div class="block bg"></div>
+      <div class="block bg-retina"></div>
+
+      <p class="ir">i should not be able to be read</p>
+
+    </section>
     <section id='interaction'>
       <h1>interaction</h1>
       <div class='box hover-darken'></div>
@@ -208,6 +221,43 @@ <h1>interaction</h1>
       <div class='box hover-color'></div>
     </section>
 
+    <section id='layout'>
+      <h1>layout</h1>
+      <ul class='columns'>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+        <li>foo</li>
+      </ul>
+
+      <div class="inline-block">inline block</div>
+
+      <div class="inline-block">inline block 2</div>
+
+      <div class="media">
+        <img src="http://upload.wikimedia.org/wikipedia/en/4/4e/Shibe_Inu_Doge_meme.jpg" alt="">
+        <p>comment</p>
+      </div>
+
+      <div class="ratio-box">
+        <iframe width="1280" height="720" src="https://www.youtube.com/embed/o0xr1JRZOb4" frameborder="0" allowfullscreen></iframe>
+      </div>
+
+      <div class="vertical-align">
+        <div class='inner-div'>vertically aligned</div>
+      </div>
+      <div class="vertical-align">
+        <div class='inner-div reset'>not vertically aligned</div>
+      </div>
+
+    </section>
+
     <section id='tables'>
       <h1>tables</h1>
       <table class='table'>
@@ -229,6 +279,13 @@ <h1>tables</h1>
     <section id='typography'>
       <h1>typography</h1>
 
+      <p class="bold">bold</p>
+      <p class="italic">italic</p>
+      <p class="bold normal">normal</p>
+
+      <p class="raquo">look at this</p>
+
+
       <p class='text-margin'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, autem, dolores quae nobis recusandae eos harum vitae rem minus sit ducimus iure repudiandae eveniet at quo voluptates aperiam reiciendis perspiciatis!</p>
       <p class='text-margin'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, autem, dolores quae nobis recusandae eos harum vitae rem minus sit ducimus iure repudiandae eveniet at quo voluptates aperiam reiciendis perspiciatis!</p>
 
@@ -364,36 +421,6 @@ <h1>utilities</h1>
 
       <div class="block b"></div>
 
-      <div class="block bg"></div>
-      <div class="block bg-retina"></div>
-
-      <ul class='columns'>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-        <li>foo</li>
-      </ul>
-
-      <p class="bold">bold</p>
-      <p class="italic">italic</p>
-      <p class="bold normal">normal</p>
-
-      <p class="ir">i should not be able to be read</p>
-
-      <div class="inline-block">inline block</div>
-      <div class="inline-block">inline block 2</div>
-
-      <div class="media">
-        <img src="http://upload.wikimedia.org/wikipedia/en/4/4e/Shibe_Inu_Doge_meme.jpg" alt="">
-        <p>comment</p>
-      </div>
-
       <div class="quantity-queries">
         h4>Add blue border of there are at least 2 lis:</h4>
         <ul class="least">
@@ -429,18 +456,10 @@ <h4>Green border if exactly 5:</h4>
         </ul>
       </div>
 
-      <div class="ratio-box">
-        <iframe width="1280" height="720" src="https://www.youtube.com/embed/o0xr1JRZOb4" frameborder="0" allowfullscreen></iframe>
-      </div>
-
       <p class="no-select">you should not be able to select this text</p>
 
-      <p class="raquo">look at this</p>
-
-
       <h5 class="rem-calculator">Font-size is set as 30px but the browser see it as 1.875rem</h5>
 
-
       <div class="button rounded">look im rounded</div>
 
       <div class="tri"></div>
@@ -449,12 +468,6 @@ <h5 class="rem-calculator">Font-size is set as 30px but the browser see it as 1.
       <div class="tri-down"></div>
       <div class="tri-right"></div>
 
-      <div class="vertical-align">
-        <div class='inner-div'>vertically aligned</div>
-      </div>
-      <div class="vertical-align">
-        <div class='inner-div reset'>not vertically aligned</div>
-      </div>
       <div class="debug">
         <article>
           <hgroup>