Base Font sizes

The basic.less file includes styles for the html and body tags, setting up the base style for the global font-family and font-size. html's font size follows the value set by variable @base-font-size (default: 16px), and body font size is set to 1rem. The header tags (h1,h2...) defined in typography.less have font sizes set with rem units as well so it's important that you set an appropriate font size for your root html tag.

Important: border-box required

Petal bases all styles' sizings on the border-box CSS box model.

* {
    box-sizing: border-box;
}

The box-sizing property is declared for all elements (*) inside basic.less file, so it's important that you include this part of code by either importing basic.less or manually setting the property for Petal to ensure everything looks as intended.

Dark style variants

Many of the UI elements provided in Petal include additional 'dark' style variants with them. The dark variants add slight modifications to existing styles to make them better appear on darker backgrounds. For example, a button's border color will appear lighter instead of darker when on a dark background.

Click on the 'Toggle Light/Dark' button on the sidebar of this document anytime to see how UI elements look on dark backgrounds. The background color of the demo panels (where applicable) will be inverted for the demonstration.

If you are not planning to use dark styles in your project (if you only have bright backgrounds), you can turn it off by setting the @include-dark variable to false. When this is switched off, the relevant code will not be included in compiled code thus saving some file size.