Offers a work-in-progress tool for creating fluid, responsive CSS styles, enhancing design adaptability across varying screen sizes and devices.
A Kotlin/JS CSS-in-JS library for generating and injecting CSS from Kotlin code in the browser.
Provides a type-safe DSL for defining CSS stylesheets, properties, selectors, and values entirely in Kotlin. Styles are processed with Stylis and injected into the DOM at runtime.
build.gradle.kts:
-blue.svg){kind=icon}
dependencies {
implementation("io.fluidsonic.css:fluid-css:0.13.0")
}object AppStyles : StyleSheet("app") {
val container by style {
display(Display.flex)
padding(16.px)
color(Color.darkGray)
hover {
color(Color.black)
}
}
}// Inject all styles into the DOM
AppStyles.inject()
// Use the generated class name on an element
element.className = AppStyles.containerThe library provides type-safe CSS value types with a zero-overhead abstraction over strings:
val size = 16.px
val gap = 1.5.em
val fullWidth = 100.percent
val mainColor = Color("#333")Apache 2.0
A Kotlin/JS CSS-in-JS library for generating and injecting CSS from Kotlin code in the browser.
Provides a type-safe DSL for defining CSS stylesheets, properties, selectors, and values entirely in Kotlin. Styles are processed with Stylis and injected into the DOM at runtime.
build.gradle.kts:
dependencies {
implementation("io.fluidsonic.css:fluid-css:0.13.0")
}object AppStyles : StyleSheet("app") {
val container by style {
display(Display.flex)
padding(16.px)
color(Color.darkGray)
hover {
color(Color.black)
}
}
}// Inject all styles into the DOM
AppStyles.inject()
// Use the generated class name on an element
element.className = AppStyles.containerThe library provides type-safe CSS value types with a zero-overhead abstraction over strings:
val size = 16.px
val gap = 1.5.em
val fullWidth = 100.percent
val mainColor = Color("#333")Apache 2.0