feat: merge core presets into a single modules pkg (#164)

jmjuanes · Jun 26, 2022 · 4d16898 · 4d16898
1 parent ee3cf98
commit 4d16898
Show file tree

Hide file tree

Showing 50 changed files with 862 additions and 843 deletions.
diff --git a/README.md b/README.md
@@ -23,26 +23,22 @@ We call **siimple** a **CSS toolkit** because it is a themeable and customizable
 Inspired by other CSS frameworks (like [bulma](https://bulma.io)), but:
 
 - **Fully themeable**: use your own theme to customize and extend **siimple**. 
-- **Use what you really need**: include the presets (elements, helpers, ...) that you **REALLY** need for your project.
+- **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 the main `siimple` package, the packages listed in the table below are also available on this repository. These packages are published in the `@siimple` organization in [npm](https://npmjs.com).
 
 | Package | Description | Included in `siimple` |
 |---------|-------------|:---------------------:|
 | [@siimple/core](https://github.com/jmjuanes/siimple/tree/main/packages/core/) | Core engine of the siimple CSS toolkit. | :heavy_check_mark: |
+| [@siimple/modules](https://github.com/jmjuanes/siimple/tree/main/packages/modules/) | Core modules of siimple. | :heavy_check_mark: |
 | [@siimple/colors](https://github.com/jmjuanes/siimple/tree/main/packages/colors/) | Color palette for siimple. | :heavy_check_mark: |
-| [@siimple/preset-reboot](https://github.com/jmjuanes/siimple/tree/main/packages/preset-reboot/) | Reboot preset for the siimple CSS toolkit. | :heavy_check_mark: |
-| [@siimple/preset-elements](https://github.com/jmjuanes/siimple/tree/main/packages/preset-elements/) | Elements preset for the siimple CSS toolkit. | :heavy_check_mark: |
-| [@siimple/preset-helpers](https://github.com/jmjuanes/siimple/tree/main/packages/preset-helpers/) | Helpers preset for the siimple CSS toolkit. | :heavy_check_mark: |
-| [@siimple/preset-markup](https://github.com/jmjuanes/siimple/tree/main/packages/preset-markup) | Markup preset for the siimple CSS toolkit. | :heavy_check_mark: |
-| [@siimple/preset-icons](https://github.com/jmjuanes/siimple/tree/main/packages/preset-icons/) | Pure CSS icons preset. | :heavy_check_mark: |
+| [@siimple/preset-theme](https://github.com/jmjuanes/siimple/tree/main/packages/preset-theme/) | Default theme of siimple. | :heavy_check_mark: |
 
 The version of these packages are different from the main `siimple` package, 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.
 
@@ -87,7 +83,6 @@ We are using [Gatsby](https://www.gatsbyjs.com/) for documentation. After buildi
 $ npm run website
 ```
 
-
 ## License
 
 Code and documentation of **siimple** &copy; 2015-present **Josemi Juanes**. Code released under the [MIT license](./LICENSE). Documentation released under [Creative Commons Attribution 4.0](https://creativecommons.org/licenses/by/4.0/).
diff --git a/docs/configuration.mdx b/docs/configuration.mdx
@@ -11,7 +11,6 @@ This is an example of a configuration file for **siimple**:
 ```js title=siimple.config.js
 import colors from "@siimple/colors";
 import theme from "@siimple/preset-theme";
-import elements from "@siimple/preset-elements";
 
 export default {
     ...theme,
@@ -30,9 +29,6 @@ export default {
         heading: ["Montserrat", "sans-serif"],
         code: ["monospace"],
     },
-    styles: {
-        ...elements.styles,
-    },
 };
 ```
 
@@ -194,16 +190,137 @@ Styles defined in this section must follow the [styles syntax](/guides/styles) s
 Presets allows you to extend **siimple** with reusable styles, mixins and theme scales. 
 
 ```js title=siimple.config.js
-import elements from "@siimple/preset-elements";
-import helpers from "@siimple/preset-helpers";
+import theme from "@siimple/preset-theme";
 
 export default {
-    styles: {
-        ...elements.styles,
-        ...helpers.helpers,
+    ...theme,
+    // ...other 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.
+
+To disable only specific modules, provide an object in the `modules` field and set a `false` value to the modules that you do not need:
+
+```js title=siimple.config.js
+export default {
+    modules: {
+        button: false,
+        badge: false,
+        margin: false,
+        reset: false,
     },
     // ...other configuration
 };
 ```
 
-We provide a collection of core presets. Check out the [packages](/packages) section to learn more.
+To enable only specific modules, provide an array with the modules that you need for your project:
+
+```js title=siimple.config.js
+export default {
+    modules: [
+        "button",
+        "padding",
+    ],
+    // ...other configuration
+};
+```
+
+If you want to **disable all modules**, provide an empty array to the `modules` field:
+
+```js title=siimple.config.js
+export default {
+    modules: [],
+    // ...other configuration
+};
+```
+
+This is the list of the available core modules of **siimple**:
+
+| Module name | Description |
+|-------------|-------------|
+| `alert` | The `.alert` element. |
+| `badge` | The `.badge` element. |
+| `button` | The `.button` element. |
+| `card` | The `.card` element. |
+| `checkbox` | The `.checkbox` element. |
+| `close` | The `.close` element. |
+| `column` | The `.column` element. |
+| `container` | The `.container` element. |
+| `crumb` | The `.crumb` element. |
+| `divider` | The `.divider` element. |
+| `input` | The `.input` element. |
+| `label` | The `.label` element. |
+| `menu` | The `.menu` element. |
+| `modal` | The `.modal` element. |
+| `navlink` | The `.navlink` element. |
+| `paragraph` | The `.paragraph` element. |
+| `progress` | The `.progress` element. |
+| `radio` | The `.radio` element. |
+| `scrim` | The `.scrim` element. |
+| `select` | The `.select` element. |
+| `slider` | The `.slider` element. |
+| `spinner` | The `.spinner` element. |
+| `switch` | The `.switch` element. |
+| `table` | The `.table` element. |
+| `textarea` | The `.textarea` element. |
+| `title` | The `.title` element. |
+| `backgroundColor` | Background color helpers. |
+| `textColor` | `Text colors helpers. |
+| `fontSize` | Font size helpers. |
+| `fontWeight` | Font weight helpers. |
+| `lineHeight` | Line height helpers. |
+| `opacity` | Opacity helpers. |
+| `radius` | Border radius helpers. |
+| `shadow` | Box shadow helpers. |
+| `width` | Width helpers. |
+| `minWidth` | Min width helpers. |
+| `maxWidth` | Max width helpers. |
+| `height` | Height helpers. |
+| `minHeight` | Min height helpers. |
+| `maxHeight` | Max height helpers. |
+| `size` | Uniform width and height helpers. |
+| `bottom` | Bottom position helpers. |
+| `left` | Left position helpers. |
+| `right` | Right position helpers. |
+| `top` | Top position helpers. |
+| `padding` | Padding helpers. |
+| `paddingX` | Uniform padding left and right helpers. |
+| `paddingY` | Unifor padding top and bottom helpers. |
+| `paddingTop` | Padding top helpers. |
+| `paddingBottom` | Padding bottom helpers. |
+| `paddingLeft` | Padding left helpers. |
+| `paddingRight` | Padding right helpers. |
+| `margin` | Uniform margin helpers. |
+| `marginX` | Uniform margin left and right helpers. |
+| `marginY` | Uniform margin top and bottom helpers. |
+| `marginTop` | Margin top helpers. |
+| `marginBottom` | Margin bottom helpers. |
+| `marginLeft` | Margin left helpers. |
+| `marginRight` | Margin right helpers. |
+| `flex` | Flex helpers. |
+| `flexDirection` | Flex direction helpers. |
+| `flexGrow` | Flex grow helpers. |
+| `flexShrink` | Flex shrink helpers. |
+| `flexWrap` | Flex wrap helpers. |
+| `alignContent` | Align content helpers. |
+| `alignItems` | Align items helpers. |
+| `alignSelf` | Align self helpers. |
+| `justifyContent` | Justify content helpers. |
+| `justifyItems` | Justify items helpers. |
+| `justifySelf` | Justify self helpers. |
+| `order` | Order helpers. |
+| `textAlign` | Text align helpers. |
+| `verticalAlign` | Vertical align helpers. |
+| `cursor` | Additional cursor helpers (for example `is-clickable`). |
+| `display` | Display helpers (for example `is-flex` or `is-hidden`). |
+| `float` | Float helpers (for example `is-aligned-left`). |
+| `overflow` | Overflow helpers (for example `is-clipped`). |
+| `position` | Position helpers (for example `is-relative` or `is-absolute`). |
+| `textTransform` | Text transform helpers (for example `is-italic`). |
+| `negative` | Negative helpers (for example `is-radiusless`). |
+| `markup` | The markup module, including headings, paragraphs, ... |
+| `reset` | The reset module. |
+
diff --git a/docs/elements.mdx b/docs/elements.mdx
@@ -6,17 +6,15 @@ title: Elements
 
 We provide a collection of built-in UI elements that you can customize and reuse across your projects, that includes buttons, alerts, navigation links, and more!
 
-### Adding elements
+### Disable elements
 
-The elements package is included when you install the `siimple` package framework, so you can just import elements styles in your `siimple.config.js` file:
+Individual elements can be disabled providing an object in the `modules` field of your configuration with the name of the element setted to `false`:
 
 ```js title=siimple.config.js
-import elements from "@siimple/preset-elements";
-
 export default {
-    styles: {
-        ...elements.styles,
-        // ...other styles
+    modules: {
+        button: false,
+        table: false,
     },
     // ...other configuration
 };

diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx
@@ -27,7 +27,6 @@ You can use the siimple CLI tool to generate your customized version of siimple.
 ```js title=siimple.config.js
 import colors from "@siimple/colors";
 import theme from "@siimple/preset-theme";
-import elements from "@siimple/preset-elements";
 
 export default {
     useRootStyles: false,
@@ -46,9 +45,6 @@ export default {
         heading: ["Montserrat", "sans-serif"],
         code: ["monospace"],
     },
-    styles: {
-        ...elements.styles,
-    },
 };
 ```
 

diff --git a/docs/helpers.mdx b/docs/helpers.mdx
@@ -4,19 +4,18 @@ title: Helpers
 
 # Helpers
 
-**Helpers** are modifiers that can be applied to any element to change their style.
+**Helpers** are modifiers that can be applied to any HTML element to change their style.
 
-### Adding helpers
+### Disable helpers
 
-The helpers package is included when you install the `siimple` package framework, so you can just import helpers styles in your `siimple.config.js` file:
+Individual helpers can be disabled providing an object in the `modules` field of your configuration with the name of the helper setted to `false`:
 
 ```js title=siimple.config.js
-import helpers from "@siimple/preset-helpers";
-
 export default {
-    styles: {
-        ...helpers.styles,
-        // ...other styles
+    modules: {
+        textColor: false,
+        margin: false,
+        padding: false,
     },
     // ...other configuration
 };

diff --git a/docs/helpers/radius.mdx → docs/helpers/border.mdx b/docs/helpers/radius.mdx → docs/helpers/border.mdx
@@ -1,17 +1,30 @@
 ---
-title: "Radius helpers"
+title: Border helpers
 ---
 
-# Radius
+# Border
 
-For each radius size defined in the `radius` field of your theme there will be a helper with the pattern `has-radius-{index}` for applying the specified border radius size.
+A collection of helpers to customize the border property of any element.
 
-The following radius helpers will be always included, regardless the radius sizes you provide in your theme configuration:
+### Customize border helpers
 
-| Class | Property |
-|-------|----------|
-| `has-radius-full` | `border-radius: 9999px;` |
-| `has-radius-none` | `border-radius: 0px;` |
+You can customize border helpers using the `radius` field of your theme configuration.
+
+```js title=siimple.config.js
+export default {
+    radius: {
+        sm: "0.25rem",
+        md: "0.5rem",
+        lg: "0.75rem",
+        xl: "1rem",
+    },
+    // ...other configuration
+};
+```
+
+### Border radius
+
+For each radius size defined in the `radius` field of your theme there will be a helper with the pattern `has-radius-{index}` for applying the specified border radius size.
 
 In the default theme of **siimple** the following radius helpers are available:
 
@@ -21,6 +34,7 @@ In the default theme of **siimple** the following radius helpers are available:
 | `has-radius-md`   | `border-radius: 0.5rem;` |
 | `has-radius-lg`   | `border-radius: 0.75rem;` |
 | `has-radius-xl`   | `border-radius: 1rem;` |
+| `has-radius-full` | `border-radius: 9999px;` |
 
 You can use these classes to apply different border radius to your elements:
 
@@ -38,22 +52,3 @@ You can use these classes to apply different border radius to your elements:
     <strong>.has-radius-xl</strong>
 </div>
 ```
-
-You can use the `has-radius-full` class to create pills or circles:
-
-```html live=true centered=true color=white
-<div class="has-px-6 has-py-3 has-m-2 has-bg-primary has-radius-full">
-    <strong>Pill element</strong>
-</div>
-<div class="has-s-24 has-m-2 has-bg-primary is-flex has-items-center has-justify-center has-radius-full">
-    <strong>Circle</strong>
-</div>
-```
-
-You can remove the border radius using `has-radius-none`: 
-
-```html live=true centered=true color=white
-<div class="has-p-6 has-m-2 has-bg-primary has-radius-none">
-    <strong>.has-radius-none</strong>
-</div>
-```