Welcome to the siimple CSS toolkit repository 🎉

• 📚 Documentation: https://www.siimple.xyz.
• 📝 Try siimple: play with siimple in your browser with our online playground.
• 🙏 Contributing: check out our CONTRIBUTING guide to get started.
• ❓ Questions: join our discussion forum.
• ✨ Releases: check out our latest releases.
• ↩️ Documentation for v3: v3.siimple.xyz.

What is siimple

We call siimple a CSS toolkit because it is a themeable and customizable CSS framework, but also a CSS engine that you can use for building your own CSS framework.

Inspired by other CSS frameworks (like bulma), but:

• Fully themeable: use your own theme to customize and extend siimple.
• Use what you really need: include the core modules (elements, helpers, ...) and themes that you REALLY need for your project.
• No dependencies: written all from scratch without any dependencies.
• No CSS preprocessors needed: we provide a tiny CLI to compile the CSS, so you do not need any other preprocessor like SASS or LESS.
• Color palette included: we provide a flat color palette to customize siimple with different colors.
• Pure CSS icons included: we provide a collection of pure CSS icons.

Packages

Along with siimple and siimple-icons packages, the packages listed in the table below are also available on this repository. These packages are published in the @siimple organization in npm.

Package	Description	Included in siimple
@siimple/core	Core engine of the siimple CSS toolkit.	✔️
@siimple/modules	Core modules of siimple.	✔️
@siimple/colors	Color palette for siimple.	✔️
@siimple/cli	Command line for siimple.	✔️
@siimple/postcss	PostCSS plugin for siimple.	✔️
@siimple/presets	A collection of all official presets for siimple.	❌
@siimple/preset-base	Base theme of siimple.	✔️
@siimple/preset-dark	Dark theme for siimple.	❌
@siimple/preset-ice	A frosty and clean theme for siimple.	❌
@siimple/preset-noir	Classic and elegant theme for siimple.	❌
@siimple/preset-mustard	Yellowish and very clean theme preset.	❌
@siimple/standalone	Run siimple directly in the browser.	❌
@siimple/icons	Siimple icons in JSON format.	❌

The version of these packages are different from the main siimple and siimple-icons packages, but follows this convention: the version 4.x.y of siimple equals to version 0.x.y of all packages published in the @siimple organization.

Development

Here are the instructions for building siimple from the source code. Before you get started, ensure you have Node 14 and Yarn installed in your computer.

First clone this repository in your local machine running the following command:

$ git clone https://github.com/jmjuanes/siimple

Navigate into the repository folder and then install dependencies with yarn:

$ yarn install

Build siimple and siimple-icons

Run the following command to build the siimple CSS framework in siimple/siimple.css and the siimple-icons CSS in siimple-icons/siimple-icons.css:

$ yarn run build

Documentation

We are using Gatsby for documentation. After building the CSS of the siimple framework you can build the documentation site with the following command:

$ yarn run build:website

Start the website server with the following command:

$ yarn run serve

Playground

You can build our playground tool as a standalone web application with the following command:

$ yarn run build:playground

This will generate a new folder playground/public with the code of the playground app. Start the playground web service with the following command:

$ yarn run start:playground

Acknowledgements

• CSS naming methodology based on SMACSS.
• CSS-In-JS engine inspired by Emotion and Stitches.
• Theme configuration and presets demo inspired by Theme UI and System UI.
• Standalone package inspired by Babel Standalone.

License

Code and documentation of siimple © 2015-present Josemi Juanes. Code released under the MIT license. Documentation released under Creative Commons Attribution 4.0.