Theming
By default KVision includes the standard Bootstrap look and feel. It's modern, elegant and proven in many production environments. Just include
kvision-bootstrap module in your build.gradle.kts file. But there are other possibilities as well. 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
className: 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
class App : Application() {
init {
require("css/kvapp.css")
require("css/other.css")
}
override fun start() {
// ...
}
}
You can remove
BootstrapCssModule initializer from your application and include different CSS file in the main index.html of your application. It can be loaded from any local or remote source.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KVision App</title>
<link rel="stylesheet" href="css/mybootstrap.min.css" >
<script type="text/javascript" src="main.bundle.js"></script>
</head>
<body>
<div id="kvapp"></div>
</body>
</html>
You can create such a file manually or build your own Bootstrap version from sources. To include a local version of Bootstrap, simply place
mybootstrap.min.css in the src/main/web/css directory.There are some great free themes ready to use available at JSDelivr. For instance to use Materia (material-like) theme make the following change to your
index.html.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KVision Address Book</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/materia/bootstrap.min.css" integrity="sha256-T8h7oW5tHp4MhFhmRoDI8xjnB2ld89qSgc3s9g8T0uU=" crossorigin="anonymous">
<script type="text/javascript" src="main.bundle.js"></script>
</head>
<body>
<div id="kvapp"></div>
</body>
</html>
KVision can also be used with no Bootstrap at all. Just exclude all *bootstrap* modules from your
build.gradle.kts file. You won't be able to use components from these modules, which depend on Bootstrap's JavaScript and styling. But you can use any other CSS framework (see examples for Fomantic UI and Patternfly). Last modified 3mo ago