Getting started

siimple is published in npm, so you can add it to your project running the following command:

$ npm install siimple --save

Be sure that you have npm installed in your computer. Get more information about installing npm here.

Alternatively, you can install siimple using yarn instead of npm running the following command:

$ yarn add siimple --save

You can get more information about installing yarn here.

CLI usage

Note: you will need Node.js version 14 or higher installed in your computer.

You can use the siimple CLI tool to generate your customized version of siimple. First just create your configuration file siimple.config.js in the root of your project:

siimple.config.js

import colors from "@siimple/colors";
import base from "@siimple/preset-base";

export default {
    useRootStyles: true,
    useBorderBox: true,
    prefix: "",
    ...base,
    colors: {
        ...base.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",
    },
};

You can learn more about the configuration file for siimple in the configuration section.

After creating your configuration file, just run the siimple CLI tool to generate your CSS:

$ npx siimple -c ./siimple.config.js -o ./output.css

This will generate a file called output.css with the compiled styles of siimple.

Note: siimple uses ECMAScript modules, so you will need to set "type": "module" in your package.json file or use .mjs as the extension for your configuration file (siimple.config.mjs).

PostCSS usage

You can integrate siimple in your PostCSS build process using our plugin for PostCSS in @siimple/postcss. In your postcss.config.js, include the plugin of siimple for PostCSS with the path to your siimple.config.js (or siimple.config.mjs):

postcss.config.js

import autoprefixer from "autoprefixer";
import siimple from "@siimple/postcss";

export default {
    plugins: [
        siimple("./siimple.config.js"),
        autoprefixer(),
        // other plugins
    ],
};

This will inject the siimple compiled styles with the configuration path provided as an argument to the plugin.

Note: the plugin siimple/postcss.cjs introduced in v4.2.0 is deprecated and will be removed in a future major release. Please migrate as soon as possible to the new @siimple/postcss plugin instead.

Use the hosted CSS version

You can use our hosted CSS version in JsDelivr and include siimple without installing any module. Note that:

You can not customize the default theme.
You can not customize the default modules (elements, helpers, ...).
You can not provide your custom styles.
You can not use third-party presets.

Check all available hosted versions in the jsDelivr website, or copy and paste the following <link> element in your HTML file for adding the latest version:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple/siimple.css" />

You can also use unpkg for including the latest version in your HTML file:

<link rel="stylesheet" href="https://unpkg.com/siimple/siimple.css" />

Standalone (experimental)

Note: this is still in experimental mode and API may change at any moment. Please do not use it in production.

You can use the @siimple/standalone package to build your siimple configuration directly in the browser.

The simplest way to include @siimple/standalone in a browser without any other setup is to use esm.sh CDN:

<script type="module" src="https://esm.sh/@siimple/standalone"></script>

You can alternatively add it in your project using npm or yarn:

$ npm install --save @siimple/standalone

After loading the @siimple/standalone package in the browser, it will automatically compile the configuration provided in a <script> tag with the type="text/siimple" attribute and include the output CSS in a <style> tag.

<!-- Load @siimple/standalone -->
<script src="https://esm.sh/@siimple/standalone"></script>

<!-- Your custom configuration there -->
<script type="text/siimple">
    export default {
        // ...your configuration
    };
</script>

You can provide your configuration as an external script:

<script type="text/siimple" src="theme.js"></script>