build

node_modules/siimple/README.md

@@ -0,0 +1,179 @@
+![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).