X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=stylus_helpers.styl;fp=stylus_helpers.styl;h=4a351fa856315236415e5c431bd1779bc9160f4f;hb=7a534068e00c59bb72be40399845099982a72064;hp=0000000000000000000000000000000000000000;hpb=22989a9ee35a199c5ef75ace19244761ea8c5af6;p=wfpl.git diff --git a/stylus_helpers.styl b/stylus_helpers.styl new file mode 100644 index 0000000..4a351fa --- /dev/null +++ b/stylus_helpers.styl @@ -0,0 +1,210 @@ +// 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 'inc/wfpl/stylus-helpers.styl' + + +// set units to px if it doesn't have a unit already +_px(i) + unit(i) == '' ? unit(i, px) : i + +// transparently support vender-specific tags +border-radius() + -webkit-border-radius: arguments + border-radius: arguments +box-shadow() + -webkit-box-shadow: arguments + box-shadow: arguments +box-sizing() + -webkit-box-sizing: arguments + -moz-box-sizing: arguments + box-sizing: arguments +user-select() + -webkit-user-select: arguments + -moz-user-select: arguments + -ms-user-select: arguments + user-select: arguments + +// map "whitespace:" to "white-space:" +whitespace() + white-space: arguments + +// 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) + +// Specify width and height on the same line +dimensions(w, h) + width: _px(w) + height: _px(h) + +// 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: +// +// styl: +// nav li +// sprite_rollover "images/nav.png" 150 35 2 +sprites_rollover(image, width, height, count, v_offset = 0, h_offset = 0) + width: unit(width, px) + height: unit(height, px) + background-image: url(image) + background-position: top left + background-repeat: no-repeat; + for n in (0...count) + &.n{n} + y = - (@height * n) - unit(v_offset, px) + background-position: (0 - unit(h_offset, px)) y + &:hover + background-position: (0 - unit(h_offset, px) - @width) y +sprite_rollover(image, width, height, v_offset = 0, h_offset = 0) + sprites_rollover(image, width, height, 1, v_offset, h_offset) + +// see sprites_rollover +sprites(image, height, count, v_offset = 0, h_offset = 0) + height: unit(height, px) + background-image: url(image) + background-position: top left + background-repeat: no-repeat; + for n in (0...count) + &.n{n} + y = - (@height * n) - unit(v_offset, px) + background-position: (0 - unit(h_offset, px)) y +sprite(image, height, v_offset = 0, h_offset = 0) + sprites(image, height, 1, v_offset, h_offset) + +// 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: