You can use leaf.css in your project by including the minified
version in your head section.
<link rel="stylesheet" href="leaf.min.css">
By default, leaf uses the Noto Sans TC font, which is free and can be added to your project
through Google fonts.
It also works pretty well with most fonts around, just don't forget to adjust the font
weight variables based on your needs ($font-weight-normal and $font-weight-bold).
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500&display=swap">
You can either add as many auto-adjustable columns as you want, using the col class inside a row element or specify the width of each column (in a 12 column layout) using the class
names that can be seen below.
There is also the possibility to specify the column width for predefined
breakpoints,
using three different modifiers, desk, tab and
mob.
For example, if you want a 6/12 width column just for mobile, you could
use col-mob-6.
Auto-adjustable Columns
12 Columns Layout
Add the btn class or use the button element, along with the class names listed below.
You can go with the classic button styles
change their sizes
or make buttons a little bit more playful by adding some color
You can turn any form element into a full-width one, using the class is-fullwidth.
You can also make labels bold or inline, using is-bold and is-inline respectively.
Tables are automatically adjusted, depending on the screen size.
| Pokemon | Type | Species |
|---|---|---|
| Rayquaza | Dragon | Sky High |
| Groudon | Ground | Continent |
| Kyogre | Water | Sea Basin |