The minimal and themeable CSS toolkit for flat and clean designs
MIT License
Welcome to the siimple CSS toolkit repository đ
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:
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.
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
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
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
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
Code and documentation of siimple Š 2015-present Josemi Juanes. Code released under the MIT license. Documentation released under Creative Commons Attribution 4.0.