Using third party CSS

There is this frequently asked question:

How can I use it with a CSS library like bootstrap with Mint?

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 which will be loaded in the head of the compiled HTML, for now it will only contain the link to the stylesheet from the CDN:

assets/head.html
<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">

Next you will need to modify the mint.json file so the file we just created:

mint.json
{
"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:

source/Main.mint
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>
}
}