fluid-css
0.14.0indexedOffers a work-in-progress tool for creating fluid, responsive CSS styles, enhancing design adaptability across varying screen sizes and devices.
2
Stars
—
Used by
dependents
—
Health
/ 100
fluid-css
-blue.svg)
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.
Installation
build.gradle.kts:
dependencies {
implementation("io.fluidsonic.css:fluid-css:0.13.0")
}
Usage
Define a stylesheet
object AppStyles : StyleSheet("app") {
val container by style {
display(Display.flex)
padding(16.px)
color(Color.darkGray)
hover {
color(Color.black)
}
}
}
Inject styles and use class names
// Inject all styles into the DOM
AppStyles.inject()
// Use the generated class name on an element
element.className = AppStyles.container
CSS value DSL
The 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")
License
Apache 2.0