lass-flexbox
2016-02-08
Flexbox for Lass.
Upstream URL
Author
Fernando Borretti <eudoxiahp@gmail.com>
Maintainer
Fernando Borretti <eudoxiahp@gmail.com>
License
MIT
lass-flexbox
Flexbox for Lass. Ported from this library by Brian Franco.
Overview
Lass is a library for generating CSS from a Lisp-based DSL.
Flexbox is a layout mode that greatly simplifies the task of arranging things in CSS.
The problem is it's not portable without vendor prefixes because it's experimental.
"But that's fine", you say, foolishly. "I'll just add a couple of webkits and mozzes". Oh, gentle reader, what I would give to relive those days of innonence and wild abandon.
This is the portable version of display:flex
and flex-direction: row
:
display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
See what I mean?
Usage
Just load the library.
Example
This:
(.fun :flexbox :flex-direction "row" :justify-content "space-around" :align-items "center")
Gets compiled to this:
.fun { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; -webkit-justify-content: space-around; -moz-justify-content: space-around; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }
License
Copyright (c) 2016 Fernando Borretti
Licensed under the MIT License.