CSS & Style

Kweb can integrate easily with most CSS frameworks, particularly those that don't have a heavy reliance on JavaScript. Injecting custom CSS files is also supported by using the CSSPlugin.

• CSS Frameworks
  • Fomantic UI
    • Getting started
    • Example and Demo
  • Other UI Frameworks
• Custom CSS files

CSS Frameworks

Fomantic UI

Kweb has out-of-the-box support for the excellent Fomantic UI framework, which helps create beautiful, responsive layouts using human-friendly HTML.

Getting started

First tell Kweb to use the Fomantic UI plugin:

import kweb.*
import kweb.plugins.fomanticUI.*
import kweb.plugins.javascript.JavascriptPlugin

fun main() {
    Kweb(port = 16097, plugins = listOf(fomanticUIPlugin)) {
        // ...
    }
}

Now the plugin will add the Fomantic CSS and JavaScript code to your website automatically.

Let's look at one of the simple examples from the Fomantic UI documentation:

<div class="ui icon input">
  <input type="text" placeholder="Search...">
  <i class="search icon"></i>
</div>

This translates to the Kotlin:

Kweb(port = 16097, plugins = listOf(fomanticUIPlugin)) {
    doc.body {
        div(fomantic.ui.icon.input) {
            input(type = InputType.text, placeholder = "Search...")
            i(fomantic.search.icon)
        }
    }
}

Take a look at the Fomantic UI documentation to see everything else it can do.

Example and Demo

• freenet.org A Kweb website built on Google Cloud Platform with Fomantic styling.

Other UI Frameworks

Kweb is known to work well with a number of other CSS frameworks, including:

• Bulma

Custom CSS files

The CSSPlugin can be used to conveniently add multiple CSS files to your website, just add it to your resources folder as follows:

├── src
│  └─── main
│      └─── resources
│          └─── css
│              └── test.css

Next add the plugin via the plugins constructor parameter.

Kweb(port = 16097, plugins = listOf(CSSPlugin("css", "test.css"))) {
    // ...
}

Specify the relative path to the folder inside src/main/resources and the files to include (either a single file name or a list of file names).

The files will be served under /kweb_static/css and linked from the websites HTML head tag, for example:

<link rel="stylesheet" type="text/css" href="/kweb_static/css/test.css">