Theming

Themes offer a great new way to customize individual Formstone components. The structure and style concerns are now split into different files, allowing developers to easily develop new themes. Formstone includes a flat, Material-inspired theme, fs-light, to give developers a jump start on styling each component.

Including Themes

Theme styles will need to be included for a theme to render properly. Themes should be included after any base component styles:

<link href="/components/formstone/dist/css/component.css" rel="stylesheet">
<link href="/components/formstone/dist/css/themes/fs-light.css" rel="stylesheet">

Defining Themes

Themes are styles that are applied via a class name. Simply pass the target class name as the theme parameter when initializing a plugin:

$(".js-carousel").carousel({
    theme: "large_carousel"
});

The theme class name is applied to the target component, providing a way to write specific styles based on the existing component structure:

.large_carousel .fs-carousel-item {
    ...
}

.large_carousel .fs-carousel-controls {
    ...
}

...

Multiple themes can be applied at once by combining theme class names (separated by a single space). This allows developers to mix and match different theme styles depending on the use case:

$(".js-carousel").carousel({
    theme: "full_carousel large_carousel_controls small_carousel_pagination"
});