Theming | siimple css

Theming

Font and colors that siimple uses

Font

siimple uses Roboto as the default font family, imported automatically from Google Fonts. If you want to use your own font, you can set that in your body tag. Here is an example:

body {
    font-family: Verdana, Arial, 'sans-serif';
}

All the elements on your page will inherit this font-family and will overwrite the Roboto font set by default by siimple.

Colors

All colors in siimple are available as a SASS variables and a SASS map in scss/_variables.scss.

primary

success

warning

error

dark

light

You can these colors in your SASS styles using directly the SASS variable. You can also use our function siimple-default-color defined in scss/_functions.scss to import the color from the SASS map:

//Import colors
@import "siimple/scss/_variables.scss";
@import "siimple/scss/_functions.scss";

//Using the color variable
.button {
    background-color: $siimple-default-primary;
}

//Using the function
.button {
    background-color: siimple-default-color("success");
}

Legacy colors

The colors API defined in the latest version of siimple are still supported, but keep in mind that will be removed in a future major relase. Consider upgrading to the new colors API defined in v3.1.0.

navy

green

teal

blue

purple

pink

red

orange

yellow

grey

Found a mistake or want to help improve this documentation? Suggest changes.