search

Theming

By default KVision includes the standard Bootstraparrow-up-right (version 3) look and feel. It's modern, elegant and proven in many production environments. But there are other possibilities as well.

hashtag
Adding a custom CSS file to your application

You can add a custom CSS file to define your own CSS classes, which can be used throughout your code (almost every component supports the classes: Set<String> constructor parameter and the addCssClass(css: String) and removeCssClass(css: String) methods). Of course you can also overwrite and change the standard Bootstrap classes.

You can add as many CSS files as you wish. Just save your *.css files in src/main/resources/css directory and require them in your main App object.

App.kt
object App : ApplicationBase {
    override fun start(state: Map<String, Any>) {
    // ...
    }
    override fun dispose(): Map<String, Any> {
    // ...
    }

    val css1 = require("css/kvapp.css")
    val css2 = require("css/other.css")
}

hashtag
Replacing Bootstrap CSS with a custom one

When you include a file called bootstrap.min.css (from any local or remote location) in the main index.html of your application, KVision will automatically disable standard Bootstrap CSS. This way you can replace the original stylesheet with anything you wish.

You can create such a file manually or use Customize Bootstraparrow-up-right online tool offered by Bootstrap's website. To include a local version of bootstrap, simply place bootstrap.min.css in the src/main/web/css directory.

hashtag
Using free themes from Bootswatcharrow-up-right

There are some great free themes ready to use available at Bootswatch CDNarrow-up-right. For instance to use Paper (material-like) theme make the following change to your index.html.

circle-info

Note: Use Bootswatcharrow-up-right themes for Bootstrap version 3.

hashtag
Using KVision without Bootstrap

KVision can also be used with no Bootstrap at all. But you will not be able to use all parts of the framework is such configuration. Some components will not work correctly or will not work at all (especially Modals, Dropdowns, Windows, Date picker, Spinner, TabPanel and other components dependent on Bootstrap's JavaScript and it also disables support for Font Awesome icons). But you can still create a fully functional application (see TodoMVC examplearrow-up-right).

To disable Bootstrap completely just remove the kvision-bootstrap dependency from the build.gradle.kts file. As a result no Bootstrap CSS and no Bootstrap JavaScript will be included in the resulting application.

PreviousHot Module ReplacementNextRoot container

Last updated