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.
Fully customizable. Really.
Customize and extend siimple using your configuration from your project, including colors, fonts, sizes, shadows and more!
siimple.config.js
import colors from "@siimple/colors";
import theme from "@siimple/preset-theme";
import elements from "@siimple/preset-elements";

export default {
    ...theme,
    colors: {
        ...theme.colors,
        primary: colors.royal["500"],
        secondary: colors.mint["500"],
        text: colors.royal["800"],
        background: colors.royal["100"],
        muted: colors.royal["200"],
    },
    fonts: {
        ...theme.fonts,
        heading: ["Nunito", "sans-serif"],
        code: ["monospace"],
    },
    // ...other theme configuration
    styles: {
        ...elements.styles,
        // ...other styles
    },
};
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.
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.
Sign in
index.html
<div class="has-maxw-96 has-px-4 has-mx-auto">
    <div class="card has-shadow-md">
        <div class="title is-3">Sign in</div>
        <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 has-bg-blue-600-hover">
            <i class="icon-lock has-pr-1"></i>
            <span>Sign in</span>
        </button>
    </div>
</div>
Elements
We provide a collection of essential UI elements that you can customize and reuse across your projects
Helpers
A collection of utility CSS classes that can be used to change the style of any element.
Colors
A flat color palette that you can use for customizing your theme.
Icons
A collection of hand-crafted and pure CSS icons that can be used in web and mobile projects.

What people say about siimple?
Designmodo
This is a really cool framework for rapid prototyping or for building custom layouts without starting from scratch.
Colorlib
Siimple is a concise, flexible, beautiful, certainly minimal, front-end CSS framework that serves as the foundation for building FLAT and clean design web pages
TemplateToaster
Flexible, aesthetically built and a concise front-end CSS framework to accomplish clean web pages.
Designed, built and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.