css-properties.md

Type safe CSS Properties

Every KVision component has a full range of properties based on CSS specification. Most of them are 100% type-safe - based on enumeration values, dedicated classes and functions. You can of course use custom CSS stylesheets and assign predefined classes to your components (as explained in the Theming chapter), but KVision gives you a choice. With CSS properties you can style any component's size, position, margins, paddings, borders, colors, backgrounds, text and fonts with pure Kotlin code.

Most of the CSS properties are defined in the io.kvision.core.StyledComponent class.

An example of setting CSS properties for a DIV element.

div("A label with custom CSS styling") {
    margin = 10.px
    padding = 20.px
    fontFamily = "Times New Roman"
    fontSize = 32.px
    fontStyle = FontStyle.OBLIQUE
    fontWeight = FontWeight.BOLDER
    fontVariant = FontVariant.SMALLCAPS
    textDecoration = TextDecoration(TextDecorationLine.UNDERLINE, TextDecorationStyle.DOTTED, Color.name(Col.RED))
}

CSS units

KVision supports all CSS units as an extension properties on Number type. So you can specify dimensions, sizes, position and thickness with such example notations: 50.px, 12.pt, 2.em, 90.perc, 100.vh, 1.49.em etc.

Colors

There are two ways to specify colors. You can use hexadecimal Int literals or predefined color names with two extension functions for the Color class. To specify the "color" property, you can also use convenient setters: colorHex and colorName.

div {
    color = Color.hex(0x0000ff)
    color = Color.name(Col.BLUE)
    colorHex = 0x0000ff
    colorName = Col.BLUE
}

CSS helper classes

To specify borders, backgrounds, text decorations and text shadows you use the dedicated classes.

div {
    border = Border(1.px, BorderStyle.SOLID, Color.name(Col.BLACK))
    background = Background(
        0xcccccc, require("img/kotlin.png"), 50.perc, 50.perc, size = BgSize.CONTAIN,
        repeat = BgRepeat.NOREPEAT, attachment = BgAttach.FIXED)
    textDecoration = TextDecoration(TextDecorationLine.UNDERLINE, 
        TextDecorationStyle.DOTTED, Color.name(Col.RED))
    textShadow = TextShadow(2.px, 2.px, blurRadius = 1.px, color = Color.name(Col.BLACK))
}

Style objects

When the CSS properties are set directly on the component, the corresponding style attributes are inlined in the generated HTML code. Sometimes it's better to define a CSS class, which can be reused by other components. In KVision you can do this using the Style class. By instantiating the Style object you create a CSS class definition. This definition can be assigned to any component with the addCssStyle method.

val myStyle = Style {
    border = Border(1.px, BorderStyle.SOLID, Color.name(Col.GRAY))
    width = 200.px
    height = 200.px
    margin = 10.px
}
div {
    addCssStyle(myStyle)
}
div {
    addCssStyle(myStyle)
}

By default the class name is generated by KVision, but you can use your own with the Style class constructor parameter.

val myStyle = Style(".rectangle") {
    width = 200.px
    height = 100.px
}

Style objects can be nested to create CSS subclasses.

val boxStyle = Style {
    border = Border(1.px, BorderStyle.SOLID, Color.name(Col.GRAY))
    width = 200.px
    height = 200.px

    style("h1") {
        colorName = Col.BLUE
    }
}

div {
    addCssStyle(boxStyle)
    h1 {
        +"Header"
    }
}

Global Styles

You can declare global styles as a val on any class that is referenced by your application; for example:

    val bodyStyle = style("body") {
        margin = 0.px
        padding = 0.px
        background = Background(color = Color.hex(APP_BACKGROUND))
        fontFamily = "Lato"
        overflow = Overflow.HIDDEN
    }

If you prefer, you can keep these isolated in their own file:

class App {
    val styles = GlobalStyles
}

// own file
object GlobalStyles {

    val bodyStyle = style("body") {
        // ...
    }
}

{% hint style="info" %} Note: Style objects are currently not designed to work with multiple Root containers. {% endhint %}

Pseudo Class Support

The Style class as a pClass property which will set the style pseudoclass.

For example:

    div {    
        addCssStyle(style(pClass = HOVER) {
            color = Color.name(YELLOWGREEN)
        })
    }