Configuration · siimple CSS

introduction

customization

Configuration Theme Colors

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 name	Description
`alert`	The `.alert` element.
`badge`	The `.badge` element.
`button`	The `.button` element.
`card`	The `.card` element.
`checkbox`	The `.checkbox` element.
`close`	The `.close` element.
`column`	The `.column` element.
`container`	The `.container` element.
`crumb`	The `.crumb` element.
`divider`	The `.divider` element.
`dropdown`	The `dropdown` element.
`input`	The `.input` element.
`label`	The `.label` element.
`menu`	The `.menu` element.
`modal`	The `.modal` element.
`navlink`	The `.navlink` element.
`paragraph`	The `.paragraph` element.
`progress`	The `.progress` element.
`radio`	The `.radio` element.
`scrim`	The `.scrim` element.
`select`	The `.select` element.
`slider`	The `.slider` element.
`spinner`	The `.spinner` element.
`switch`	The `.switch` element.
`table`	The `.table` element.
`textarea`	The `.textarea` element.
`title`	The `.title` element.
`backgroundColor`	Background color helpers.
`textColor`	`Text colors helpers.
`fontSize`	Font size helpers.
`fontWeight`	Font weight helpers.
`lineHeight`	Line height helpers.
`width`	Width helpers.
`height`	Height helpers.
`padding`	Padding helpers.
`paddingTop`	Padding top helpers.
`paddingBottom`	Padding bottom helpers.
`paddingLeft`	Padding left helpers.
`paddingRight`	Padding right helpers.
`margin`	Uniform margin helpers.
`marginTop`	Margin top helpers.
`marginBottom`	Margin bottom helpers.
`marginLeft`	Margin left helpers.
`marginRight`	Margin right helpers.
`flex`	Flex helpers.
`flexDirection`	Flex direction helpers.
`flexGrow`	Flex grow helpers.
`flexShrink`	Flex shrink helpers.
`flexWrap`	Flex wrap helpers.
`alignContent`	Align content helpers.
`alignItems`	Align items helpers.
`alignSelf`	Align self helpers.
`justifyContent`	Justify content helpers.
`order`	Order helpers.
`textAlign`	Text align helpers.
`verticalAlign`	Vertical align helpers.
`cursor`	Additional cursor helpers (for example `is-clickable`).
`display`	Display helpers (for example `is-flex` or `is-hidden`).
`float`	Float helpers (for example `is-aligned-left`).
`overflow`	Overflow helpers (for example `is-clipped`).
`position`	Position helpers (for example `is-relative` or `is-absolute`).
`radius`	Border radius helpers (for example `is-rounded` or `is-radiusless`).
`shadow`	Shadow helpers (for example `is-shadowed` or `is-shadowless`).
`opacity`	Opacity helpers (for example `is-transparent` or `is-semitransparent`).
`textTransform`	Text transform helpers (for example `is-italic`).
`textSelection`	Text selection helpers (for example `is-unselectable`).
`markup`	The markup module, including headings, paragraphs, …
`reset`	The reset module.

Responsive

Theme

Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.1

Repository

Issues

Releases