A minimal and themeable css toolkit.

Siimple is an open source css toolkit that provides a responsive and minimalistic starting point for your next amazing website or application.

Getting started

View on GitHub

Fully customizable. Really.

Customize and extend siimple using your configuration from your project, including colors, fonts, sizes, shadows and more!

Learn more

siimple.config.js

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

export default {
    ...base,
    colors: {
        ...base.colors,
        primary: colors.royal["500"],
        secondary: colors.mint["500"],
        text: colors.royal["800"],
        background: colors.royal["100"],
        muted: colors.royal["200"],
    },
    fonts: {
        ...base.fonts,
        heading: ["Nunito", "sans-serif"],
        code: ["monospace"],
    },
    // ...other theme configuration
};

Hello!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Input example:

Easy to learn. Simple to use.

Use our official presets for adding essential UI elements, helpers modifiers and icons for building your next amazing website.

Examples

Sign in

Your email

Your password

index.html

<div class="has-pl-4 has-pr-4 has-ml-auto has-mr-auto">
    <div class="card is-shadowed">
        <h3>Sign in</h3>
        <div class="has-mb-4">
            <label class="label">Your email</label>
            <input type="text" class="input" placeholder="you@email.com" />
        </div>
        <div class="has-mb-6">
            <label class="label">Your password</label>
            <input type="password" class="input" placeholder="Password" />
        </div>
        <button class="button is-full">
            <i class="si-lock has-pr-1"></i>
            <span>Sign in</span>
        </button>
    </div>
</div>