add stylus-helpers.styl

diff --git a/stylus-helpers.styl b/stylus-helpers.styl
new file mode 100644 (file)
index 0000000..06ecac7
--- /dev/null
+++ b/stylus-helpers.styl
@@ -0,0 +1,155 @@
+// 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