introduction
customization
ConfigurationThemeColorsIconsElementsHelpers
elements
helpers
packages
guides
recipes
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-theme";
import elements from "@siimple/preset-elements";

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"],
    },
    styles: {
        ...elements.styles,
    },
};
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",
        },
        fullhd: {
            min: "1800px",
        },
    },
    // ...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 elements from "@siimple/preset-elements";
import helpers from "@siimple/preset-helpers";

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

We provide a collection of core presets. Check out the packages section to learn more.

Designed, built and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.