Folder organization / 2 new categories

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

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'

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%

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