Fixes

readme.md

@@ -0,0 +1,122 @@
+# Css generator like less/sass in kotlin multiplatform
+
+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:
+
+## Nesting / colors / variables
+
+```kotlin
+    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:
+
+```css
+.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);
+}
+```
+
+## Mixins
+
+As it's just kotlin code includes, mixins etc. are just functions calls.
+
+```kotlin
+   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:
+
+```css
+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;
+}
+```
+
+# Measurements
+
+Sizes and widths are given in measurements, there are extension variables to help with these:
+
+```kotlin
+  select("body") {
+    fontSize(1.2.em)
+    borderWidth(3.px)
+    width(75.prc)
+  }
+```
+
+Result:
+
+```css
+body {
+  font-size:                    1.2em;
+  border-width:                 3px;
+  width:                        75%;
+}
+```