12 | ```
13 |
14 | You can style your button using the secondary color of your theme with the mofidier `is-secondary`:
15 |
16 | ```html live=true
17 |
18 | ```
19 |
20 | You can style a button as disabled using the `is-disabled` modifier and adding a `disabled` attribute to the button:
21 |
22 | ```html live=true
23 |
24 | ```
25 |
26 | We also provide the `is-full` modifier to change the button width to the **full parent width**:
27 |
28 | ```html live=true
29 |
30 | ```
31 |
32 | ### Customize
33 |
34 | You can customize the button element using the `buttons` field of your theme configuration. Styles defined in the `buttons.default` field will be applied to the base `button` element, and any other field will generate additional variant modifiers for the button element.
35 |
36 | ```js title=siimple.config.js
37 | export default {
38 | badges: {
39 | default: {
40 | backgroundColor: "primary",
41 | color: "white",
42 | },
43 | // ...other additional buttons mixins
44 | // For examplem the following 'disabled' variant will generate a '.button.is-disabled' modifier
45 | disabled: {
46 | cursor: ["not-allowed", "!important"],
47 | opacity: ["0.6", "!important"],
48 | },
49 | },
50 | // ...other configuration
51 | };
52 | ```
53 |
--------------------------------------------------------------------------------
/docs/elements/card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Card"
3 | description: "A minimal and flexible container element"
4 | ---
5 |
6 | # Card
7 |
8 | A **card** is a flexible container element that holds content and actions about a single subject or topic. By default, cards have no fixed width. A card can be created adding a `card` class to a `
` tag.
9 |
10 |
11 | ```html live=true
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
14 |
15 | ```
16 |
17 | ### Customize
18 |
19 | The card element will apply the styles defined in the `layout.card` field of your theme configuration.
20 |
21 | ```js title=siimple.config.js
22 | export default {
23 | layout: {
24 | card: {
25 | backgroundColor: "white",
26 | color: "inherit",
27 | padding: "2rem",
28 | },
29 | },
30 | // ...other configuration
31 | };
32 | ```
33 |
--------------------------------------------------------------------------------
/docs/elements/checkbox.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Checkbox"
3 | description: "Checkbox input component"
4 | ---
5 |
6 | # Checkbox
7 |
8 | Style your checkbox elements adding the `checkbox` style to the `
` element.
9 |
10 | ```html live=true
11 |
12 | Default checkbox
13 |
15 | ```
16 |
17 | By default, the checkbox will be displayed unchecked, but you can add a **checked** attribute to the `
` element to display the checkbox as checked, or use the `is-active` modifier to manually display it as active.
18 |
19 | ```html live=true
20 |
21 | Active checkbox
22 |
24 | ```
25 |
26 | Checkboxes can also display the **indeterminate** state. Remember that there is no HTML attribute to set this state, the only way to set this state is via [JavaScript](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate).
27 |
28 | ```html
29 |
30 |
31 |
32 |
35 | ```
36 |
37 | ### Customize
38 |
39 | The checkbox element will apply the styles defined in the `forms.checkbox` field of your theme configuration.
40 |
41 | ```js title=siimple.config.js
42 | export default {
43 | forms: {
44 | checkbox: {
45 | backgroundColor: "muted",
46 | color: "white",
47 | "&:checked, &:indeterminate": {
48 | backgroundColor: "primary",
49 | },
50 | "&:indeterminate:after": {
51 | borderBottomColor: "white",
52 | },
53 | "&:checked:after": {
54 | borderBottomColor: "white",
55 | borderLeftColor: "white",
56 | },
57 | },
58 | },
59 | };
60 | ```
61 |
--------------------------------------------------------------------------------
/docs/elements/close.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Close"
3 | description: "A close button"
4 | ---
5 |
6 | # Close
7 |
8 | Use the `close` class to create a close button:
9 |
10 | ```html align=center live=true
11 |
12 | ```
13 |
14 | ### Customize
15 |
16 | The close element will apply the styles defined in the `buttons.close` field of your theme configuration.
17 |
18 | ```js title=siimple.config.js
19 | export default {
20 | buttons: {
21 | close: {
22 | color: "currentColor",
23 | },
24 | },
25 | };
26 | ```
27 |
--------------------------------------------------------------------------------
/docs/elements/column.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Column"
3 | ---
4 |
5 | # Column
6 |
7 | You can add **columns** to your grid row using the class `column`, and wrapp all columns in a `columns`. By default, you do not have to specify the size of the column: **each column will have by default an equal width**, proportional to the number of columns you have added.
8 |
9 | ```html live=true
10 |
21 | ```
22 |
23 | To customize the width of each column, we provide the following modifiers:
24 |
25 | | Variant | Column size |
26 | |---------|-------------|
27 | | `is-one-fifth` | `width: 20%` |
28 | | `is-one-quarter` | `width: 25%` |
29 | | `is-one-third` | `width: 33.33%` |
30 | | `is-two-fifths` | `width: 40%` |
31 | | `is-half` | `width: 50%` |
32 | | `is-three-fifths` | `width: 60%` |
33 | | `is-two-thirds` | `width: 66.66%` |
34 | | `is-three-quarters` | `width: 75%` |
35 | | `is-four-fifths` | `width: 80%` |
36 | | `is-full` | `width: 100%` |
37 |
38 | Example:
39 |
40 | ```html live=true
41 |
49 | ```
50 |
51 | You can also apply these variants in different breakpoints to customize the column behavior across different devices and screen sizes.
52 |
53 | You can combine different column classes to specify how the grid will be displayed on different devices. For example, if you create a grid with two columns and add the class `is-half` and `is-full-mobile`, your grid will have two columns on tablet screens and up, and one column on mobile devices.
54 |
55 | ```html
56 |
57 |
Column
58 |
Column
59 |
60 | ```
61 |
62 | You can hide a column at a specific breakpoint using the responsive `is-hidden` helper.
63 |
64 | ```html
65 |
66 |
67 | Hidden on mobile
68 |
69 |
70 | Always visible
71 |
72 |
73 | ```
74 |
75 | ### Customize
76 |
77 | The column element will apply the styles defined in the `layout.column` field of your theme configuration.
78 |
79 | ```js title=siimple.config.js
80 | export default {
81 | layout: {
82 | column: {
83 | paddingTop: "0.75rem",
84 | paddingBottom: "0.75rem",
85 | },
86 | },
87 | // ...other configuration
88 | };
89 | ```
90 |
--------------------------------------------------------------------------------
/docs/elements/container.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Container
3 | description: A responsive element to center content horizontally
4 | ---
5 |
6 | # Container
7 |
8 | A **container** is a layout element that divides your website in sections and places the information it contains in the center of the window in every moment. Add the class `container` to your `
` to use it:
9 |
10 | ```html
11 |
12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit...
13 |
14 | ```
15 |
16 | By default the container has the maximun width minus the `32px` of padding left and right. You can customize the maximum width of the container providing your custom `maxWidth` value in the `layout.container` field of your theme (see below).
17 |
18 | ### Customize
19 |
20 | The container element will apply the styles defined in the `layout.container` field of your theme configuration.
21 |
22 | ```js title=siimple.config.js
23 | export default {
24 | layout: {
25 | container: {
26 | maxWidth: "560px",
27 | },
28 | },
29 | // ..other configuration
30 | };
31 | ```
32 |
--------------------------------------------------------------------------------
/docs/elements/crumb.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Crumb"
3 | description: "Show the current page navigation"
4 | ---
5 |
6 | # Crumb
7 |
8 | The breadcrumb is an easy-to-use element to keep track of the path the user has navigated.
9 | Each item should have the `crumb` class, and you can use the additional `crumbs` class to wrap all crumb elements:
10 |
11 | ```html live=true
12 |
17 | ```
18 |
19 | We provide an `is-active` modifier to mark a crumb as active, for example to inform the user about the current page.
20 |
21 | ```html live=true
22 |
27 | ```
28 |
29 | ### Customize
30 |
31 | The crumb element will apply the styles defined in the `links.crumb` field of your theme configuration.
32 |
33 | ```js title=siimple.config.js
34 | export default {
35 | links:{
36 | crumb: {
37 | color: "black",
38 | },
39 | },
40 | // ...other configuration
41 | };
42 | ```
43 |
--------------------------------------------------------------------------------
/docs/elements/dropdown.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Dropdown
3 | ---
4 |
5 | # Dropdown
6 |
7 | Dropdowns are contextual elements usually used for displaying lists of links. Dropdowns are toggled by hovering the parent element.
8 |
9 | Dropdowns are created adding a `dropdown` class to a `
` element. To automatically display the dropdown when the user hovers the parent element, add a `with-dropdown` modifier to the parent element.
10 |
11 | ```html live=true
12 |
13 |
14 | Dropdown
15 |
17 |
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/docs/elements/input.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Input"
3 | description: "The universal text input element"
4 | ---
5 |
6 | # Input
7 |
8 | Add the `input` class to your text-based `
` tags (text, password, number and email types).
9 |
10 | ```html live=true
11 |
Type your email:
12 |
13 | ```
14 |
15 | ### Customize
16 |
17 | The input element will apply the styles defined in the `forms.input` field of your theme configuration.
18 |
19 | ```js title=siimple.config.js
20 | export default {
21 | forms: {
22 | input: {
23 | backgroundColor: "muted",
24 | padding: "0.25rem",
25 | },
26 | },
27 | // ...other configuration
28 | };
29 | ```
30 |
--------------------------------------------------------------------------------
/docs/elements/label.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Label"
3 | description: "Style your form labels"
4 | ---
5 |
6 | # Label
7 |
8 | Style your form **label** element adding a `label` class, useful with radio, checkbox and switch elements.
9 |
10 | ```html live=true
11 |
12 |
15 | ```
16 |
17 | ### Customize
18 |
19 | The label element will apply the styles defined in the `forms.label` field of your theme configuration.
20 |
21 | ```js title=siimple.config.js
22 | export default {
23 | forms: {
24 | label: {
25 | color: "inherit",
26 | fontWeight: "bold",
27 | },
28 | },
29 | // ...other configuration
30 | };
31 | ```
32 |
--------------------------------------------------------------------------------
/docs/elements/menu.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Menu
3 | ---
4 |
5 | # Menu
6 |
7 | Use the `menu` class to create a menu button, useful for displaying hidden menus:
8 |
9 | ```html align=center live=true
10 |
11 | ```
12 |
13 | ### Customize
14 |
15 | The menu element will apply the styles defined in the `buttons.menu` field of your theme configuration.
16 |
17 | ```js title=siimple.config.js
18 | export default {
19 | buttons: {
20 | menu: {
21 | borderColor: "currentColor",
22 | color: "currentColor",
23 | },
24 | },
25 | // ...other configuration
26 | };
27 | ```
28 |
--------------------------------------------------------------------------------
/docs/elements/modal.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Modal"
3 | ---
4 |
5 | # Modal
6 |
7 | Use the `modal` class to create a wrapper for your modal dialogs. Usually you will need to use also the `scrim` class to block the interaction with the background elements, and the `close` for displaying a close button in the modal.
8 |
9 |
10 |
11 | ```html
12 |
13 |
14 |
18 |
19 | Content of the modal
20 |
21 |
22 |
23 | ```
24 |
25 | ### Customize
26 |
27 | The modal element will apply the styles defined in the `dialogs.modal` field of your theme configuration.
28 |
29 | ```js title=siimple.config.js
30 | export default {
31 | dialogs: {
32 | modal: {
33 | maxWidth: "500px",
34 | },
35 | },
36 | // ...other configuration
37 | };
38 | ```
39 |
--------------------------------------------------------------------------------
/docs/elements/navlink.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "NavLink"
3 | description: "Navigation link element"
4 | ---
5 |
6 | # NavLink
7 |
8 | A navigation link element that you can use in your navigation sections, for example in the navbar. Just add a `navlink` class to your link to style it as a navigation link.
9 |
10 | ```html live=true
11 |
16 | ```
17 |
18 | We provide an `is-active` modifier to mark a navigation link as active, and a `is-disabled` modifier to mark a navigation link as disabled.
19 |
20 | ```html live=true
21 |
26 | ```
27 |
28 | ### Customize
29 |
30 | The navlink element will apply the styles defined in the `links.nav` field of your theme configuration.
31 |
32 | ```js title=siimple.config.js
33 | export default {
34 | links: {
35 | nav: {
36 | fontWeight: "bold",
37 | "&:hover": {
38 | color: "primary",
39 | },
40 | "&.is-disabled": {
41 | opacity: "0.5",
42 | pointerEvents: "none",
43 | },
44 | },
45 | },
46 | // ...other configuration
47 | };
48 | ```
49 |
--------------------------------------------------------------------------------
/docs/elements/progress.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Progress"
3 | ---
4 |
5 | # Progress
6 |
7 | Style your `
` elements using the class `progress`:
8 |
9 | ```html live=true
10 |
12 |
15 | ```
16 |
17 | By default, the radio will be displayed unchecked, but you can add a `checked` attribute to the `
21 |
24 | ```
25 |
26 | ### Customize
27 |
28 | The radio element will apply the styles defined in the `forms.radio` field of your theme configuration.
29 |
30 | ```js title=siimple.config.js
31 | export default {
32 | forms: {
33 | radio: {
34 | color: "primary",
35 | },
36 | },
37 | // ...other configuration
38 | };
39 | ```
40 |
--------------------------------------------------------------------------------
/docs/elements/scrim.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Scrim"
3 | ---
4 |
5 | # Scrim
6 |
7 | A **scrim** is a visual element that blocks the interaction with the background elements, allowing only to interact with the elements inside the scrim.
8 |
9 | You can create a scrim using the class `scrim`. By default, all elements inside the scrim will be centered in the screen.
10 |
11 | ```html
12 |
13 | Content of the scrim
14 |
15 | ```
16 |
17 | ### Customize
18 |
19 | The scrim element will apply the styles defined in the `dialogs.scrim` field of your theme configuration.
20 |
21 | ```js title=siimple.config.js
22 | export default {
23 | dialogs: {
24 | scrim: {
25 | backgroundColor: "rgba(0, 0, 0, 0.5)",
26 | },
27 | },
28 | // ...other configuration
29 | };
30 | ```
31 |
--------------------------------------------------------------------------------
/docs/elements/select.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Select"
3 | description: "A basic dropdown selection element"
4 | ---
5 |
6 | # Select
7 |
8 | You can style your `` elements adding a `select` class.
9 |
10 | ```html live=true
11 |
12 | Option 1
13 | Option 2
14 | Option 3
15 |
16 | ```
17 |
18 | ### Customize
19 |
20 | The select element will apply the styles defined in the `forms.select` field of your theme configuration.
21 |
22 | ```js title=siimple.config.js
23 | export default {
24 | forms: {
25 | select: {
26 | backgroundColor: "fill",
27 | },
28 | },
29 | // ...other configuration
30 | };
31 | ```
32 |
--------------------------------------------------------------------------------
/docs/elements/slider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Slider"
3 | ---
4 |
5 | # Slider
6 |
7 | Use the `slider` class to style your range input elements:
8 |
9 | ```html live=true
10 | ` element:
9 |
10 | ```html live=true align=center
11 |
12 | ```
13 |
14 | ### Customize
15 |
16 | You can customize the spinner element using the `spinners` field of your the configuration: styles defined in the `spinners.default` field will be applied to the base `spinner` element, and any other field will generate additional variant modifiers for the spinner element.
17 |
18 | ```js title=siimple.config.js
19 | export default {
20 | spinners: {
21 | default: {
22 | color: "primary",
23 | },
24 | // Other spinner variants
25 | },
26 | // ...other configuration
27 | };
28 | ```
29 |
--------------------------------------------------------------------------------
/docs/elements/switch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Switch"
3 | description: "Form switch element"
4 | ---
5 |
6 | # Switch
7 |
8 | Using the `switch` class you can style your checkbox elements like a **switch element**.
9 |
10 | ```html live=true
11 |
12 |
15 | ```
16 |
17 | By default, the switch will be displayed inactive, but you can add a **checked** attribute to the `
` element for displaying the switch as actived.
18 |
19 | ```html live=true
20 |
21 |
24 | ```
25 |
26 | ### Customize
27 |
28 | The switch element will apply the styles defined in the `forms.switch` field of your theme configuration.
29 |
30 | ```js title=siimple.config.js
31 | export default {
32 | forms: {
33 | switch: {
34 | color: "primary",
35 | },
36 | },
37 | // ...other configuration
38 | };
39 | ```
40 |
--------------------------------------------------------------------------------
/docs/elements/textarea.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Textarea"
3 | description: "A multiline text input element"
4 | ---
5 |
6 | # Textarea
7 |
8 | Add the `textarea` class to your `
12 | ```
13 |
14 | ### Customize
15 |
16 | The textarea element will apply the styles defined in the `forms.textarea` field of your theme configuration.
17 |
18 | ```js title=siimple.config.js
19 | export default {
20 | forms: {
21 | textarea: {
22 | backgroundColor: "muted",
23 | padding: "1rem",
24 | },
25 | },
26 | // ...other configuration
27 | };
28 | ```
29 |
--------------------------------------------------------------------------------
/docs/helpers.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Helpers
3 | ---
4 |
5 | # Helpers
6 |
7 | **Helpers** are modifiers that can be applied to any HTML element to change their style.
8 |
9 | ### Disable helpers
10 |
11 | Individual helpers can be disabled providing an object in the `modules` field of your configuration with the name of the helper setted to `false`:
12 |
13 | ```js title=siimple.config.js
14 | export default {
15 | modules: {
16 | textColor: false,
17 | margin: false,
18 | padding: false,
19 | },
20 | // ...other configuration
21 | };
22 | ```
23 |
24 | ### Usage
25 |
26 | Helpers modifiers have the following class pattern:
27 |
28 | ```
29 | .has-
-
30 | .is-
31 | ```
32 |
33 | Some helpers modifiers, like colors and sizes, always use the `.has--` pattern. In this case,
34 |
35 | - `shortcut` is the CSS attribute. For example we will use `bg` for the `background-color` and `w` for the `width`.
36 | - `name` is the CSS value to apply. For example `full` usually will apply a `100%` value.
37 |
38 | Example:
39 |
40 | ```html
41 |
42 | Example button
43 |
44 | ```
45 |
46 | Other simple helpers modifiers will use the `.is-` pattern. Example:
47 |
48 | ```html
49 | Hello world!
50 | ```
51 |
52 | ### Themeable helpers
53 |
54 | There are some helpers that are generated using the theme defined in your configuration file. For example, if you customize the `primary` color in your theme, the `has-bg-primary` helper will use the color that you have specified in your theme instead of the default color of the **siimple** theme.
55 |
56 | Also, additional colors provided in the `colors` scale will generate an additional helpers. For example, the following configuration:
57 |
58 | ```js title=siimple.config.js
59 | export default {
60 | colors: {
61 | info: "#1991a9",
62 | success: "#299956",
63 | warning: "#fbc850",
64 | error: "#e23636",
65 | // ...other default colors
66 | },
67 | // ...other configuration
68 | };
69 | ```
70 |
71 | Will generate the following additional helpers:
72 |
73 | ```css
74 | .has-bg-info {background-color: #1991a9;}
75 | .has-bg-success {background-color: #299956;}
76 | .has-bg-warning {background-color: #fbc850;}
77 | .has-bg-error {background-color: #e23636;}
78 | ```
79 |
--------------------------------------------------------------------------------
/docs/helpers/colors.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Colors"
3 | ---
4 |
5 | # Colors
6 |
7 | A collection of helpers to customize the text and background color of any element.
8 |
9 | ### Customize colors helpers
10 |
11 | You can customize colors helpers using the `colors` field of your theme configuration: any value provided will generate additional color helpers.
12 |
13 | ```js title=siimple.config.js
14 | import colors from "@siimple/colors";
15 |
16 | export default {
17 | colors: {
18 | primary: colors.blue["500"],
19 | secondary: colors.mint["500"],
20 | accent: colors.royal["600"],
21 | // ...other colors
22 | },
23 | // ...other configuration
24 | };
25 | ```
26 |
27 | ### Background color
28 |
29 | Use `has-bg-{name}` to set the background color of any element. Background color helpers will be generated using the values provided in the `colors` field of your theme.
30 |
31 | The following background helpers will be always available, regardless the colors you provide in your theme configuration:
32 |
33 | | Class | Applied value |
34 | |-------|---------------|
35 | | `has-bg-primary` | Will use the color defined in `colors.primary`. |
36 | | `has-bg-secondary` | Will use the color defined in `colors.secondary`. |
37 | | `has-bg-muted` | Will use the color defined in `colors.muted`. |
38 |
39 | Example:
40 |
41 | ```html live=true align=center
42 |
43 | Button
44 |
45 | ```
46 |
47 | #### Background color on hover
48 |
49 | You can change the background color of any element on hover adding the `-hover` suffix to the background color helper.
50 |
51 | ```html live=true align=center
52 |
53 | Hover me
54 |
55 | ```
56 |
57 | ### Text color
58 |
59 | Use `has-text-{name}` to set the text color of any element. Text colors helpers will be generated using the values provided in the `colors` field of your theme.
60 |
61 | The following text helpers will be always available, regardless the colors you provide in your theme configuration:
62 |
63 | | Class | Applied value |
64 | |-------|---------------|
65 | | `has-text-primary` | Will use the color defined in `colors.primary`. |
66 | | `has-text-secondary` | Will use the color defined in `colors.secondary`. |
67 | | `has-text-muted` | Will use the color defined in `colors.muted`. |
68 |
69 | Example:
70 |
71 | ```html live=true align=center
72 |
73 | Lorem ipsum dolor sit amet, consectetur adipiscing elit...
74 |
75 | ```
76 |
77 | #### Text color on hover
78 |
79 | You can change the text color of any element on hover adding the `-hover` suffix to the text color helper.
80 |
81 | ```html live=true align=center
82 |
83 | Hover me
84 |
85 | ```
86 |
--------------------------------------------------------------------------------
/docs/helpers/sizing.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Sizing"
3 | description: "Modify the width or the height of an element"
4 | ---
5 |
6 | # Sizing
7 |
8 | You can use the sizing helpers to set the width or height of any element.
9 |
10 | ### Customize sizing helpers
11 |
12 | The sizes that will be used to generate the sizing helpers can be defined in the `sizes` field of your theme.
13 |
14 | ```js title=siimple.config.js
15 | export default {
16 | sizes: {
17 | "0": "0px",
18 | "1": "0.25rem",
19 | "2": "0.5rem",
20 | "4": "1rem",
21 | // ...other sizes
22 | },
23 | // ...other configuration
24 | };
25 | ```
26 |
27 | The following sizes will be always included for generating the sizing helpers, regardless the sizes you provide in your theme configuration:
28 |
29 | | Name | Value | Notes |
30 | |------|-------|-------|
31 | | `auto` | `auto` | |
32 | | `none` | `0px` | |
33 | | `half` | `50%` | |
34 | | `full` | `100%` | |
35 | | `screen` | `100vw` | Will be applied only on `width` helper. |
36 | | `screen` | `100vh` | Will be applied only on `height` helper. |
37 |
38 | ### Width
39 |
40 | Add any of the `has-w-{size}` classnames to modify the `width` property of the element.
41 |
42 | Use `has-w-auto` to let the browser to automatically calculate the width of the element:
43 |
44 | ```html
45 |
46 | ```
47 |
48 | Use `has-w-screen` to fit the width of the screen:
49 |
50 | ```html
51 |
52 | ```
53 |
54 | Use the other clasess to set a fixed width:
55 |
56 | ```html live=true centered=true color=white
57 |
58 | .has-w-64
59 |
60 | ```
61 |
62 | ## Height
63 |
64 | Add any of the `has-h-{size}` classnames to modify the `height` property of the element.
65 |
66 | Use `has-h-auto` to let the browser to automatically calculate the height of the element:
67 |
68 | ```html
69 |
70 | ```
71 |
72 | Use `has-h-screen` to fit the height of the screen:
73 |
74 | ```html
75 |
76 | ```
77 |
78 | Use the other clasess to set a fixed height:
79 |
80 | ```html live=true centered=true color=white
81 |
82 | has-h-32
83 |
84 | ```
85 |
86 | ### Responsive sizing
87 |
88 | You can control the sizing of an element at a specific breakpoint adding a `-{breakpoint}` suffix to the sizing class.
89 |
90 | ```html
91 |
92 | . . .
93 |
94 | ```
95 |
--------------------------------------------------------------------------------
/docs/helpers/spacing.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Spacing"
3 | ---
4 |
5 | # Spacing
6 |
7 | You can use the spacing helpers to set the margin or padding of any element.
8 |
9 | ### Customize spacing helpers
10 |
11 | The sizes that will be used to generate the spacing helpers can be defined in the `space` field of your theme.
12 |
13 | ```js title=siimple.config.js
14 | export default {
15 | space: {
16 | "0": "0px",
17 | "1": "0.25rem",
18 | "2": "0.5rem",
19 | "4": "1rem",
20 | // ...other sizes
21 | },
22 | // ...other configuration
23 | };
24 | ```
25 |
26 | The following sizes will be always included for generating the spacing helpers, regardless the sizes you provide in your theme configuration:
27 |
28 | | Name | Value |
29 | |------|-------|
30 | | `auto` | `auto` |
31 | | `none` | `0px` |
32 | | `half` | `50%` |
33 | | `full` | `100%` |
34 |
35 | ### Uniform padding or margin
36 |
37 | Use `has-p-{size}` to set the **padding** of all sides of the element, or `has-m-{size}` to set the **margin** of all sizes of the element.
38 |
39 | ```html live=true centered=true color=white
40 |
41 | has-p-6
42 |
43 | ```
44 |
45 | ### Directional padding or margin
46 |
47 | Use `has-p{direction}-{size}` or `has-m{direction}-{size}` to set the **padding or margin of one side** of the element. The following sides are available:
48 |
49 | | Direction | Description |
50 | |-----------|-------------|
51 | | **t** | To set the margin or padding **top**. |
52 | | **b** | To set the margin or padding **bottom**. |
53 | | **l** | To set the margin or padding **left**. |
54 | | **r** | To set the margin or padding **right**. |
55 |
56 | ```html live=true centered=true color=white padding=12
57 |
58 | has-pt-12
59 |
60 |
61 | has-pr-12
62 |
63 |
64 | has-pb-12
65 |
66 |
67 | has-pl-12
68 |
69 | ```
70 |
71 | ### Centering elements
72 |
73 | Use `has-ml-auto` and `has-mr-auto` classnames to set the margin left and right to `auto`. This will center the block with a fixed width.
74 |
75 | ```html live=true color=white
76 |
77 | Centered
78 |
79 | ```
80 |
81 | ### Responsive spacing
82 |
83 | You can control the spacing of an element at a specific breakpoint adding a `-{breakpoint}` suffix to the padding or margin class.
84 |
85 | ```html
86 |
87 | . . .
88 |
89 | ```
90 |
--------------------------------------------------------------------------------
/docs/naming.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Naming methodology"
3 | description: "Understanding how siimple classnames has been designed"
4 | ---
5 |
6 | # Naming methodology
7 |
8 | The **siimple** toolkit uses a simplified version of the [**SMACSS** methodology](http://smacss.com) for naming classnames, as described on this section.
9 |
10 | ### Elements
11 |
12 | We use the following syntax for naming **elements** in siimple:
13 |
14 | ```
15 | .
16 | ```
17 |
18 | - ``: is the elements prefix that can be customized in the `prefix` section of the configuration. The default prefix applied in **siimple** is an empty string.
19 | - `` is the element name, for example `button` or `card`.
20 |
21 | Example:
22 |
23 | ```html
24 | ...
25 | ```
26 |
27 | ### Modifiers
28 |
29 | **Modifiers** are a collection of low-level classnames that can be used in any element to modify some CSS properties. Modifiers always follows this syntax:
30 |
31 | ```
32 | .has--
33 | .is-
34 | ```
35 |
36 | Example:
37 |
38 | ```html
39 |
40 | ...
41 |
42 | ```
43 |
44 | #### Responsive modifiers
45 |
46 | Some modifiers can be applied conditionally at different breakpoints, for building adaptative and responsive interfaces. Responsive modifiers uses the following syntax:
47 |
48 | ```
49 | .has---
50 | .is--
51 | ```
52 |
53 | Example:
54 |
55 | ```html
56 |
57 | ...
58 |
59 | ```
60 |
61 | #### Status modifiers
62 |
63 | Similar to responsive modifiers, you can apply some modifiers only in response to an specific status of the element. The classnames syntax in this case is very similar to the responsive modifiers:
64 |
65 | ```
66 | .has---
67 | .is--
68 | ```
69 |
70 | ##### Hover status
71 |
72 | Use the `hover` status to apply the modifier only on hover:
73 |
74 | ```html live=true align=center
75 |
76 | Hoverable button
77 |
78 | ```
79 |
80 | #### Variant modifiers
81 |
82 | **Variant modifiers** are special modifiers used to change the default style of an element. Variant modifiers always use the following syntax:
83 |
84 | ```
85 | .is-
86 | ```
87 |
88 | Some elements, like buttons or bages will generate a variant modifier class for each additional variant specified in your configuration.
89 |
90 | The following example shows how to use the `secondary` variant of a button:
91 |
92 | ```html
93 |
94 | Secondary button
95 |
96 | ```
97 |
98 | ### Actionable modifiers
99 |
100 | In some elements we use special modifiers to active it. The syntax for this type of modifiers is:
101 |
102 | ```
103 | .with-
104 | ```
105 |
106 | For example, for displaying the dropdown when the user movers the cursor over the dropdown parent element, you should add the `with-dropdown` class to the dropdown parent element:
107 |
108 | ```html
109 |
110 |
Hover me
111 |
112 |
113 |
114 |
` elements, and so on.
8 |
9 |
10 | ### Disable reset module
11 |
12 | The reset module can be disabled providing an object in the `modules` field of your configuration with the `reset` key setted to `false`:
13 |
14 | ```js title=siimple.config.js
15 | export default {
16 | modules: {
17 | reset: false,
18 | },
19 | // ...other configuration
20 | };
21 | ```
22 |
23 |
--------------------------------------------------------------------------------
/docs/responsive.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Responsive"
3 | description: "Understanding the responsive design of siimple"
4 | ---
5 |
6 | # Responsive
7 |
8 | The **siimple** toolkit has been designed to be fully responsive, so you can design an fully adaptative user interface.
9 |
10 | Some helpers and elements modifiers can be conditionally applied at different breakpoints, so you can customize how the user interface will be presented on different screen sizes.
11 |
12 | By default, we provide three screen breakpoints:
13 |
14 | | Prefix | Description | CSS media query |
15 | |--------|-------------|-----------------|
16 | | mobile | Applied to screen sizes up to `639px`. | `@media (max-width: 639px)` |
17 | | tablet | Applied to screen sizes from `640px`. | `@media (min-width: 640px)` |
18 | | desktop | Applied to screen sizes from `1264px`. | `@media (min-width: 1264px)` |
19 |
20 |
21 | The following example uses these responsive variants to customize how the card will be displayed for different screen sizes:
22 |
23 | ```html live=true bg=blue-200
24 |
25 |
26 |
28 |
29 |
Hello world!
30 |
31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
32 | incididunt ut labore et dolore magna aliqua.
33 |
34 |
35 |
Example
7 |
8 |
9 |
10 |
11 |
12 |
Simple 3 columns with link
13 |
15 |
16 |
Navbar Example
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Dark navbar with action button on right
17 |
18 |
19 |
20 |
21 | Navbar
23 |
24 |
25 |
26 |
27 |
38 |
39 |
40 |
41 |
Sign-in Example
10 |
11 |
12 |
13 |
14 |
15 |
Sign in
16 |
17 | Your email
18 |
20 |
21 | Your password
22 |
24 |
25 | Sign in
27 |
28 |
29 |
34 |
35 |
Tabs Example
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Pill tabs
17 |
18 |
23 |
24 |
25 |
26 |
27 |
Pill tabs with counter badges
28 |
29 |
40 |
41 |
42 |
43 |
44 |
Pill tabs with background
45 |
46 |
51 |
52 |
53 |
54 |
55 |
Pill tabs with dark background
56 |
57 |
58 |
Tab 1
59 |
Tab 2
60 |
Tab 3
61 |
62 |
63 |
64 |
`);
45 | content.push(` `);
46 | file.contents = new Buffer.from(content.join(""));
47 | callback(null, file);
48 | });
49 | });
50 | };
51 |
52 | gulp.task("clean", () => null);
53 |
54 | gulp.task("icons:sprite", () => {
55 | return gulp.src("packages/icons/index.js", {base: "./"})
56 | .pipe(generateSvgSprite())
57 | .pipe(rename("siimple-icons.svg"))
58 | .pipe(gulp.dest("siimple-icons/"));
59 | });
60 |
61 | gulp.task("css", () => {
62 | return gulp.src("siimple*/siimple.config.js", {base: "./"})
63 | .pipe(siimple())
64 | .pipe(postcss([autoprefixer()]))
65 | .pipe(minify({
66 | "compatibility": "*",
67 | "level": 2,
68 | }))
69 | .pipe(rename(currentPath => ({
70 | dirname: currentPath.dirname,
71 | basename: currentPath.dirname,
72 | extname: ".css",
73 | })))
74 | .pipe(gulp.dest("."))
75 | });
76 |
--------------------------------------------------------------------------------
/header.svg:
--------------------------------------------------------------------------------
1 |
2 |
13 |
17 |
18 |
20 | image/svg+xml
21 |
24 |
25 |
26 |
29 |
36 |
37 |
--------------------------------------------------------------------------------
/jest.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | clearMocks: true,
3 | testEnvironment: "node",
4 | };
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "siimple-repo",
3 | "version": "4.3.1",
4 | "private": true,
5 | "description": "A minimal and themeable CSS toolkit for flat and clean designs.",
6 | "author": "Josemi Juanes ",
7 | "type": "module",
8 | "license": "MIT",
9 | "homepage": "https://www.siimple.xyz/",
10 | "repository": "https://github.com/jmjuanes/siimple",
11 | "bugs": "https://github.com/jmjuanes/siimple/issues",
12 | "workspaces": [
13 | "packages/*",
14 | "playground",
15 | "website"
16 | ],
17 | "scripts": {
18 | "build": "yarn run build:css && yarn run build:icons",
19 | "build:css": "gulp css",
20 | "build:icons": "gulp icons:sprite",
21 | "build:docs": "cross-env DOCS_ONLY=true yarn workspace siimple-website build",
22 | "build:playground": "cross-env PLAYGROUND_ONLY=true yarn workspace siimple-playground build",
23 | "build:website": "yarn workspace siimple-website build && yarn workspace siimple-playground build && yarn copy-assets",
24 | "copy-assets": "node copy-assets.cjs",
25 | "serve": "yarn start:website",
26 | "start:website": "stattic --folder ./public --port 5000",
27 | "start:docs": "cross-env DOCS_ONLY=true yarn workspace siimple-website serve",
28 | "start:playground": "stattic --folder ./playground/public --port 5000",
29 | "test": "jest"
30 | },
31 | "devDependencies": {
32 | "@babel/core": "^7.18.13",
33 | "@babel/plugin-transform-runtime": "^7.18.10",
34 | "@babel/preset-env": "^7.18.10",
35 | "autoprefixer": "^10.3.5",
36 | "babel-jest": "^29.0.1",
37 | "clean-css": "^5.2.4",
38 | "cross-env": "^7.0.3",
39 | "gulp": "^4.0.2",
40 | "gulp-cli": "^2.3.0",
41 | "gulp-postcss": "^9.0.1",
42 | "gulp-rename": "^2.0.0",
43 | "jest": "^29.0.1",
44 | "jest-environment-jsdom": "^29.0.1",
45 | "postcss": "^8.4.14",
46 | "stattic": "^0.4.0"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/packages/cli/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/cli
2 |
3 | The **siimple** command line.
4 |
5 | > This package is included in the main `siimple` package and a separate installation is not required.
6 |
7 | ## Installation
8 |
9 | Add this package to your project using **npm**:
10 |
11 | ```bash
12 | $ npm install --save @siimple/cli
13 | ```
14 |
15 | Note that **Node.js version >=14** is required for running the CLI tool.
16 |
17 | ## Usage
18 |
19 | The easiest way is using `npx` for running the **siimple** CLI tool:
20 |
21 | ```bash
22 | $ npx siimple -c siimple.config.js -o siimple.css
23 | ```
24 |
25 | Instead of using `npx`, you can drop it inside of an `npm run` script in your `package.json` file:
26 |
27 | ```json title=package.json
28 | {
29 | "name": "my-project",
30 | "version": "1.0.0",
31 | "type": "module",
32 | "scripts": {
33 | "build-siimple": "siimple -c siimple.config.js -o siimple.css"
34 | },
35 | // ...other package.json content
36 | }
37 | ```
38 |
39 | Or you can directly execute it using the relative path to the executable file instead:
40 |
41 | ```bash
42 | $ ./node_modules/.bin/siimple -c siimple.config.js -o siimple.css
43 | ```
44 |
45 | ## Generate your CSS
46 |
47 | Create a file called `siimple.config.js` with your configuration, and print the output CSS **to stdout**:
48 |
49 | ```bash
50 | $ npx siimple -c siimple.config.js
51 | ```
52 |
53 | If you would like to save the generated CSS **to a file**, use the `-o` option instead with the path of the output `.css` file:
54 |
55 | ```bash
56 | $ npx siimple -c siimple.config.js -o siimple.css
57 | ```
58 |
59 | > **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`).
60 |
61 | ## License
62 |
63 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
64 |
--------------------------------------------------------------------------------
/packages/cli/index.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import fs from "node:fs";
4 | import path from "node:path";
5 | import url from "node:url";
6 | import {css} from "@siimple/core";
7 | import {injectModules} from "@siimple/modules";
8 |
9 | // Get CLI arguments
10 | const getArguments = () => {
11 | const args = process.argv.slice(2);
12 | const configIndex = args.indexOf("-c");
13 | const outputIndex = args.indexOf("-o");
14 | return {
15 | config: configIndex > -1 && args[configIndex + 1] ? args[configIndex + 1] : null,
16 | output: outputIndex > -1 && args[outputIndex + 1] ? args[outputIndex + 1] : null,
17 | };
18 | };
19 |
20 | // Resolve configuration
21 | const resolveConfig = configPath => {
22 | return import(url.pathToFileURL(configPath)).then(rawConfig => rawConfig.default);
23 | };
24 |
25 | // Generate siimple CSS
26 | process.nextTick(() => {
27 | const args = getArguments();
28 | if (!args.config) {
29 | console.error("No input configuration provided. Use the '-c' option.");
30 | return process.exit(1);
31 | }
32 | const configPath = path.resolve(process.cwd(), args.config);
33 | if (!fs.existsSync(configPath)) {
34 | console.error(`Configuration file '${configPath}' does not exist.`);
35 | return process.exit(1);
36 | }
37 | // Import configuration
38 | return resolveConfig(configPath).then(config => {
39 | return css(injectModules(config));
40 | }).then(result => {
41 | // Print file in stdout
42 | if (!args.output) {
43 | return process.stdout.write(result);
44 | }
45 | // Save to file
46 | const outputPath = path.resolve(process.cwd(), args.output);
47 | fs.writeFileSync(outputPath, result, "utf8");
48 | }).catch(error => {
49 | console.error(error);
50 | process.exit(1);
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/packages/cli/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/cli",
3 | "version": "0.3.1",
4 | "description": "Command Line for siimple",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "bin": {
12 | "siimple": "./index.js"
13 | },
14 | "dependencies": {
15 | "@siimple/core": "^0.3.1",
16 | "@siimple/modules": "^0.3.1"
17 | },
18 | "keywords": [
19 | "siimple",
20 | "cli"
21 | ],
22 | "files": [
23 | "index.js",
24 | "README.md"
25 | ],
26 | "engines": {
27 | "node": ">=14"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/colors/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/colors
2 |
3 | A color palette for the **siimple CSS toolkit**.
4 |
5 | ## Install
6 |
7 | Install this module using **npm**:
8 |
9 | ```bash
10 | $ npm install --save @siimple/colors
11 | ```
12 |
13 | ## Usage
14 |
15 | You can use the colors exported by this module in your `siimple.config.js` file, for example to generate your colors scale:
16 |
17 | ```js
18 | import colors from "@siimple/colors";
19 |
20 | export default {
21 | colors: {
22 | text: colors.gray["700"],
23 | background: colors.gray["100"],
24 | primary: colors.mint["600"],
25 | },
26 | // ...other configuration
27 | };
28 | ```
29 |
30 | Check out the [full list of available colors](https://www.siimple.xyz/colors).
31 |
32 | ## License
33 |
34 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
35 |
--------------------------------------------------------------------------------
/packages/colors/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/colors",
3 | "version": "0.3.1",
4 | "description": "A color palette for the siimple css toolkit",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "keywords": [
14 | "siimple",
15 | "colors"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/packages/core/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/core
2 |
3 | The core engine of the **siimple CSS toolkit**, that can be used for building your own themeable CSS framework.
4 |
5 | ## Install
6 |
7 | Install this package using **npm**:
8 |
9 | ```bash
10 | $ npm install --save @siimple/core
11 | ```
12 |
13 | ## API
14 |
15 | ### css(config)
16 |
17 | Given a [configuration object](https://www.siimple.xyz/configuration), this method will generate a CSS string with the parsed styles in `config.styles` and using the provided theme in the configuration object.
18 |
19 | ```js
20 | import {css} from "@siimple/core";
21 |
22 | const result = css({
23 | useBorderBox: false,
24 | useRootStyles: false,
25 | colors: {
26 | primary: "#34dde5",
27 | },
28 | styles: {
29 | button: {
30 | backgroundColor: "primary",
31 | color: "white",
32 | p: "2rem",
33 | },
34 | },
35 | });
36 | ```
37 |
38 | This will generate the following CSS string:
39 |
40 | ```css
41 | button {
42 | background-color: #34dde5;
43 | color: white;
44 | padding: 2rem;
45 | }
46 | ```
47 |
48 | ### mergeStyles(source, target)
49 |
50 | Performs a **deep merge** of the styles defined in the `target` object into the `source` object, and returns the merged styles object.
51 |
52 | ```js
53 | import {mergeStyles} from "@siimple/core";
54 |
55 | const sourceStyles = {
56 | ".button": {
57 | backgroundColor: "primary",
58 | color: "white",
59 | padding: "1.5rem",
60 | "&:hover": {
61 | backgroundColor: "secondary",
62 | },
63 | },
64 | };
65 |
66 | const mergedStyles = mergeStyles(sourceStyles, {
67 | ".button": {
68 | borderRadius: "0.5rem",
69 | "&:hover": {
70 | backgroundColor: "inherit",
71 | opacity: "0.5",
72 | },
73 | },
74 | });
75 | ```
76 |
77 | In the previous example the merged styles will be:
78 |
79 | ```js
80 | mergedStyles = {
81 | ".button": {
82 | backgroundColor: "primary",
83 | borderRadius: "0.5rem",
84 | color: "white",
85 | padding: "1.5rem",
86 | "&:hover": {
87 | backgroundColor: "inherit",
88 | opacity: "0.5",
89 | },
90 | },
91 | };
92 | ```
93 |
94 | ### mergeConfig(source, target)
95 |
96 | This function will return a new configuration object as a result of performing a **deep merge** of the `target` configuration object into `source`.
97 |
98 | ```js
99 | import {mergeConfig} from "@siimple/core";
100 |
101 | const config = mergeConfig({ /* source */}, {/* target */});
102 | ```
103 |
104 |
105 | ## License
106 |
107 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
108 |
--------------------------------------------------------------------------------
/packages/core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/core",
3 | "version": "0.3.1",
4 | "description": "Core module of the siimple css toolkit",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "keywords": [
14 | "siimple"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/packages/icons/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/icons
2 |
3 | Siimple icons in JSON format.
4 |
5 | ## Installation
6 |
7 | Use **npm** or **yarn** for adding this package to your project:
8 |
9 | ```bash
10 | $ yarn add @siimple/icons
11 | ```
12 |
13 | ## Usage
14 |
15 | This package export all icons as a JavaScript object. The icon ID is the key, and as a value that is an object with the following properties:
16 |
17 | - `path`: the icon SVG path in string format.
18 | - `category`: the category which the icon belongs to (for example `arrows` or `interfaces`).
19 |
20 | Example:
21 |
22 | ```json
23 | {
24 | "arrow-right": {
25 | "category": "arrows",
26 | "path": "...",
27 | },
28 | // ...
29 | }
30 | ```
31 |
32 | All icons have a size of 24x24 pixels and a padding of 2 pixels.
33 |
34 | # License
35 |
36 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
37 |
--------------------------------------------------------------------------------
/packages/icons/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/icons",
3 | "version": "0.3.1",
4 | "description": "Siimple icons in JSON format.",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz/icons",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "keywords": [
14 | "siimple",
15 | "icons"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/packages/modules/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/modules
2 |
3 | Core modules for the **siimple CSS toolkit**.
4 |
5 | > This package is included in the main `siimple` package and a separate installation is not required.
6 |
7 |
8 | ## Install
9 |
10 | ```bash
11 | $ npm install --save @siimple/modules
12 | ```
13 |
14 | ## Usage
15 |
16 | > This module is already integrated in the build process of the `siimple` main package, so you do not need to use the `injectModules` function.
17 |
18 | You can use the `injectModules` function to inject core modules in your configuration, using the `modules` field of your configuration object:
19 |
20 | ```js
21 | import {css} from "@siimple/core";
22 | import {injectModules} from "@siimple/modules";
23 |
24 | const result = css(injectModules({
25 | modules: [
26 | "button",
27 | "markup",
28 | "reset",
29 | ],
30 | // ...other configuration
31 | }));
32 | ```
33 |
34 | ## API
35 |
36 | ### injectModules(config)
37 |
38 | Returns a new configuration object with the styles of the modules specified in the `config.modules` field of the provided configuration. The following values for the `config.modules` field are allowed:
39 |
40 | - **Array of strings**, to specify **only the module's styles** that will be injected in the configuration.
41 | - **Object** where the keys are the modules names and the values have a falsy value, to specify the modules that will be skipped.
42 | - **A falsy value** (for example `false` or `null`), to skip all modules.
43 |
44 | ### createHelper(options)
45 |
46 | Use this function to create new custom helpers. The `options` argument is an object with the configuration of the helper.
47 |
48 | Example:
49 |
50 | ```js
51 | import {css} from "@siimple/core";
52 | import {createHelper} from "@siimple/modules";
53 |
54 | const result = css({
55 | // ...other configuration
56 | styles: {
57 | ...createHelper({
58 | prefix: "is",
59 | states: ["default"],
60 | responsive: false,
61 | properties: ["textDecoration"],
62 | values: {
63 | "underlined": "underline",
64 | "not-underlined": ["none", "!important"],
65 | },
66 | }),
67 | // ...other styles
68 | },
69 | });
70 |
71 | // Will generate the following styles:
72 | // .is-underlined {text-decoration: underline;}
73 | // .is-not-underlined {text-decoration: none !important;}
74 | ```
75 |
76 | The `options` object accepts the following keys:
77 |
78 | - `prefix`: prefix for the helper, for example `is` or `has`. Default is an empty string `""`. This field is required if no shortcut is specified.
79 | - `shortcut`: shortcut name of the helper, for example you can use `m` as a shortcut for `margin` helpers. Required if no prefix are specified.
80 | - `states`: an array for generating additional helpers to match states like hovering or focus. Allowed values in the array: `"default"`, `"hover"` and `"focus"`.
81 | - `responsive`: a boolean to generate also responsive helpers based on the breakpoints specified in the configuration. Default is `false`.
82 | - `properties`: a list of CSS properties for the helper.
83 | - `values`: an object list of values to assign to the list of properties. The object key will be used as the helper name, and the value will be used as the CSS property value.
84 |
85 |
86 | ## License
87 |
88 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
89 |
--------------------------------------------------------------------------------
/packages/modules/markup.js:
--------------------------------------------------------------------------------
1 | export const markup = {
2 | p: {
3 | fontWeight: "body",
4 | lineHeight: "body",
5 | marginBottom: "1rem",
6 | marginTop: "0px",
7 | apply: "text.paragraph",
8 | },
9 | a: {
10 | color: "primary",
11 | apply: "text.link",
12 | },
13 | small: {
14 | fontSize: "0",
15 | apply: "text.small",
16 | },
17 | strong: {
18 | fontWeight: "700",
19 | apply: "text.strong",
20 | },
21 | b: {
22 | fontWeight: "700",
23 | apply: "text.strong",
24 | },
25 | pre: {
26 | fontFamily: "code",
27 | overflowX: "auto",
28 | },
29 | code: {
30 | color: "primary",
31 | fontFamily: "code",
32 | fontSize: "0",
33 | fontWeight: "700",
34 | textDecoration: "none",
35 | apply: "text.code",
36 | },
37 | hr: {
38 | backgroundColor: "muted",
39 | border: "0px",
40 | display: "block",
41 | height: "0.125rem",
42 | padding: "0px",
43 | "&:not(:first-child)": {
44 | marginTop: "1rem",
45 | },
46 | "&:not(:last-child)": {
47 | marginBottom: "1rem",
48 | },
49 | },
50 | blockquote: {
51 | borderLeft: ["0.25rem", "solid", "currentColor"],
52 | color: "currentColor",
53 | display: "block",
54 | marginBottom: "1rem",
55 | marginLeft: "0px",
56 | marginRight: "0px",
57 | opacity: "0.6",
58 | paddingBottom: "0.75rem",
59 | paddingLeft: "1.25rem",
60 | paddingRight: "0.75rem",
61 | paddingTop: "0.75rem",
62 | },
63 | table: {
64 | backgroundColor: "transparent",
65 | borderCollapse: "separate",
66 | borderSpacing: "0",
67 | borderWidth: "0px",
68 | boxSizing: "border-box",
69 | display: "table",
70 | marginBottom: "2rem",
71 | width: "100%",
72 | "& tr": {
73 | boxSizing: "border-box",
74 | display: "table-row",
75 | },
76 | "& th,& td": {
77 | boxSizing: "border-box",
78 | display: "table-cell",
79 | lineHeight: "inherit",
80 | padding: "1rem",
81 | },
82 | "& thead": {
83 | boxSizing: "border-box",
84 | display: "table-header-group",
85 | },
86 | "& thead th": {
87 | borderBottomColor: "muted",
88 | borderBottomStyle: "solid",
89 | borderBottomWidth: "0.125rem",
90 | fontWeight: "bold",
91 | textAlign: "left",
92 | verticalAlign: "bottom",
93 | },
94 | "& tbody": {
95 | display: "table-row-group",
96 | verticalAlign: "middle",
97 | },
98 | "& tbody td": {
99 | borderTopColor: "muted",
100 | borderTopStyle: "solid",
101 | borderTopWidth: "0.125rem",
102 | verticalAlign: "top",
103 | },
104 | },
105 | ...Object.fromEntries([6,5,4,3,2,1].map(index => {
106 | const headingNumber = 7 - index;
107 | const headingConfig = {
108 | color: "heading",
109 | display: "block",
110 | fontFamily: "heading",
111 | fontSize: `${index}`,
112 | fontWeight: "heading",
113 | lineHeight: "heading",
114 | marginBottom: "0.5rem",
115 | padding: "0px",
116 | apply: "text.heading",
117 | };
118 | return [`h${(headingNumber)}`, headingConfig];
119 | })),
120 | };
121 |
--------------------------------------------------------------------------------
/packages/modules/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/modules",
3 | "version": "0.3.1",
4 | "description": "Core modules for the siimple css toolkit",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": {
13 | ".": "./index.js",
14 | "./elements": "./elements.js",
15 | "./markup": "./markup.js",
16 | "./helpers": "./helpers.js",
17 | "./reset": "./reset.js"
18 | },
19 | "keywords": [
20 | "siimple",
21 | "modules",
22 | "core"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/packages/modules/reset.js:
--------------------------------------------------------------------------------
1 | const applySameStyles = (items, styles) => Object.fromEntries(items.map(key => ([key, styles])));
2 |
3 | export const reset = {
4 | // Reset box sizing of all elements
5 | // *,
6 | // *:before,
7 | // *:after {
8 | // box-sizing: border-box;
9 | // }
10 | // Set default html style
11 | html: {
12 | // boxSizing: "border-box",
13 | scrollBehavior: "smooth",
14 | },
15 | // Set default body style
16 | body: {
17 | margin: "0",
18 | padding: "0",
19 | minHeight: "100vh",
20 | textRendering: "optimizeLegibility",
21 | "-webkit-font-smoothing": "antialiased",
22 | "-moz-osx-font-smoothing": "grayscale",
23 | },
24 | // Reset margins on lists
25 | ...applySameStyles(["ul", "ol", "dl"], {
26 | marginBottom: "1rem",
27 | marginTop: "0",
28 | }),
29 | // Reset margins on paragraphs
30 | p: {
31 | marginBottom: "1rem",
32 | marginTop: "0",
33 | },
34 | // Fix bold weight (in firefox)
35 | ...applySameStyles(["strong", "b"], {
36 | fontWeight: "bold",
37 | }),
38 | // Make images and videos responsive by default
39 | ...applySameStyles(["img", "video"], {
40 | display: "block",
41 | height: "auto",
42 | maxWidth: "100%",
43 | }),
44 | // Remove border from iframe
45 | iframe: {
46 | border: "0",
47 | },
48 | // Reset table border
49 | table: {
50 | borderCollapse: "collapse",
51 | borderSpacing: "0",
52 | },
53 | // td,
54 | // th {
55 | // padding: 0;
56 | // }
57 | // Reset headings
58 | ...applySameStyles(["h1", "h2", "h3", "h4", "h5", "h6"], {
59 | // marginTop: "0px",
60 | marginBottom: "0.5rem",
61 | }),
62 | };
63 |
--------------------------------------------------------------------------------
/packages/postcss/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/postcss
2 |
3 | Integrate **siimple** in your PostCSS build process using our plugin for PostCSS.
4 |
5 | ## Installation
6 |
7 | Add this package to your project using **npm**:
8 |
9 | ```bash
10 | $ npm install --save @siimple/postcss
11 | ```
12 |
13 | Note that **Node.js >=14** and **postcss-cli >=10** are required.
14 |
15 | ## Usage
16 |
17 | In your `postcss.config.js`, include the plugin of **siimple** for PostCSS with the path to your `siimple.config.js` (or `siimple.config.mjs` if you are not in an ESM env):
18 |
19 | ```js
20 | import autoprefixer from "autoprefixer";
21 | import siimple from "@siimple/postcss";
22 |
23 | export default {
24 | plugins: [
25 | siimple("./siimple.config.js"),
26 | autoprefixer(),
27 | // other plugins
28 | ],
29 | };
30 | ```
31 |
32 | ## License
33 |
34 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
35 |
--------------------------------------------------------------------------------
/packages/postcss/index.js:
--------------------------------------------------------------------------------
1 | import path from "node:path";
2 | import postcss from "postcss";
3 | import {css} from "@siimple/core";
4 | import {injectModules} from "@siimple/modules";
5 |
6 | const resolveConfig = configOrPath => {
7 | if (configOrPath) {
8 | // if (typeof configOrPath === "string" && fs.existsSync(configOrPath)) {
9 | if (typeof configOrPath === "string") {
10 | const configPath = path.resolve(process.cwd(), configOrPath);
11 | return import(configPath).then(config => config.default);
12 | }
13 | else if (typeof configOrPath === "object") {
14 | return Promise.resolve(configOrPath);
15 | }
16 | }
17 | return Promise.resolve({}); // No configuration provided
18 | };
19 |
20 | export default configOrPath => ({
21 | postcssPlugin: "siimple",
22 | plugins: [
23 | root => {
24 | return resolveConfig(configOrPath)
25 | .then(config => css(injectModules(config)))
26 | .then(styles => root.append(postcss.parse(styles)));
27 | },
28 | ],
29 | });
30 |
--------------------------------------------------------------------------------
/packages/postcss/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/postcss",
3 | "version": "0.3.1",
4 | "description": "PostCSS plugin for siimple.",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "dependencies": {
14 | "@siimple/core": "^0.3.1",
15 | "@siimple/modules": "^0.3.1"
16 | },
17 | "peerDependencies": {
18 | "postcss": ">=8.4.0",
19 | "postcss-cli": ">=10.0.0"
20 | },
21 | "keywords": [
22 | "siimple",
23 | "postcss"
24 | ],
25 | "files": [
26 | "index.cjs",
27 | "README.md"
28 | ],
29 | "engines": {
30 | "node": ">=14"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/preset-base/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/preset-base
2 |
3 | Default theme preset for the **siimple CSS toolkit**.
4 |
5 | ## Install
6 |
7 | Install this package using **npm**:
8 |
9 | ```bash
10 | $ npm install --save @siimple/preset-base
11 | ```
12 |
13 | ## Usage
14 |
15 | Use the base theme in your `siimple.config.js` file:
16 |
17 | ```js
18 | import base from "@siimple/preset-base";
19 |
20 | export default {
21 | // Import all default scales, breakpoints and root styles
22 | ...base,
23 | // Extend default theme scales
24 | colors: {
25 | ...base.colors,
26 | text: "#000",
27 | },
28 | // ...other configuration
29 | };
30 | ```
31 |
--------------------------------------------------------------------------------
/packages/preset-base/index.js:
--------------------------------------------------------------------------------
1 | import colors from "@siimple/colors";
2 |
3 | export const fonts = {
4 | sans: [
5 | "-apple-system",
6 | "BlinkMacSystemFont",
7 | "'Segoe UI'",
8 | "Roboto",
9 | "'Helvetica Neue'",
10 | "Arial",
11 | "sans-serif",
12 | ].join(", "),
13 | serif: [
14 | "Georgia",
15 | "Cambria",
16 | "'Times New Roman'",
17 | "Times",
18 | "serif",
19 | ].join(", "),
20 | monospace: [
21 | "SFMono-Regular",
22 | "Menlo",
23 | "Monaco",
24 | "Consolas",
25 | "'Liberation Mono'",
26 | "'Courier New'",
27 | "monospace",
28 | ].join(", "),
29 | };
30 |
31 | export const screens = {
32 | tablet: "640px",
33 | desktop: "1264px",
34 | widescreen: "1504px",
35 | };
36 |
37 | export const sizes = {
38 | "0": "0px",
39 | "4": "1rem",
40 | "8": "2rem",
41 | "12": "3rem",
42 | "16": "4rem",
43 | "24": "6rem",
44 | "32": "8rem",
45 | "48": "12rem",
46 | "64": "16rem",
47 | "96": "24rem",
48 | "192": "48rem",
49 | };
50 |
51 | export const space = {
52 | "0": "0px",
53 | "1": "0.25rem",
54 | "2": "0.5rem",
55 | "3": "0.75rem",
56 | "4": "1rem",
57 | "6": "1.5rem",
58 | "8": "2rem",
59 | "12": "3rem",
60 | "16": "4rem",
61 | "24": "6rem",
62 | };
63 |
64 | export default {
65 | meta: {
66 | name: "base",
67 | fonts: [],
68 | },
69 | breakpoints: {
70 | mobile: {
71 | max: screens.tablet,
72 | },
73 | tablet: {
74 | min: screens.tablet,
75 | },
76 | desktop: {
77 | min: screens.desktop,
78 | },
79 | },
80 | colors: {
81 | primary: colors.blue["500"],
82 | secondary: colors.royal["500"],
83 | highlight: colors.blue["200"],
84 | muted: colors.gray["200"],
85 | text: colors.gray["700"],
86 | heading: colors.gray["800"],
87 | background: "#fff",
88 | dark: colors.gray["800"],
89 | light: colors.gray["100"],
90 | white: "#fff",
91 | },
92 | fonts: {
93 | body: fonts.sans,
94 | heading: "inherit",
95 | code: fonts.monospace,
96 | },
97 | fontSizes: [
98 | "0.875rem", // 0
99 | "16px", // 1
100 | "1.25rem", // 2
101 | "1.5rem", // 3
102 | "1.75rem", // 4
103 | "2rem", // 5
104 | "2.5rem", // 6
105 | "3rem",
106 | "3.5rem",
107 | "4rem",
108 | "4.5rem",
109 | ],
110 | fontWeights: {
111 | body: "400",
112 | heading: "700",
113 | },
114 | lineHeights: {
115 | heading: "1.25",
116 | body: "1.5",
117 | },
118 | sizes: sizes,
119 | space: space,
120 | // Default root styles
121 | root: {
122 | backgroundColor: "background",
123 | color: "text",
124 | fontFamily: "body",
125 | fontSize: "1",
126 | fontWeight: "body",
127 | lineHeight: "body",
128 | },
129 | };
130 |
--------------------------------------------------------------------------------
/packages/preset-base/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/preset-base",
3 | "version": "0.3.1",
4 | "description": "Base theme preset for the siimple css toolkit",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "dependencies": {
14 | "@siimple/colors": "^0.3.1"
15 | },
16 | "keywords": [
17 | "siimple",
18 | "preset",
19 | "theme"
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/packages/preset-dark/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/preset-dark
2 |
3 | A dark theme preset for the **siimple CSS toolkit**. You can use this preset as a starting point for building your own dark theme for **siimple**.
4 |
5 | ## Install
6 |
7 | Add this preset to your project using **npm** or **yarn**:
8 |
9 | ```bash
10 | $ npm install --save @siimple/preset-dark
11 | ```
12 |
13 | ## Usage
14 |
15 | Include this preset in your `siimple.config.js` file:
16 |
17 | ```js
18 | import dark from "@siimple/preset-dark";
19 |
20 | export default {
21 | ...dark,
22 | // ...other configuration
23 | };
24 | ```
25 |
--------------------------------------------------------------------------------
/packages/preset-dark/index.js:
--------------------------------------------------------------------------------
1 | import colors from "@siimple/colors";
2 | import base from "@siimple/preset-base";
3 |
4 | export default {
5 | ...base,
6 | meta: {
7 | name: "dark",
8 | fonts: [],
9 | },
10 | colors: {
11 | primary: colors.blue["500"],
12 | secondary: colors.royal["500"],
13 | highlight: colors.blue["700"],
14 | muted: colors.gray["700"],
15 | text: "#fff",
16 | heading: "#fff",
17 | background: colors.gray["900"],
18 | dark: colors.gray["900"],
19 | white: "#fff",
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/packages/preset-dark/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/preset-dark",
3 | "version": "0.3.1",
4 | "description": "Dark theme preset for the siimple css toolkit",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz/presets/dark",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "dependencies": {
14 | "@siimple/colors": "^0.3.1",
15 | "@siimple/preset-base": "^0.3.1"
16 | },
17 | "keywords": [
18 | "siimple",
19 | "preset",
20 | "theme",
21 | "dark"
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/packages/preset-ice/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/preset-ice
2 |
3 | A frosty and clean theme for **siimple**. Based on [Nord Theme](https://www.nordtheme.com).
4 |
5 | ## Installation
6 |
7 | Install this package using **npm**:
8 |
9 | ```
10 | $ npm install --save siimple @siimple/preset-ice
11 | ```
12 |
13 | ## Usage
14 |
15 | Use this theme in your `siimple.config.js` file:
16 |
17 | ```js
18 | import ice from "@siimple/preset-ice";
19 |
20 | export default {
21 | ...ice,
22 | // ...other configuration
23 | };
24 | ```
25 |
26 | This preset uses `Poppins` as default font for body text and headings. You will need to import this font in your HTML file:
27 |
28 | ```html
29 | Danger button
39 | Warning button
40 | Success button
41 |
42 |
43 | Danger alert
44 | Warning alert
45 | Success alert
46 |
47 |
48 | Danger badge
49 | Warning badge
50 | Success badge
51 | ```
52 |
53 | ## Acknowledgement
54 |
55 | This theme has been inspired in [Nord Color palette](https://www.nordtheme.com).
56 |
--------------------------------------------------------------------------------
/packages/preset-ice/index.js:
--------------------------------------------------------------------------------
1 | import base from "@siimple/preset-base";
2 |
3 | // Color palette based on https://github.com/arcticicestudio/nord
4 | // LICENSE: https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md (MIT LICENSE)
5 | export const baseColors = {
6 | polar: [
7 | "#2e3440", // Polar night (nord0)
8 | "#3b4252", // Ponar night (nord1)
9 | "#434c5e", // Polar night (nord2)
10 | "#4c566a", // Polar night (nord3)
11 | ],
12 | snow: [
13 | "#d8dee9", // Snow storm (nord4)
14 | "#e5e9f0", // Snow storm (nord5)
15 | "#eceff4", // Snow storm (nord6)
16 | ],
17 | frost: [
18 | "#8fbcbb", // Frost (nord7)
19 | "#88c0d0", // Frost (nord8)
20 | "#81a1c1", // Frost (nord9)
21 | "#5e81ac", // Frost (nord10)
22 | ],
23 | aurora: [
24 | "#bf616a", // Aurora (nord11)
25 | "#d08770", // Aurora (nord12)
26 | "#ebcb8b", // Aurora (nord13)
27 | "#a3be8c", // Aurora (nord14)
28 | "#b48ead", // Aurora (nord15)
29 | ],
30 | };
31 |
32 | export default {
33 | ...base,
34 | meta: {
35 | name: "ice",
36 | fonts: [
37 | "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap",
38 | ],
39 | },
40 | colors: {
41 | primary: baseColors.frost[3],
42 | secondary: baseColors.aurora[4],
43 | background: "#fff",
44 | text: baseColors.polar[1],
45 | heading: baseColors.polar[0],
46 | muted: baseColors.snow[2],
47 | danger: baseColors.aurora[0],
48 | warning: baseColors.aurora[2],
49 | success: baseColors.aurora[3],
50 | ...baseColors,
51 | },
52 | fonts: {
53 | body: "Poppins, sans-serif",
54 | heading: "Poppins, sans-serif",
55 | monospace: "Menlo, monospace",
56 | },
57 | // Mixins
58 | ...Object.fromEntries(["alerts","badges","buttons"].map(name => {
59 | return [name, {
60 | danger: {
61 | backgroundColor: "danger",
62 | color: "white",
63 | },
64 | warning: {
65 | backgroundColor: "warning",
66 | color: "white",
67 | },
68 | success: {
69 | backgroundColor: "success",
70 | colors: "white",
71 | },
72 | }];
73 | })),
74 | forms: {
75 | checkbox: {
76 | backgroundColor: "muted",
77 | "&:checked,&:indeterminate": {
78 | backgroundColor: "primary",
79 | },
80 | },
81 | ...Object.fromEntries(["input","select", "textarea"].map(el => {
82 | return [el, {
83 | backgroundColor: "muted",
84 | "&:focus": {
85 | borderColor: "primary",
86 | },
87 | }];
88 | })),
89 | radio: {
90 | color: "primary",
91 | "&:before": {
92 | borderColor: "muted",
93 | },
94 | "&:hover:after": {
95 | backgroundColor: "muted",
96 | },
97 | },
98 | },
99 | };
100 |
--------------------------------------------------------------------------------
/packages/preset-ice/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/preset-ice",
3 | "version": "0.3.1",
4 | "description": "A frosty and clean theme for siimple. Based on Nord Theme.",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz/presets/ice",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "dependencies": {
14 | "@siimple/preset-base": "^0.3.1"
15 | },
16 | "keywords": [
17 | "siimple",
18 | "preset",
19 | "theme",
20 | "ice",
21 | "nord"
22 | ],
23 | "files": [
24 | "index.js",
25 | "README.md"
26 | ],
27 | "presetFonts": [
28 | "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/packages/preset-mustard/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/preset-mustard
2 |
3 | A very clean and yellowish theme preset for the **siimple CSS toolkit**.
4 |
5 | ## Installation
6 |
7 | Add this preset to your project using **npm** or **yarn**:
8 |
9 | ```bash
10 | $ npm install --save @siimple/preset-mustard
11 | ```
12 |
13 | ## Usage
14 |
15 | Include this preset in your `siimple.config.js` file:
16 |
17 | ```js
18 | import mustard from "@siimple/preset-mustard";
19 |
20 | export default {
21 | ...mustard,
22 | // ...other configuration
23 |
24 | // If you need to define your own variants, first extend the preset variants.
25 | // For example:
26 | buttons: {
27 | ...mustard.buttons,
28 | // ...your custom buttons variants
29 | },
30 |
31 | // In case that you need to add your custom styles, first extend the styles
32 | // defined in mustard.styles:
33 | styles: {
34 | ...mustard.styles,
35 | // ...your custom styles
36 | },
37 | };
38 | ```
39 |
40 | This preset uses [`Inter`](https://fonts.google.com/specimen/Inter) as the default font family for both body and headings, so you will need to import this font in your HTML file:
41 |
42 | ```html
43 | Light button
53 |
54 |
55 |
56 | Light alert content
57 |
58 |
59 |
60 | Light badge
61 | ```
62 |
63 | You can also create `outlined` buttons or badges:
64 |
65 | ```html
66 | Outlined button
67 | ```
68 |
--------------------------------------------------------------------------------
/packages/preset-mustard/index.js:
--------------------------------------------------------------------------------
1 | import base from "@siimple/preset-base";
2 |
3 | export const colors = {
4 | primary: "#041f32",
5 | secondary: "#f8ad15",
6 | highlight: "#fbe27c",
7 | muted: "#f8f8fa",
8 | gray: "#757789",
9 | };
10 |
11 | export default {
12 | ...base,
13 | // Preset meta information
14 | meta: {
15 | name: "mustard",
16 | fonts: [
17 | "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
18 | ],
19 | },
20 | colors: {
21 | ...colors,
22 | text: colors.primary,
23 | heading: colors.primary,
24 | background: "#fff",
25 | },
26 | fonts: {
27 | ...base.fonts,
28 | body: "'Inter', sans-serif",
29 | heading: "inherit",
30 | },
31 | // Mixins
32 | bordered: {
33 | borderColor: "primary",
34 | borderStyle: "solid",
35 | borderWidth: "0.125rem",
36 | },
37 | shadowed: {
38 | boxShadow: [
39 | "0rem 1rem 1rem -0.5rem rgba(54,63,79,0.25)",
40 | "0 0 0 1px rgba(54,63,79,0.02)",
41 | ].join(","),
42 | },
43 | // Variants
44 | alerts: {
45 | light: {
46 | backgroundColor: "highlight",
47 | color: "text",
48 | },
49 | },
50 | badges: {
51 | light: {
52 | backgroundColor: "highlight",
53 | color: "text",
54 | },
55 | outlined: {
56 | apply: "bordered",
57 | backgroundColor: "background",
58 | color: "text",
59 | padding: ["0.125rem", "0.375rem"],
60 | },
61 | },
62 | buttons: {
63 | light: {
64 | backgroundColor: "highlight",
65 | color: "text",
66 | },
67 | outlined: {
68 | apply: "bordered",
69 | backgroundColor: "background",
70 | color: "text",
71 | padding: ["0.625rem", "1.375rem"],
72 | "&:hover": {
73 | backgroundColor: "primary",
74 | color: "white",
75 | },
76 | },
77 | },
78 | layout: {
79 | card: {
80 | apply: "bordered",
81 | },
82 | },
83 | dialogs: {
84 | modal: {
85 | apply: "bordered",
86 | },
87 | scrim: {
88 | backdropFilter: "blur(2px)",
89 | },
90 | },
91 | links: {
92 | nav: {
93 | "&:hover": {
94 | backgroundColor: "highlight",
95 | },
96 | },
97 | },
98 | styles: {
99 | ".has-font-inter": {
100 | fontFamily: "body",
101 | },
102 | },
103 | };
104 |
--------------------------------------------------------------------------------
/packages/preset-mustard/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/preset-mustard",
3 | "version": "0.3.1",
4 | "description": "A yellowish and clean theme for siimple.",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz/presets/mustard",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "dependencies": {
14 | "@siimple/preset-base": "^0.3.1"
15 | },
16 | "keywords": [
17 | "siimple",
18 | "preset",
19 | "theme",
20 | "mustard",
21 | "yellow",
22 | "clean"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/packages/preset-noir/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/preset-noir
2 |
3 | An elegant and classic theme for **siimple**.
4 |
5 | ## Installation
6 |
7 | Install this package using **npm**:
8 |
9 | ```bash
10 | $ npm install --save @siimple/preset-noir
11 | ```
12 |
13 | ## Usage
14 |
15 | Add this theme to your `siimple.config.js` file:
16 |
17 | ```js
18 | import noir from "@siimple/preset-noir";
19 |
20 | export default {
21 | ...noir,
22 | // ...other configuration
23 | styles: {
24 | ...noir.styles,
25 | // other custom styles
26 | },
27 | };
28 | ```
29 |
30 | This preset uses [`Noto Serif`](https://fonts.google.com/specimen/Noto+Serif) for body text and for headings, so you will need to import this font in your HTML file:
31 |
32 | ```html
33 | Outlined button
43 |
44 |
45 | Outlined badge
46 | ```
47 |
--------------------------------------------------------------------------------
/packages/preset-noir/index.js:
--------------------------------------------------------------------------------
1 | import base from "@siimple/preset-base";
2 |
3 | // theme colors
4 | export const colors = {
5 | primary: "#161b29",
6 | secondary: "#757789",
7 | muted: "#d8d9de",
8 | highlight: "#9394a3",
9 | white: "#fff",
10 | };
11 |
12 | export default {
13 | ...base,
14 | meta: {
15 | name: "noir",
16 | fonts: [
17 | "https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700",
18 | ],
19 | },
20 | // Scales
21 | colors: {
22 | primary: colors.primary,
23 | secondary: colors.secondary,
24 | muted: colors.muted,
25 | text: colors.primary,
26 | heading: colors.primary,
27 | highlight: colors.highlight,
28 | background: colors.white,
29 | },
30 | fonts: {
31 | ...base.fonts,
32 | body: "'Noto Serif', serif",
33 | heading: "inherit",
34 | },
35 | fontWeights: {
36 | body: "400",
37 | bold: "700",
38 | heading: "700",
39 | },
40 | // Mixins
41 | bordered: {
42 | borderColor: "primary",
43 | borderRadius: "0.5rem",
44 | borderStyle: "solid",
45 | borderWidth: "0.125rem",
46 | },
47 | shadowed: {
48 | boxShadow: [
49 | "0rem 1rem 1rem -0.5rem rgba(54,63,79,0.25)",
50 | "0 0 0 1px rgba(54,63,79,0.02)",
51 | ].join(","),
52 | },
53 | // Variants
54 | badges: {
55 | outlined: {
56 | apply: "bordered",
57 | backgroundColor: "background",
58 | color: "primary",
59 | padding: ["0.125rem", "0.375rem"],
60 | },
61 | },
62 | buttons: {
63 | outlined: {
64 | apply: "bordered",
65 | backgroundColor: "background",
66 | color: "primary",
67 | padding: ["0.625rem", "1.375rem"],
68 | "&:hover": {
69 | backgroundColor: "primary",
70 | color: colors.white,
71 | },
72 | },
73 | },
74 | layout: {
75 | card: {
76 | apply: "bordered",
77 | // backgroundColor: colors.white,
78 | boxShadow: ["none", "!important"],
79 | },
80 | },
81 | dialogs: {
82 | modal: {
83 | apply: "bordered",
84 | // backgroundColor: colors.white,
85 | },
86 | scrim: {
87 | backdropFilter: "blur(2px)",
88 | },
89 | },
90 | forms: {
91 | input: {
92 | apply: "bordered",
93 | backgroundColor: "background",
94 | "&:focus": {
95 | borderColor: "primary",
96 | },
97 | },
98 | select: {
99 | apply: "bordered",
100 | backgroundColor: "background",
101 | "&:focus": {
102 | borderColor: "primary",
103 | },
104 | },
105 | textarea: {
106 | apply: "bordered",
107 | backgroundColor: "background",
108 | "&:focus": {
109 | borderColor: "primary",
110 | },
111 | },
112 | },
113 | links: {
114 | dropdown: {
115 | apply: "bordered",
116 | backgroundColor: "background",
117 | },
118 | nav: {
119 | color: "primary",
120 | "&:hover": {
121 | backgroundColor: "muted",
122 | },
123 | // "&.is-active": {
124 | // backgroundColor: "highlight",
125 | // color: colors.white,
126 | // },
127 | },
128 | },
129 | styles: {
130 | hr: {
131 | backgroundColor: "primary",
132 | },
133 | // Additional helpers
134 | ".is-bordered": {
135 | apply: "bordered",
136 | },
137 | },
138 | };
139 |
--------------------------------------------------------------------------------
/packages/preset-noir/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/preset-noir",
3 | "version": "0.3.1",
4 | "description": "An elegant and classic theme for siimple.",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz/presets/noir",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "dependencies": {
14 | "@siimple/preset-base": "^0.3.1"
15 | },
16 | "keywords": [
17 | "siimple",
18 | "preset",
19 | "theme",
20 | "classic",
21 | "elegant"
22 | ],
23 | "files": [
24 | "index.js",
25 | "README.md"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/packages/presets/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/presets
2 |
3 | A collection of all official presets for **siimple**.
4 |
5 | ## Installation
6 |
7 | Use **npm** or **yarn** for adding this package to your project:
8 |
9 | ```bash
10 | $ yarn add @siimple/presets
11 | ```
12 |
13 | ## Usage
14 |
15 | Presets can be imported from this package to your `siimple.config.js` file:
16 |
17 | ```js
18 | import {base} from "@siimple/presets";
19 |
20 | export default {
21 | ...base,
22 | // ...other custom configuration
23 | };
24 | ```
25 |
26 | The following presets can be imported:
27 |
28 | - [base](https://www.siimple.xyz/presets/base).
29 | - [dark](https://www.siimple.xyz/presets/dark).
30 | - [ice](https://www.siimple.xyz/presets/ice).
31 | - [mustard](https://www.siimple.xyz/presets/mustard).
32 | - [noir](https://www.siimple.xyz/presets/noir).
33 |
34 |
35 | # License
36 |
37 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
38 |
--------------------------------------------------------------------------------
/packages/presets/index.js:
--------------------------------------------------------------------------------
1 | export {default as base} from "@siimple/preset-base";
2 | export {default as dark} from "@siimple/preset-dark";
3 | export {default as ice} from "@siimple/preset-ice";
4 | export {default as mustard} from "@siimple/preset-mustard";
5 | export {default as noir} from "@siimple/preset-noir";
6 |
--------------------------------------------------------------------------------
/packages/presets/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/presets",
3 | "version": "0.3.1",
4 | "description": "A collection of presets for siimple.",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "dependencies": {
14 | "@siimple/preset-base": "^0.3.1",
15 | "@siimple/preset-dark": "^0.3.1",
16 | "@siimple/preset-ice": "^0.3.1",
17 | "@siimple/preset-mustard": "^0.3.1",
18 | "@siimple/preset-noir": "^0.3.1"
19 | },
20 | "keywords": [
21 | "siimple",
22 | "presets",
23 | "theme"
24 | ],
25 | "files": [
26 | "index.js",
27 | "README.md"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/packages/standalone/README.md:
--------------------------------------------------------------------------------
1 | # @siimple/standalone (Experimental)
2 |
3 | Standalone script for using **siimple** directly in browser.
4 |
5 | > **Note**: this is an experimental package. API may change at any time. **Please do not use it in production**.
6 |
7 | ## When to use @siimple/standalone
8 |
9 | You should normally not use `@siimple/standalone` and use instead the CLI or the PostCSS plugin to generate a CSS file with the **siimple** styles.
10 |
11 | However, there are some valid use cases:
12 |
13 | - For rapid prototyping and development purposes: you can get started with **siimple** without any additional setup, just including a simple `
26 | ```
27 |
28 | > **NOTE**: remember to add the `type="module"` attribute in the `
43 |
44 |
45 |
50 | ```
51 |
52 | You can import additional packages to customize your theme. All packages will be imported automatically from the [esm.sh](https//esm.sh) CDN service:
53 |
54 | ```html
55 |
63 | ```
64 |
65 | Using an external script is also supported:
66 |
67 | ```html
68 |
69 | ```
70 |
71 | ## Prevent Flash of Unstyled Content
72 |
73 | You can prevent the common [Flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) effect in your webpage by adding a new `
80 |
81 |
82 |
83 |
84 |
85 | ```
86 |
87 | After **siimple** is compiled, it will automatically reset this class and display the content of your body styled.
88 |
89 | ## License
90 |
91 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
92 |
--------------------------------------------------------------------------------
/packages/standalone/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | @siimple/standalone example
4 |
5 |
6 |
7 |
15 |
16 |
17 |
18 |
19 |
20 | Hello world
21 |
22 |
--------------------------------------------------------------------------------
/packages/standalone/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@siimple/standalone",
3 | "version": "0.3.1",
4 | "description": "Build siimple CSS directly in your browser",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": "./index.js",
13 | "keywords": [
14 | "siimple",
15 | "css",
16 | "browser"
17 | ],
18 | "files": [
19 | "index.js",
20 | "README.md"
21 | ],
22 | "engines": {
23 | "node": ">=14"
24 | },
25 | "dependencies": {
26 | "@siimple/core": "^0.3.1",
27 | "@siimple/modules": "^0.3.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/playground/actions/playground.js:
--------------------------------------------------------------------------------
1 | import lzString from "lz-string";
2 |
3 | // Compress and decompress string
4 | const compressStr = str => lzString.compressToBase64(str);
5 | const decompressStr = str => lzString.decompressFromBase64(str);
6 |
7 | // Load playground content from source
8 | export const loadPlayground = content => {
9 | return new Promise((resolve, reject) => {
10 | const query = new URLSearchParams(window.location.hash.substr(1) || "");
11 | // Check for playground data encoded in URL
12 | if (query.has("html") || query.has("config")) {
13 | if (query.has("html")) {
14 | content.html = decompressStr(query.get("html"));
15 | }
16 | if (query.has("config")) {
17 | content.config = decompressStr(query.get("config"));
18 | }
19 | }
20 | // Check for data in localStorage
21 | // else {
22 | // content.html = localStorage.getItem(htmlSymbol) || content.html;
23 | // content.config = localStorage.getItem(configSymbol) || content.config;
24 | // }
25 | return resolve(content);
26 | });
27 | };
28 |
29 | // Save playground content in local storage
30 | export const savePlayground = content => {
31 | // localStorage.setItem(htmlSymbol, content.html || "");
32 | // localStorage.setItem(configSymbol, content.config || "");
33 | };
34 |
35 | // Share the playground code via URL
36 | export const sharePlayground = content => {
37 | return Promise.resolve().then(() => {
38 | const query = new URLSearchParams();
39 | // Check for custom version
40 | // if (content.version !== "latest") {
41 | // query.set("version", "latest");
42 | // }
43 | query.set("html", compressStr(content.html));
44 | query.set("config", compressStr(content.config));
45 | // return `${window.location.origin}#${query.toString()}`;
46 | return `${window.location.href}#${query.toString()}`;
47 | });
48 | };
49 |
50 | // Save playground in JSON format
51 | export const exportPlayground = content => {
52 | // const data = JSON.stringify({
53 | // html: content.html || "",
54 | // config: content.config || "",
55 | // version: sandbox.version || "latest",
56 | // });
57 | // const fileContent = URL.createObjectURL(new Blob([data], {
58 | // type: "application/json",
59 | // }));
60 | // const fileName = `playground-${kofi.timestamp("YYYY-MM-DD")}.json`;
61 | // return kofi.downloadFile(fileName, fileContent);
62 | };
63 |
--------------------------------------------------------------------------------
/playground/actions/worker.js:
--------------------------------------------------------------------------------
1 | // Compile siimple
2 | export const compile = (worker, config) => {
3 | return new Promise(resolve => {
4 | const id = Math.random().toString(36).slice(2, 9) + Date.now().toString(36);
5 | const onMessage = event => {
6 | if (event.data?.id === id) {
7 | worker.removeEventListener("message", onMessage);
8 | return resolve(event.data);
9 | }
10 | };
11 | worker.addEventListener("message", onMessage);
12 | worker.postMessage({
13 | id: id,
14 | config: config,
15 | })
16 | });
17 | };
18 |
--------------------------------------------------------------------------------
/playground/components/Brand.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classNames from "classnames";
3 |
4 | export const Brand = props => {
5 | const parentClass = classNames({
6 | "is-not-underlined": true,
7 | "has-text-dark": props.theme === "light",
8 | "has-text-white": props.theme === "dark",
9 | });
10 | return (
11 |
12 |
14 | );
15 | };
16 |
17 | Brand.defaultProps = {
18 | url: "/",
19 | target: "_self",
20 | theme: "light",
21 | };
22 |
--------------------------------------------------------------------------------
/playground/components/Button.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classNames from "classnames";
3 |
4 | export const Button = props => {
5 | const buttonClass = classNames({
6 | "is-flex has-items-center is-clickable is-rounded has-p-2 has-ml-2": true,
7 | "has-text-light has-text-primary-hover": !props.active && props.theme === "dark",
8 | "has-text-dark has-text-primary-hover": !props.active && props.theme === "light",
9 | "has-bg-primary has-text-white": !!props.active,
10 | });
11 | return (
12 |
13 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/playground/components/Editor.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classNames from "classnames";
3 |
4 | export const Editor = React.forwardRef((props, ref) => {
5 | const editorClass = classNames({
6 | "CodeCake has-w-full has-h-full has-p-none is-clipped": true,
7 | "CodeCake-dark has-bg-dark": props.theme === "dark",
8 | "CodeCake-light has-bg-light": props.theme === "light",
9 | });
10 | return (
11 |
14 | );
15 | });
16 |
--------------------------------------------------------------------------------
/playground/components/FileTab.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classNames from "classnames";
3 |
4 | export const FileTab = props => {
5 | const tabClass = classNames({
6 | "navlink has-text-center has-w-auto has-mr-2 has-pl-4 has-pr-4": true,
7 | "is-flex has-items-center": true,
8 | "has-text-highlight-hover": !props.active && props.theme === "dark",
9 | "has-bg-primary has-text-white has-text-white-hover": props.active,
10 | });
11 |
12 | return (
13 |
14 | {/* {props.text}
16 |
17 | );
18 | };
19 |
20 |
--------------------------------------------------------------------------------
/playground/components/Preview.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const Preview = React.forwardRef((props, ref) => {
4 | return React.createElement("iframe", {
5 | ref: ref,
6 | style: {
7 | width: "100%",
8 | height: "100%",
9 | border: "0",
10 | backgroundColor: "#ffffff",
11 | },
12 | sandbox: "allow-scripts allow-same-origin",
13 | scrolling: "yes",
14 | src: `${process.env.PUBLIC_PATH}playground.html`,
15 | onLoad: props.onLoad,
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/playground/components/ShareModal.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | // Share modal
4 | export const ShareModal = props => {
5 | const [copied, setCopied] = React.useState(false);
6 | const handleCopyClick = () => {
7 | navigator.clipboard.writeText(props.url).then(() => {
8 | setCopied(true);
9 | });
10 | };
11 |
12 | return (
13 |
14 |
15 |
19 |
You can use the following URL for sharing your code:
20 |
21 |
27 |
28 |
handleCopyClick()}
31 | >
32 | {copied ? "Copied!" : "Copy to clipboard"}
34 |
35 |
36 |
4 |
9 |
10 | The minimal and themeable CSS toolkit.
11 |
12 |
13 | www.siimple.xyz
14 |
15 |
<%= htmlWebpackPlugin.options.title %>
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "siimple-playground",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "Online editor for siimple",
6 | "author": "Josemi Juanes ",
7 | "license": "MIT",
8 | "homepage": "https://www.siimple.xyz/",
9 | "repository": "https://github.com/jmjuanes/siimple",
10 | "bugs": "https://github.com/jmjuanes/siimple/issues",
11 | "scripts": {
12 | "build": "rm -rf ./public && webpack build --config ./webpack.config.js"
13 | },
14 | "dependencies": {
15 | "@babel/core": "^7.17.8",
16 | "@babel/plugin-transform-react-jsx": "^7.17.3",
17 | "@babel/plugin-transform-runtime": "^7.17.0",
18 | "@babel/preset-env": "^7.16.11",
19 | "@babel/preset-react": "^7.16.7",
20 | "babel-loader": "^8.2.3",
21 | "classnames": "^2.3.2",
22 | "codecake": "^0.0.3",
23 | "copy-webpack-plugin": "^10.2.4",
24 | "html-webpack-plugin": "^5.5.0",
25 | "lz-string": "^1.4.4",
26 | "react": "^17.0.2",
27 | "react-dom": "^17.0.2",
28 | "webpack": "^5.69.0",
29 | "webpack-cli": "^4.9.2"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/playground/playground.html:
--------------------------------------------------------------------------------
1 |
2 | Playground template
3 |
8 |
28 |
29 |
--------------------------------------------------------------------------------
/playground/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const webpack = require("webpack");
3 | const HtmlWebpackPlugin = require("html-webpack-plugin");
4 | const CopyPlugin = require("copy-webpack-plugin");
5 | const package = require("../package.json");
6 |
7 | const PLAYGROUND_ONLY = process.env?.PLAYGROUND_ONLY === "true";
8 | const publicPath = !PLAYGROUND_ONLY ? "/playground/" : "/";
9 |
10 | module.exports = {
11 | mode: "production",
12 | target: "web",
13 | entry: path.join(__dirname, "App.jsx"),
14 | output: {
15 | path: path.join(__dirname, "public"),
16 | publicPath: publicPath,
17 | filename: "[contenthash:9].js",
18 | },
19 | // resolve: {
20 | // alias: {
21 | // "@siimple/colors": path.resolve(__dirname, "../packages/colors/"),
22 | // "@siimple/core": path.resolve(__dirname, "../packages/core/"),
23 | // "@siimple/modules": path.resolve(__dirname, "../packages/modules/"),
24 | // "@siimple/preset-theme": path.resolve(__dirname, "../packages/preset-theme/"),
25 | // },
26 | // },
27 | module: {
28 | rules: [
29 | {
30 | // Parse JSX using babel
31 | // BUT: ignore all .js files in node_modules and bower_components folders
32 | test: /\.(js|jsx)$/,
33 | include: [
34 | __dirname,
35 | ],
36 | exclude: /(node_modules|bower_components)/,
37 | loader: "babel-loader",
38 | options: {
39 | presets: [
40 | "@babel/preset-env",
41 | "@babel/preset-react",
42 | ],
43 | plugins: [
44 | "@babel/plugin-transform-react-jsx",
45 | "@babel/plugin-transform-runtime",
46 | ],
47 | },
48 | },
49 | ],
50 | },
51 | plugins: [
52 | new webpack.DefinePlugin({
53 | "process.env.VERSION": JSON.stringify(package.version),
54 | "process.env.HOMEPAGE_URL": JSON.stringify(package.homepage),
55 | // "process.end.SIIMPLE_VERSION": JSON.stringify(siimpleVersion),
56 | "process.env.PUBLIC_PATH": JSON.stringify(publicPath),
57 | }),
58 | new CopyPlugin({
59 | patterns: [
60 | path.resolve(__dirname, "../siimple/siimple.css"),
61 | path.resolve(__dirname, "../siimple-icons/siimple-icons.css"),
62 | path.resolve(__dirname, "../node_modules/codecake/codecake.css"),
63 | "playground.html",
64 | ],
65 | }),
66 | new HtmlWebpackPlugin({
67 | title: "Siimple Playground",
68 | template: path.join(__dirname, "index.html"),
69 | meta: {
70 | viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
71 | },
72 | }),
73 | ],
74 | };
75 |
--------------------------------------------------------------------------------
/playground/worker.js:
--------------------------------------------------------------------------------
1 | import {css} from "@siimple/core";
2 | import colors from "@siimple/colors";
3 | import {injectModules} from "@siimple/modules";
4 | import * as presets from "@siimple/presets";
5 |
6 | const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
7 |
8 | // Available modules from siimple
9 | const modules = {
10 | "colors": colors,
11 | "preset-base": presets.base,
12 | "preset-dark": presets.dark,
13 | "preset-ice": presets.ice,
14 | "preset-mustard": presets.mustard,
15 | "preset-noir": presets.noir,
16 | };
17 |
18 | let prevConfig = null;
19 | let prevCss = null;
20 |
21 | // Evaluate configuration
22 | const evaluateConfig = configStr => {
23 | return Promise.resolve().then(() => {
24 | const configCode = configStr
25 | .replace(/import\s*(.*?)\s*from\s*(['"])@siimple\/(.*?)(\.js)?\2(;)?/g, `const $1 = __require("$3");`)
26 | .replace(/export default /, "return ");
27 |
28 | // Custom require function
29 | const __require = name => modules[name];
30 | const fn = new AsyncFunction("__require", configCode);
31 | return fn(__require);
32 | });
33 | };
34 |
35 | // Register worker message listener
36 | self.addEventListener("message", event => {
37 | if (!event.data?.id || !event.data?.config) {
38 | return null;
39 | }
40 | if (event.data.config === prevConfig) {
41 | return self.postMessage({
42 | id: event.data.id,
43 | css: prevCss,
44 | });
45 | }
46 | evaluateConfig(event.data.config)
47 | .then(config => css(injectModules(config)))
48 | .then(result => {
49 | prevConfig = event.data.config;
50 | prevCss = result;
51 | return self.postMessage({
52 | id: event.data.id,
53 | css: result,
54 | });
55 | })
56 | .catch(error => {
57 | return self.postMessage({
58 | id: event.data.id,
59 | error: error,
60 | });
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/siimple-icons/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | [](https://npmjs.com/package/siimple-icons)
4 | [](https://github.com/jmjuanes/siimple/discussions)
5 | [](https://github.com/jmjuanes/siimple)
6 |
7 | > **siimple-icons**: a collection of Pure CSS and Open-Source icons for the **siimple** CSS toolkit.
8 |
9 | ## Links
10 |
11 | - Documentation: https://www.siimple.xyz/icons.
12 | - Report a bug or request a feature: https://github.com/jmjuanes/siimple/issues.
13 | - Get help: https://github.com/jmjuanes/siimple/discussions.
14 |
15 | ## Install
16 |
17 | Add **siimple-icons** to your project running the following command:
18 |
19 | ```bash
20 | $ npm install --save siimple-icons
21 | ```
22 |
23 | Or include the icons stylesheet in your HTML file using our CDN:
24 |
25 | ```html
26 | ` element and using the icon ID as the fragment identifier. You can customize the icon color using the `stroke` attribute or the icon size using `width` and `height`:
48 |
49 | ```html
50 |
51 |
53 | ```
54 |
55 | ## License
56 |
57 | [MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
58 |
--------------------------------------------------------------------------------
/siimple-icons/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmjuanes/siimple/d7462401daa96ffe79808db26678bfc349934650/siimple-icons/header.png
--------------------------------------------------------------------------------
/siimple-icons/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "siimple-icons",
3 | "version": "4.3.1",
4 | "description": "Open source icons for siimple",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz/icons",
11 | "dependencies": {
12 | "@siimple/icons": "^0.3.1"
13 | },
14 | "keywords": [
15 | "siimple",
16 | "icons"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/siimple-icons/siimple.config.js:
--------------------------------------------------------------------------------
1 | import icons from "@siimple/icons";
2 |
3 | // Encode SVG for using in CSS
4 | // Based on https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
5 | const encodeSvg = str => {
6 | return str
7 | .replace(/"/g, "'")
8 | .replace(/%/g, "%25")
9 | .replace(/#/g, "%23")
10 | .replace(/{/g, "%7B")
11 | .replace(/}/g, "%7D")
12 | .replace(//g, "%3E");
14 | };
15 |
16 | // Generate SVG from path
17 | const generateSvgFromPath = path => {
18 | const items = [
19 | ``,
20 | ` `
22 | ];
23 | return encodeSvg(items.join(""));
24 | };
25 |
26 | export default {
27 | useRootStyles: false,
28 | useBorderBox: false,
29 | prefix: "si-",
30 | modules: [],
31 | styles: {
32 | '[class^="{{prefix}}"],[class*=" {{prefix}}"]': {
33 | alignSelf: "center",
34 | display: "inline-flex",
35 | lineHeight: "1",
36 | textRendering: "auto",
37 | verticalAlign: "-0.125em",
38 | },
39 | '[class^="{{prefix}}"]:before,[class*=" {{prefix}}"]:before': {
40 | content: "''",
41 | display: "inline-block",
42 | width: "1em",
43 | height: "1em",
44 | backgroundColor: "currentColor",
45 | },
46 | ...Object.fromEntries(Object.keys(icons).map(name => {
47 | const path = icons[name].path;
48 | const styles = {
49 | "--si-icon-path": `url("data:image/svg+xml;utf8,${generateSvgFromPath(path)}") no-repeat`,
50 | "mask": "var(--si-icon-path) no-repeat",
51 | "maskSize": "100% 100%",
52 | "-webkit-mask": "var(--si-icon-path) no-repeat",
53 | "-webkit-mask-size": "100% 100%",
54 | };
55 | return [`.{{prefix}}${name}:before`, styles];
56 | })),
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/siimple/index.js:
--------------------------------------------------------------------------------
1 | // Export the same API from @siimple/core
2 | export {css, mergeConfig, mergeStyles} from "@siimple/core";
3 | export {injectModules} from "@siimple/modules";
4 |
5 | // Export base theme
6 | export {default as base} from "@siimple/preset-base";
7 |
--------------------------------------------------------------------------------
/siimple/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "siimple",
3 | "version": "4.3.1",
4 | "description": "A minimal and themeable CSS framework for flat and clean designs.",
5 | "author": "Josemi Juanes ",
6 | "type": "module",
7 | "license": "MIT",
8 | "repository": "https://github.com/jmjuanes/siimple",
9 | "bugs": "https://github.com/jmjuanes/siimple/issues",
10 | "homepage": "https://www.siimple.xyz",
11 | "main": "index.js",
12 | "exports": {
13 | ".": "./index.js",
14 | "./postcss": "./postcss.cjs",
15 | "./postcssPlugin": "./postcss.cjs"
16 | },
17 | "dependencies": {
18 | "@siimple/cli": "^0.3.1",
19 | "@siimple/core": "^0.3.1",
20 | "@siimple/modules": "^0.3.1",
21 | "@siimple/postcss": "^0.3.1",
22 | "@siimple/preset-base": "^0.3.1"
23 | },
24 | "optionalDependencies": {
25 | "postcss": "^8.4.14"
26 | },
27 | "keywords": [
28 | "siimple",
29 | "flat",
30 | "minimal",
31 | "themeable",
32 | "css",
33 | "css-framework"
34 | ],
35 | "engines": {
36 | "node": ">=14"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/siimple/postcss.cjs:
--------------------------------------------------------------------------------
1 | // const fs = require("fs");
2 | const path = require("path");
3 | const postcss = require("postcss");
4 |
5 | const resolveConfig = configOrPath => {
6 | if (configOrPath) {
7 | // if (typeof configOrPath === "string" && fs.existsSync(configOrPath)) {
8 | if (typeof configOrPath === "string") {
9 | const configPath = path.resolve(process.cwd(), configOrPath);
10 | return import(configPath).then(config => config.default);
11 | }
12 | else if (typeof configOrPath === "object") {
13 | return Promise.resolve(configOrPath);
14 | }
15 | }
16 | return Promise.resolve({}); // No configuration provided
17 | };
18 |
19 | const compileSiimple = config => {
20 | const allImports = [
21 | import("@siimple/core"),
22 | import("@siimple/modules"),
23 | ];
24 | return Promise.all(allImports).then(imports => {
25 | const {css} = imports[0]; // import {css} from "@siimple/core";
26 | const {injectModules} = imports[1]; // import {injectModules} from "@siimple/modules";
27 | return css(injectModules(config));
28 | });
29 | };
30 |
31 | module.exports = configOrPath => ({
32 | postcssPlugin: "siimple",
33 | plugins: [
34 | root => {
35 | console.warn("[siimple/postcss] DEPRECATION NOTICE!");
36 | console.warn("[siimple/postcss] The 'siimple/postcss.cjs' module is deprecated. Please migrate to '@siimple/postcss' for full ESM integration.");
37 | console.warn("[siimple/postcss] Read more at https://www.siimple.xyz/packages/postcss");
38 | return resolveConfig(configOrPath)
39 | .then(config => compileSiimple(config))
40 | .then(styles => root.append(postcss.parse(styles)));
41 | },
42 | ],
43 | });
44 |
45 | module.exports.postcss = true;
46 |
--------------------------------------------------------------------------------
/siimple/siimple.config.js:
--------------------------------------------------------------------------------
1 | import theme from "@siimple/preset-base";
2 | // import colors from "@siimple/colors";
3 |
4 | export default {
5 | useRootStyles: true,
6 | useBorderBox: true,
7 | prefix: "",
8 | ...theme,
9 | styles: {},
10 | };
11 |
--------------------------------------------------------------------------------
/test/merge.test.js:
--------------------------------------------------------------------------------
1 | import {mergeStyles} from "../packages/core/index.js";
2 |
3 | describe("mergeStyles", () => {
4 |
5 | it("should merge two different styles", () => {
6 | const style1 = {
7 | display: "block",
8 | };
9 | const style2 = {
10 | position: "relative",
11 | };
12 | mergeStyles(style1, style2);
13 | expect(style1["display"]).toBe("block");
14 | expect(style1["position"]).toBe("relative");
15 | });
16 |
17 | it("should perform a deep clone of the same class names", () => {
18 | const style1 = {
19 | display: "block",
20 | "&.is-active": {
21 | display: "block",
22 | },
23 | };
24 | const style2 = {
25 | "&.is-active": {
26 | position: "relative",
27 | },
28 | "&.is-disabled": {
29 | display: "block",
30 | },
31 | };
32 | mergeStyles(style1, style2);
33 | expect(style1["display"]).toBe("block");
34 | expect(style1["&.is-active"]).not.toBeUndefined();
35 | expect(style1["&.is-active"]["display"]).toBe("block");
36 | expect(style1["&.is-active"]["position"]).toBe("relative");
37 | expect(style1["&.is-disabled"]).not.toBeUndefined();
38 | expect(style1["&.is-disabled"]["display"]).toBe("block");
39 | });
40 |
41 | it("should merge two @font-face definitions", () => {
42 | const style1 = {
43 | "@font-face": {
44 | "font-family": "'Font 1'",
45 | },
46 | };
47 | const style2 = {
48 | "@font-face": {
49 | "font-family": "'Font 2'"
50 | }
51 | };
52 | mergeStyles(style1, style2);
53 | expect(style1["@font-face"]).not.toBeUndefined();
54 | expect(style1["@font-face"]).toHaveLength(2);
55 | expect(style1["@font-face"][0]["font-family"]).toBe("'Font 1'");
56 | expect(style1["@font-face"][1]["font-family"]).toBe("'Font 2'");
57 | });
58 | });
59 |
60 |
61 |
--------------------------------------------------------------------------------
/test/mixins.test.js:
--------------------------------------------------------------------------------
1 | import {buildMixin} from "../packages/core/index.js";
2 |
3 | describe("buildMixin", () => {
4 | const theme = {
5 | test: {
6 | "default": {
7 | color: "red",
8 | },
9 | "basic": {
10 | color: "black",
11 | display: "none",
12 | },
13 | "circular1": {
14 | display: "none",
15 | apply: "test.circular2",
16 | },
17 | "circular2": {
18 | display: "block",
19 | apply: "test.circular1",
20 | },
21 | "list": {
22 | apply: ["test.default", "test.basic"],
23 | },
24 | "listCircular": {
25 | apply: ["test.default", "test.circular1"],
26 | },
27 | },
28 | };
29 | it("should apply styles defined in the mixin", () => {
30 | const initialStyles = {
31 | color: "white",
32 | apply: "test.basic",
33 | };
34 | const finalStyles = buildMixin(initialStyles, theme);
35 | expect(finalStyles.color).toBe("black");
36 | expect(finalStyles.display).toBe("none");
37 | });
38 | it("should throw an error if circular mixins are found", () => {
39 | expect.assertions(1);
40 | try {
41 | const styles = {
42 | display: "flex",
43 | apply: "test.circular1",
44 | };
45 | buildMixin(styles, theme);
46 | }
47 | catch (error) {
48 | const msg = "Circular mixins found: test.circular1->test.circular2->test.circular1"
49 | expect(error.message).toBe(msg);
50 | }
51 | });
52 | it("should apply nested styles", () => {
53 | const initialStyles = {
54 | color: "white",
55 | apply: "test",
56 | };
57 | const finalStyles = buildMixin(initialStyles, theme);
58 | expect(finalStyles.color).toBe("red");
59 | });
60 |
61 | it("should apply a list of mixins", () => {
62 | const initialStyles = {
63 | color: "white",
64 | apply: "test.list",
65 | };
66 | const finalStyles = buildMixin(initialStyles, theme);
67 | expect(finalStyles.color).toBe("black");
68 | expect(finalStyles.display).toBe("none");
69 | });
70 |
71 | it("should throw an error if circular mixins are found in the list of mixins", () => {
72 | expect.assertions(1);
73 | try {
74 | const styles = {
75 | display: "flex",
76 | apply: "test.listCircular",
77 | };
78 | buildMixin(styles, theme);
79 | }
80 | catch (error) {
81 | // const msg = "Circular mixins found: test.circular1->test.circular2->test.circular1"
82 | expect(error.message).toBeDefined();
83 | }
84 | });
85 | });
86 |
--------------------------------------------------------------------------------
/test/modules.test.js:
--------------------------------------------------------------------------------
1 | import {injectModules, createHelper} from "../packages/modules/index.js";
2 |
3 | describe("injectModules", () => {
4 | it("should exclude specific modules", () => {
5 | const config = injectModules({
6 | modules: {
7 | markup: false,
8 | },
9 | });
10 | expect(config.styles[".h1"]).toBeUndefined();
11 | });
12 |
13 | it("should include only specific modules", () => {
14 | const config = injectModules({
15 | modules: [
16 | "button",
17 | "alert",
18 | ],
19 | });
20 | expect(Object.keys(config.styles)).toHaveLength(2);
21 | });
22 |
23 | it("should exclude all modules if empty array is provided", () => {
24 | const config = injectModules({
25 | modules: [],
26 | });
27 | expect(Object.keys(config.styles)).toHaveLength(0);
28 | });
29 |
30 | it("should exclude all modules if 'false' value is provided", () => {
31 | const config = injectModules({
32 | modules: false,
33 | });
34 | expect(Object.keys(config.styles)).toHaveLength(0);
35 | });
36 |
37 | it("should exclude all modules if 'null' value is provided", () => {
38 | const config = injectModules({
39 | modules: null,
40 | });
41 | expect(Object.keys(config.styles)).toHaveLength(0);
42 | });
43 | });
44 |
45 | describe("createHelper", () => {
46 | it("should generate helpers from values", () => {
47 | const styles = createHelper({
48 | prefix: "has",
49 | shortcut: "text",
50 | properties: ["color"],
51 | values: {
52 | blue: "blue",
53 | white: "white",
54 | },
55 | });
56 | const keys = Object.keys(styles);
57 |
58 | expect(keys).toHaveLength(2);
59 | expect(keys[0]).toEqual(".has-text-blue");
60 | expect(keys[1]).toEqual(".has-text-white");
61 | });
62 |
63 | it("should generate helpers from scale", () => {
64 | const config = {
65 | fontSizes: ["1", "2", "3"],
66 | };
67 | const helper = {
68 | prefix: "has",
69 | shortcut: "size",
70 | properties: ["fontSize"],
71 | scale: "fontSizes",
72 | };
73 | const styles = createHelper(helper, config);
74 | const keys = Object.keys(styles);
75 |
76 | expect(keys).toHaveLength(3);
77 | keys.forEach((key, index) => {
78 | expect(key).toEqual(`.has-size-${index}`);
79 | expect(styles[key].fontSize?.[0]).toEqual(config.fontSizes[index]);
80 | });
81 | });
82 | });
83 |
--------------------------------------------------------------------------------
/test/standalone.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment jsdom
3 | */
4 |
5 | import {run, register} from "@siimple/standalone";
6 |
7 | const styleSelector = `style[data-source="siimple/standalone"]`;
8 | const styleCss = "/* siimple css style */";
9 |
10 | // Mock console.info
11 | jest.spyOn(console, "info").mockImplementation(() => "");
12 |
13 | // Mock @siimple/core
14 | register("@siimple/core", {
15 | css: () => styleCss,
16 | });
17 |
18 | // Mock @siimple/modules
19 | register("@siimple/modules", {
20 | injectModules: c => c,
21 | });
22 |
23 | describe("run", () => {
24 | it("should append a new