180 lines
4.9 KiB
Markdown
180 lines
4.9 KiB
Markdown
|
![Siimple header](https://github.com/jmjuanes/siimple/raw/main/header.svg)
|
||
|
|
||
|
|
||
|
[![NPM Version](https://badgen.net/npm/v/siimple)](https://npmjs.com/package/siimple)
|
||
|
[![Get help](https://badgen.net/badge/Discussions/Join%20us/cyan)](https://github.com/jmjuanes/siimple/discussions)
|
||
|
[![MIT License](https://badgen.net/github/license/jmjuanes/siimple)](https://github.com/jmjuanes/siimple)
|
||
|
|
||
|
> **siimple**: a minimal and themeable CSS toolkit for flat and clean designs.
|
||
|
|
||
|
## Links
|
||
|
|
||
|
- Documentation: https://www.siimple.xyz/docs.
|
||
|
- Online playground: https://www.siimple.xyz/playground.
|
||
|
- Report a bug or request a feature: https://github.com/jmjuanes/siimple/issues.
|
||
|
- Get help: https://github.com/jmjuanes/siimple/discussions.
|
||
|
|
||
|
## Features
|
||
|
|
||
|
- **Modular UI blocks**: **siimple** provides a collection of small UI blocks, called **elements**, that you can use to build complex UI components.
|
||
|
- **Themeable**: customize **siimple** with your project specific colors, fonts, and more!
|
||
|
- **Fast**: generate your customized version of **siimple** in milliseconds.
|
||
|
- **Tiny**: the core of **siimple** has less than 500 lines of code.
|
||
|
- **Pure CSS in JS implementation**: **siimple** implements a pure CSS in JS parser with no dependencies.
|
||
|
- **Easy to extend**: extend **siimple** with reusable styles and themes.
|
||
|
|
||
|
## Usage
|
||
|
|
||
|
### CLI usage
|
||
|
|
||
|
Make sure you have **Node.js 14.x** installed on your computer. Add **siimple** to your project running the following command:
|
||
|
|
||
|
```bash
|
||
|
$ npm install --save siimple
|
||
|
```
|
||
|
|
||
|
Create a file called `siimple.config.js` with your configuration:
|
||
|
|
||
|
```js
|
||
|
import colors from "@siimple/colors";
|
||
|
import base from "@siimple/preset-base";
|
||
|
|
||
|
export default {
|
||
|
...base,
|
||
|
useRootStyles: false,
|
||
|
useBorderBox: true,
|
||
|
prefix: "",
|
||
|
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"],
|
||
|
},
|
||
|
};
|
||
|
```
|
||
|
|
||
|
Generate your customized version of **siimple**:
|
||
|
|
||
|
```bash
|
||
|
$ npx siimple -c ./siimple.config.js -o ./output.css
|
||
|
```
|
||
|
|
||
|
> **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`).
|
||
|
|
||
|
## Configuration
|
||
|
|
||
|
A configuration file is where you can provide your custom theme scales, variants and styles for generating your customized version of **siimple** or to adapt it to your project look and feel.
|
||
|
|
||
|
Read more about the [configuration](https://www.siimple.xyz/docs/configuration/).
|
||
|
|
||
|
### Core modules (added in v4.1.0)
|
||
|
|
||
|
In the `modules` field of your configuration you can disable the core modules (elements, helpers, markup or reset) that you do not need for your project.
|
||
|
|
||
|
```js title=siimple.config.js
|
||
|
export default {
|
||
|
modules: {
|
||
|
button: false,
|
||
|
badge: false,
|
||
|
margin: false,
|
||
|
reset: false,
|
||
|
},
|
||
|
// ...other configuration
|
||
|
};
|
||
|
```
|
||
|
|
||
|
### Theme scales
|
||
|
|
||
|
Use the theme scales to configure the list of CSS properties specific for your project, that includes colors, fonts, sizes, and more!
|
||
|
|
||
|
```js title=siimple.config.js
|
||
|
import colors from "@siimple/colors";
|
||
|
|
||
|
export default {
|
||
|
colors: {
|
||
|
primary: colors.blue["500"],
|
||
|
secondary: colors.mint["600"],
|
||
|
text: colors.gray["800"],
|
||
|
background: "#fff",
|
||
|
},
|
||
|
fonts: {
|
||
|
body: ["Roboto", "sans-serif"],
|
||
|
heading: ["Montserrat", "sans-serif"],
|
||
|
monospace: ["monospace"],
|
||
|
},
|
||
|
// ...other configuration
|
||
|
};
|
||
|
```
|
||
|
|
||
|
Read more about [theming](https://www.siimple.xyz/docs/theme).
|
||
|
|
||
|
### Mixins
|
||
|
|
||
|
Mixins can be used to recycle blocks of styles and to change the look and feel of elements.
|
||
|
|
||
|
```js title=siimple.config.js
|
||
|
export default {
|
||
|
buttons: {
|
||
|
backgroundColor: "primary",
|
||
|
color: "white",
|
||
|
},
|
||
|
// ...other theme configuration
|
||
|
styles: {
|
||
|
"button": {
|
||
|
// ...other button styles
|
||
|
apply: "buttons",
|
||
|
},
|
||
|
},
|
||
|
};
|
||
|
```
|
||
|
|
||
|
### Custom styles
|
||
|
|
||
|
You can specify your custom styles in the configuration file, using a [CSS-in-JS styles syntax](https://www.siimple.xyz/docs/guides/styles).
|
||
|
|
||
|
```js
|
||
|
export default {
|
||
|
// ...other configuration
|
||
|
styles: {
|
||
|
".comment": {
|
||
|
backgroundColor: "gray",
|
||
|
color: "currentColor",
|
||
|
padding: "1rem",
|
||
|
},
|
||
|
},
|
||
|
};
|
||
|
```
|
||
|
|
||
|
This will generate:
|
||
|
|
||
|
```css
|
||
|
.comment {
|
||
|
background-color: gray;
|
||
|
color: currentColor;
|
||
|
padding: 1rem;
|
||
|
}
|
||
|
```
|
||
|
|
||
|
### Presets
|
||
|
|
||
|
Presets allows to extend **siimple** using reusable theme scales (like colors and fonts) and styles. Presets can be imported and used in your configuration file:
|
||
|
|
||
|
```js
|
||
|
import base from "@siimple/preset-base";
|
||
|
|
||
|
export default {
|
||
|
...base,
|
||
|
// ...other configuration
|
||
|
};
|
||
|
```
|
||
|
|
||
|
## License
|
||
|
|
||
|
[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
|