introduction
customization
ConfigurationThemeColorsIconsElementsHelpers
elements
helpers
packages
guides
recipes
Elements

We provide a collection of built-in UI elements that you can customize and reuse across your projects, that includes buttons, alerts, navigation links, and more!

Adding elements

The elements package is included when you install the siimple package framework, so you can just import elements styles in your siimple.config.js file:

siimple.config.js
import elements from "@siimple/preset-elements";

export default {
    styles: {
        ...elements.styles,
        // ...other styles
    },
    // ...other configuration
};
Usage

Just apply the element classname to the HTML tag that you want to style:

<button class="button">Submit</button>

Some elements will provide additional modifiers that you can use to change the default style of the element:

<button class="button is-secondary is-full">
    Full width button
</button>
Customize elements

Mixins can be used to customize and change the look and feel of elements. Each element will look for a specific mixin in your theme configuration.

siimple.config.js
export default {
    text: {
        // The title element will use this mixin to extend the default styles
        heading: {
            color: "black",
            lineHeight: "1.25",
        },
    },
};

There is the list of elements and the mixin path that can be used to customize the styles of the element:

ElementMixin path
alertalerts or alerts.default if more mixins are added to the alerts group.
badgebadges or badges.default if more mixins are added to the badges group.
buttonbuttons or buttons.default if more mixins are added to the buttons group.
cardcards or cards.default of more mixins are added to the cards group.
checkboxforms.checkbox
closebuttons.close
columncolumns
containerlayout.container
crumblinks.crumb
dividerstyles.hr
inputforms.input
labelforms.label
menubuttons.menu
modaldialogs.modal
navlinklinks.nav
paragraphtext.paragraph
progressstyles.progress
radioforms.radio
scrimdialogs.scrim
selectforms.select
sliderforms.slider
spinnerspinners
switchforms.switch
tablestyles.table
textareaforms.textarea
titletext.heading

Note that some elements will reuse the styles that you define in the styles section of your theme, for example the progress or the table elements.

Mixins can be used also to create additional modifiers for the element. For example, the following mixin:

siimple.config.js
export default {
    buttons: {
        default: {
            "&.is-outlined": {
                backgroundColor: "transparent",
                borderColor: "primary",
                borderStyle: "solid",
                borderWidth: "0.125rem",
                color: "primary",
            },
        },
    },
};

Will generate the following CSS:

.button { /* default styles */ }
.button.is-outlined {
    background-color: transparent;
    border: 0.125rem solid #1c76fd;
    color: #1c76fd;
}
Designed, built and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.