gradle/ wrapper | 3 years ago | ||
src | 2 years ago | ||
.gitignore | 3 years ago | ||
build.gradle.kts | 2 years ago | ||
gradle.properties.example | 2 years ago | ||
gradlew | 4 years ago | ||
gradlew.bat | 4 years ago | ||
readme.md | 2 years ago | ||
settings.gradle.kts | 3 years ago |
This library is for generating css from a kotlin dsl. It is meant to be used runtime to dynamically generate css.
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)) } } } }
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); }
As it's just kotlin code includes, 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; }
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%; }