4.9 KiB
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:
$ npm install --save siimple
Create a file called siimple.config.js
with your configuration:
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:
$ npx siimple -c ./siimple.config.js -o ./output.css
Note
: siimple uses ECMAScript modules, so you will need to set
"type": "module"
in yourpackage.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.
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.
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!
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.
Mixins
Mixins can be used to recycle blocks of styles and to change the look and feel of elements.
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.
export default {
// ...other configuration
styles: {
".comment": {
backgroundColor: "gray",
color: "currentColor",
padding: "1rem",
},
},
};
This will generate:
.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:
import base from "@siimple/preset-base";
export default {
...base,
// ...other configuration
};