introduction
customization
ConfigurationThemeColors
modules
elements
helpers
presets
packages
guides
Configuration

Siimple is based in a set of configuration rules written in JavaScript, where you can define your theme, mixins for core elements and additional styles.

This is an example of a configuration file for siimple:

siimple.config.js
import colors from "@siimple/colors";
import theme from "@siimple/preset-base";

export default {
    ...theme,
    useRootStyles: false,
    useBorderBox: true,
    prefix: "",
    colors: {
        primary: colors.blue["500"],
        secondary: colors.mint["600"],
        text: colors.gray["800"],
        background: "#fff",
        muted: colors.gray["200"],
    },
    fonts: {
        body: ["Roboto", "sans-serif"],
        heading: ["Montserrat", "sans-serif"],
        code: ["monospace"],
    },
};
Prefix

The prefix section allows you to customize the prefix that will be used for naming the elements of siimple. Using a prefix is useful to prevent naming collision with your custom classes or with other CSS libraries.

For example, you can use si- as prefix by setting the prefix section:

siimple.config.js
export default {
    prefix: "si-",
    // ...other configuration
}

Now every component class will have the configured prefix:

.si-button {
    /* ... */
}
.si-button.is-primary {
    /* ... */
}
.si-button.is-secondary {
    /* ... */
}
Breakpoints

You can customize the breakpoints used in siimple adding an object in the breakpoints section with your custom breakpoints. The keys in this object are the breakpoints names, and the value can be one of the following:

  • A string with the screen size in px, that will be set as the min-width value.
  • An object with the values for min-width and max-width. For example, {min: "0px", max: "600px"} will generate @media screen and (min-width: 0px) and (max-width: 600px).

This is the default breakpoints configuration:

siimple.config.js
export default {
    breakpoints: {
        mobile: {
            max: "600px",
        },
        tablet: {
            min: "600px",
        },
        desktop: {
            min: "1200px",
        },
    },
    // ...other configuration
};
Theme scales

You can configure the list of CSS properties specific for your project using the theme scales, that includes colors, fonts, sizes, and more!

siimple.config.js
import colors from "@siimple/colors";

export default {
    colors: {
        primary: colors.blue["500"],
        secondary: colors.mint["600"],
        text: colors.gray["800"],
        background: "#fff",
        muted: colors.gray["200"],
    },
    fonts: {
        body: ["Roboto", "sans-serif"],
        heading: ["Montserrat", "sans-serif"],
        code: ["monospace"],
    },
    // ...other configuration
};
Mixins

Mixins allows you to define groups of styles that can be re-used throughout your custom styles. Mixins can be also used to customize built-in elements.

siimple.config.js
export default {
    buttons: {
        default: {
            backgroundColor: "primary",
            color: "white",
            padding: "2rem",
        },
    },
    // ...other configuration
};
Configuration flags

Use the configuration flags to enable or disable some features of siimple:

  • useRootStyles: add root styles to the <html> element. Default is true.
  • useBorderBox: adds a global box-sizing: border-box. Default is true.

Flags are defined in the first level of the configuration object:

siimple.config.js
export default {
    useRootStyles: true,
    useBorderBox: true,
    // ...other configuration
};
Root styles

Add additional styles to the <html> element using the root section:

siimple.config.js
export default {
    root: {
        margin: "0px",
        padding: "0px",
    },
    // ...other configuration
};
Styles

You can include your styles on siimple using the styles section of the configuration. Styles in this section have access to values defined in the scales section, such as colors and fonts.

siimple.config.js
export default {
    styles: {
        "h1": {
            fontFamily: "heading",
            fontSize: "2.5rem",
        },
        ".my-button": {
            backgroundColor: "primary",
            display: "block",
            "&:hover": {
                backgroundColor: "secondary",
            },
        },
    },
    // ...other configuration
};

Styles defined in this section must follow the styles syntax specification.

Presets

Presets allows you to extend siimple with reusable styles, mixins and theme scales.

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

export default {
    ...base,
    // ...other configuration
};
Core modules (added in v4.1.0)

In the modules field of your configuration you can disable the core modules (elements, helpers, markup or reset) that you do not need for your project.

To disable only specific modules, provide an object in the modules field and set a false value to the modules that you do not need:

siimple.config.js
export default {
    modules: {
        button: false,
        badge: false,
        margin: false,
        reset: false,
    },
    // ...other configuration
};

To enable only specific modules, provide an array with the modules that you need for your project:

siimple.config.js
export default {
    modules: [
        "button",
        "padding",
    ],
    // ...other configuration
};

If you want to disable all modules, provide an empty array to the modules field:

siimple.config.js
export default {
    modules: [],
    // ...other configuration
};

This is the list of the available core modules of siimple:

Module nameDescription
alertThe .alert element.
badgeThe .badge element.
buttonThe .button element.
cardThe .card element.
checkboxThe .checkbox element.
closeThe .close element.
columnThe .column element.
containerThe .container element.
crumbThe .crumb element.
dividerThe .divider element.
dropdownThe dropdown element.
inputThe .input element.
labelThe .label element.
menuThe .menu element.
modalThe .modal element.
navlinkThe .navlink element.
paragraphThe .paragraph element.
progressThe .progress element.
radioThe .radio element.
scrimThe .scrim element.
selectThe .select element.
sliderThe .slider element.
spinnerThe .spinner element.
switchThe .switch element.
tableThe .table element.
textareaThe .textarea element.
titleThe .title element.
backgroundColorBackground color helpers.
textColor`Text colors helpers.
fontSizeFont size helpers.
fontWeightFont weight helpers.
lineHeightLine height helpers.
widthWidth helpers.
heightHeight helpers.
paddingPadding helpers.
paddingTopPadding top helpers.
paddingBottomPadding bottom helpers.
paddingLeftPadding left helpers.
paddingRightPadding right helpers.
marginUniform margin helpers.
marginTopMargin top helpers.
marginBottomMargin bottom helpers.
marginLeftMargin left helpers.
marginRightMargin right helpers.
flexFlex helpers.
flexDirectionFlex direction helpers.
flexGrowFlex grow helpers.
flexShrinkFlex shrink helpers.
flexWrapFlex wrap helpers.
alignContentAlign content helpers.
alignItemsAlign items helpers.
alignSelfAlign self helpers.
justifyContentJustify content helpers.
orderOrder helpers.
textAlignText align helpers.
verticalAlignVertical align helpers.
cursorAdditional cursor helpers (for example is-clickable).
displayDisplay helpers (for example is-flex or is-hidden).
floatFloat helpers (for example is-aligned-left).
overflowOverflow helpers (for example is-clipped).
positionPosition helpers (for example is-relative or is-absolute).
radiusBorder radius helpers (for example is-rounded or is-radiusless).
shadowShadow helpers (for example is-shadowed or is-shadowless).
opacityOpacity helpers (for example is-transparent or is-semitransparent).
textTransformText transform helpers (for example is-italic).
textSelectionText selection helpers (for example is-unselectable).
markupThe markup module, including headings, paragraphs, ...
resetThe reset module.
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.
Currently v4.2.0