--- /dev/null
+// Copyright 2014 Jason Woofenden -- Public Domain (CC0)
+
+// This file contains helpers for using stylus in your project.
+//
+// Put something like this in your styl.styl:
+// @require 'code/wfpl/stylus-helpers.styl'
+
+
+// set units to px if it doesn't have a unit already
+_px(i)
+ unit(i) == '' ? unit(i, px) : i
+
+
+vendors = webkit moz o ms official
+
+border-radius()
+ for vendor in vendors
+ if vendor == official
+ border-radius: arguments
+ else
+ -{vendor}-border-radius: arguments
+// FIXME add box shadow and text shadow?
+
+// helper function
+_pos(type, args)
+ position: unquote(type)
+ for i in (0...length(args))
+ if not args[i] is a 'unit'
+ {args[i]}: args[i + 1] is a 'unit' ? args[i + 1] : 0
+
+// you can pass directions and units, or just directions. Examples:
+// absolute: top 20px left 0
+// fixed: top right
+// relative: top: -4px
+absolute()
+ _pos('absolute', arguments)
+fixed()
+ _pos('fixed', arguments)
+relative()
+ _pos('relative', arguments)
+
+// Make children of this element inline-blocks that are spaced evenly accross.
+//
+// To create a minimum distance between: don't use word-spacing, it's broken in
+// firefox. Instead, try padding on the children and negative margin on the
+// parent.
+space_evenly(line_height = 1.2em)
+ text-align justify
+ & > *
+ display inline-block
+ relative top line_height
+ &:before
+ content ''
+ display block
+ width 100%
+ margin-bottom -(line_height)
+ &:after
+ content ''
+ display inline-block
+ width 100%
+
+// image layout: left column has normal, right column hover versions
+//
+// arguments: width/height are pixel dimensions of a single sprite
+//
+// markup: put classes n1, n2, etc on the items.
+//
+// Example
+//
+// html:
+// <nav>
+// <ul>
+// <li class="n1">home</li>
+// <li class="n2">contact</li>
+// </ul>
+// </nav>
+// styl:
+// nav li
+// sprite-rollover "images/nav.png" 150 35 2
+sprite-rollover(image, width, height, count)
+ width = unit(width, px)
+ height = unit(width, px)
+ width width
+ height height
+ background: transparent url(image) top left no-repeat;
+ for n in (1..count)
+ &.n{n}
+ y = (2px - n * 35px)
+ background-position 0 y
+ &:hover
+ background-position -(width) y
+
+// Styling for a variable height element with an image background where the
+// middle repeats vertically. You must split your image into three images, and
+// name them with "-top", "-mid" and "-bot" suffixes (right before the file
+// extension.) then pass a filepath as the first argument to this function
+// which does not have a suffix.
+//
+// Example:
+//
+// image files:
+// i/foo-top.png (900x20)
+// i/foo-mid.png (900xwhatever)
+// i/foo-bot.png (900x30)
+//
+// dom layout: <div id="expando"><div><div><div>...</div></div></div></div>
+//
+// Stylus:
+//
+// #expando
+// mangin: 10px auto;
+// width: 900px;
+// background-vertical-stretch("i/foo.png", 20, 30)
+//
+// Notes:
+//
+// You can (optionally) pass 1-4 additional arguments which
+// (effectively) add padding to the inner most div. The default is to
+// have the height and width of the inner div match exactly the outer
+// one. Parameters you specify are relative to that (not the section
+// filled with the "-mid" image).
+background-vertical-stretch(image, top-height, bottom-height, top-pad = 0, right-pad = top-pad, bottom-pad = top-pad, left-pad = right-pad)
+ top-height = _px(top-height)
+ bottom-height = _px(bottom-height)
+ top-pad = _px(top-pad)
+ right-pad = _px(right-pad)
+ bottom-pad = _px(bottom-pad)
+ left-pad = _px(left-pad)
+ ext = extname(image)
+ path = pathjoin(dirname(image), basename(image, ext))
+
+ // bottom image (outermost block)
+ background transparent url(path + '-bot' + ext)
+ padding-bottom bottom-height + 1 // +1 to prevent margin collapsing
+ > *
+ background transparent url(path + '-top' + ext) 0 0 no-repeat
+ padding-top top-height + 1 // +1 to prevent margin collapsing
+ > * > *
+ background transparent url(path + '-mid' + ext) 0 0 repeat-y;
+ margin-top -1px; // correct for above +1 from top
+ margin-bottom -1px; // correct for above +1 from bottom
+ padding 1px; // to prevent margin collapsing
+ > * > * > *
+ // all "2px" below are to correct for 1px above padding and below
+ padding 1px;
+ margin-top 2px - top-height + top-pad
+ margin-left: left-pad - 2px
+ margin-right: right-pad - 2px
+ margin-bottom: 2px - bottom-height + bottom-pad
+ background transparent;
+
+li-reset()
+ margin 0
+ padding 0
+ list-style none