This library is for generating css from a kotlin dsl. It can be used as an alternative to less/sass or as a runtime library to generate css on-the-fly.
Tools like less and sass are often used as a build step and take some time. This library is meant to be fast enough to generate the css on the fly either from the server or directly in the browser.
Examples:
val color = hsla(0, 50, 50, 1.0) val backgroundColor = Color.white val css = style { select(cls("button")) { padding(5.px) select("a") { color(color) backgroundColor(backgroundColor) hover { color(color.lighten(10)) backgroundColor(backgroundColor.darken(10)) } } } }
To generate the css call get generateCss function:
val cssString: String = css.generateCss()
Result:
.button { padding: 5px; } .button a { color: hsla(0, 50%, 50%, 1.0); background-color: white; } .button a:hover { color: hsla(0, 50%, 55%, 1.0); background-color: rgba(229, 229, 229, 1.0); }
There are several options when generating the css, for example minified:
val cssString: String = css.generateCss(minified = true)
Result:
.button{padding:5px;}.buttona{color:hsla(0,50%,50%,1.0);background-color:white;}.buttona:hover{color:hsla(0,50%,55%,1.0);background-color:rgba(229,229,229,1.0);}
As it's all just kotlin code, includes and mixins etc. are just functions calls.
fun Style.borderStyles(borderWidth: Measurement = 2.px) { borderWidth(borderWidth) borderColor(Color.aquamarine) borderStyle(BorderStyle.solid) } val css = style { select(txt("a"), cls("button")) { borderStyles() color(Color.white) } select(cls("btn-primary")) { borderStyles(3.px) color(Color.blue) } }
Result:
a { border-width: 2px; border-color: aquamarine; border-style: solid; color: white; } .button { border-width: 2px; border-color: aquamarine; border-style: solid; color: white; } .btn-primary { border-width: 3px; border-color: aquamarine; border-style: solid; color: blue; }
Giving the option combineEqualBlocks to the generateCss call will combine the a and .button blocks with the following result:
a, .button { border-width: 2px; border-color: aquamarine; border-style: solid; color: white; } .btn-primary { border-width: 3px; border-color: aquamarine; border-style: solid; color: blue; }
Sizes and widths are given in measurements, there are extension variables to help with these:
select("body") { fontSize(1.2.em) borderWidth(3.px) width(75.prc) }
Result:
body { font-size: 1.2em; border-width: 3px; width: 75%; }