@import 'nib'; /* This helper function simplifies some of the flexbox terminology. There are some layouts too advanced for this, but in the majority of times this saves a lot of typing. It's written with left, center, right always referring to the horizontal axis, and top, middle, bottom always referring to the vertical axis. Examples // align items horizontally, top left #thing layout horizontal top left // align items vertically on the right edge, vertically centered (middle) .things layout vertical right middle // align items horizontally on the bottom-left edge #foo layout horizontal bottom left #bar layout vertical nowrap bottom center !IMPORTANT! You need to add `apply_layout_cache()` to the end of your main stylus file. Example: main.styl: ``` @import nib @import layout @import stuff @import modules apply_layout_cache() ``` !IMPORTANT! 'reverse' is not supported because it would make the function overly-complex and probably not be what you're expecting. It's also rare to have a need for RTL layouts, so I excluded support that. If needed, drop-back down to individual property:keys. */ _layout() a = split(' ', arguments) if 'wrap-reverse' in a flex-wrap wrap-reverse if 'nowrap' in a flex-wrap nowrap else flex-wrap wrap if 'horizontal' in a flex-direction row // alignment horizontal axis if 'left' in a justify-content flex-start unless 'around' in a or 'between' in a if 'right' in a justify-content flex-end unless 'around' in a or 'between' in a if 'center' in a justify-content center unless 'around' in a or 'between' in a if 'around' in a justify-content space-around if 'between' in a justify-content space-between // this s a nice default to have align-content center unless 'around' in a or 'between' in a //alignment vertical axis if 'top' in a align-content flex-start align-items flex-start else if 'bottom' in a align-content flex-end align-items flex-end else if 'middle' in a if 'tight' in a align-content center align-items center else if 'stretch' in a align-content stretch if 'vertical' in a flex-direction column //alignment horizontal axis if 'left' in a align-items flex-start unless 'loose' in a align-content flex-start unless 'around' in a or 'between' in a if 'right' in a align-items flex-end unless 'loose' in a align-content flex-end unless 'around' in a or 'between' in a if 'center' in a align-items center unless 'loose' in a align-content center unless 'around' in a or 'between' in a //alignment vertical axis if 'top' in a justify-content flex-start if 'bottom' in a justify-content flex-end if 'middle' in a justify-content center if 'around' in a align-content space-around justify-content space-around if 'between' in a align-content space-between justify-content space-between if 'stretch' in a justify-content stretch $layout_cache = {} layout() a = join(' ',arguments) unless $layout_cache[a] $layout_cache[a] = () push($layout_cache[a], selector()) apply_layout_cache() common = '' for $layout, $selectors in $layout_cache sels = join(',', $selectors) common += sels + ', ' {sels} _layout $layout {common} display flex /** * Attributes for common layouts to save kb * TODO use partial selectors to save even more space? */ [layout-horizontal] layout horizontal [layout-vertical] layout vertical [layout-horizontal-middle] // center align on x, middle align y layout horizontal middle [layout-horizontal-right] // right align x layout horizontal right [layout-horizontal-right-middle] // right align x, middle align-y layout horizontal right middle [layout-vertical-middle] layout vertical middle [layout-vertical-middle-center] layout vertical middle center // example styles #example-1 layout vertical left middle #example-2 layout vertical center around #example-3 layout horizontal center b width 50px #example-4 layout horizontal top center between b width 50px #example-5 layout horizontal middle center #example-6 layout vertical center b flex 1 1 50px #example-7 layout vertical center loose b flex 1 1 50px #example-8 layout vertical between b flex 1 1 50px #example-9 layout vertical center b flex 1 1 100px &:nth-child(3) flex 1 1 500px body layout horizontal div[id] width 400px height 400px border 1px dotted #ccc padding 5px margin 30px 10px 10px 10px flex 0 0 400px position relative span position absolute top -1.25em left 0 color #555 font-size 18px b width 25px height 25px display block margin 5px flex 0 0 auto for n in (0...12) b:nth-child({n}) background spin(#9db7fb, n*36) apply_layout_cache()

!