Using third party CSS
There is this frequently asked question:
In this page I will guide you through it.
Adding the library
In this example we will be adding Bootstrap to a Mint application.
First you need to create an HTML file
assets/head.html
which will be loaded in the
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<!-- Any other <link> or <style> elements can go here. -->
Next you will need to modify the
mint.json
file to add the file we just created:
{
"name": "mint-bootstrap-example",
"source-directories": [
"source"
],
"application": {
"head": "assets/head.html"
}
}
If you start the development server and load the application the CSS for Bootstrap will be loaded.
Using the library
Now you can use the library as you normally would, by adding the
class
attribute on HTML elements:
component Main {
style base {
background: #f5f5f5;
text-align: center;
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
fun render : Html {
<div::base>
<form class="form-signin">
<img
src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg"
class="mb-4"
height="72"
width="72"
alt=""/>
<h1 class="h3 mb-3 font-weight-normal">
"Please sign in"
</h1>
<label
for="inputEmail"
class="sr-only">
"Email address"
</label>
<input
placeholder="Email address"
class="form-control mb-3"
id="inputEmail"
type="email"
autofocus=""
required=""/>
<label
for="inputPassword"
class="sr-only">
"Password"
</label>
<input
class="form-control mb-3"
placeholder="Password"
id="inputPassword"
type="password"
required=""/>
<div class="checkbox mb-3">
<label>
<input
value="remember-me"
type="checkbox"/>
" Remember me"
</label>
</div>
<button
class="btn btn-lg btn-primary btn-block"
type="submit">
"Sign in"
</button>
<p class="mt-5 mb-3 text-muted">
"© 2017-2019"
</p>
</form>
</div>
}
}