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.

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:

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

export default {
    useRootStyles: false,
    useBorderBox: true,
    prefix: "",
    ...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).

You can integrate siimple in your PostCSS build process using our plugin for 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):

const autoprefixer = require("autoprefixer");
const siimple = require("siimple/postcss.cjs");

module.exports = {
    plugins: [
        siimple("./siimple.config.mjs"),
        autoprefixer(),
        // other plugins
    ],
};

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

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" />