Skip to content

Commit

Permalink
update to readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@woodcox
woodcox authored Apr 15, 2024
1 parent 2d6a31a commit 3dd3303
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 135 deletions.
29 changes: 26 additions & 3 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,21 +322,44 @@ You can add as many or as little of these as you like and call them whatever you
The utility class generator loops through `$gorko-config` looking for items that have a valid utility class structure. The following structure is required to generate a utility class:
**Example 1**
```scss
'width':('items':('full':'100%','half': '50%'
),
'output': 'standard',
'property': 'width'
),;
);
```
Or if you wish that ultity classes share the same key, the utility class generator will also accept the following structure:
**Example 2**
```scss
'bg':
(
(
'items': 'color',
'css-vars': true,
'output': 'standard',
'property': 'background-color'
),
(
'items': ('fixed': 'fixed', 'local': 'local', 'scroll': 'scroll'),
'output': 'responsive',
'property': 'background-attachment'
)
);
```
The first key is the name of the utility and that contains a Sass map. Inside that map, you need to have the following:
For example 1, the first key is the name of the utility and that contains a Sass map. Inside that map, you need to have the following:
- `items`: a map of key/value pairs which link a utility class to a CSS property’s value. If you want to use CSS Custom Properties, this should be the string key, referencing the `'css-vars'` `$gorko-config` group that you want to use
- `output`: this must be `responsive` or `standard`. If you set it to `responsive`, it will generate the same utility class for **every breakpoint that is defined**.
- `property`: the [CSS property](https://css-tricks.com/almanac/properties/) that this utility controls.
### Example outputs
For example 2, the same props are required: `utility class name key`, `items`, `output` and `property`. However within the utility class name key the props can be written as a list of sass maps.
### Example 1 outputs
The above structure would output the following utility classes:
Expand Down
264 changes: 132 additions & 132 deletions test/_override-config.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,22 +58,22 @@
)
)
),


/*** Background ***/
'bg-c': (
'items': 'color',
'css-vars': true,
'output': 'standard',
'property': 'background-color'
),
'color': (
'items': 'color',
'css-vars': true,
'output': 'standard',
'property': 'color'
),


/*** Background ***/
'bg': (
(
'items': 'color',
'css-vars': true,
'output': 'standard',
'property': 'background-color'
),
(
'items': (
'fixed': 'fixed',
Expand All @@ -97,149 +97,149 @@
),
'output': 'responsive',
'property': 'background-position'
)
),
/* testing
'bg': (
'items': (
'repeat': 'repeat',
'no-repeat': 'no-repeat',
'repeat-x': 'repeat-x',
'repeat-y': 'repeat-y',
'repeat-round': 'round',
'repeat-space': 'space'
),
(
'items': (
'repeat': 'repeat',
'no-repeat': 'no-repeat',
'repeat-x': 'repeat-x',
'repeat-y': 'repeat-y',
'repeat-round': 'round',
'repeat-space': 'space'
),
'output': 'responsive',
'property': 'background-repeat'
),
'bg': (
'items': (
'auto': 'auto',
'cover': 'cover',
'contain': 'contain',
'output': 'responsive',
'property': 'background-repeat'
),
(
'items': (
'auto': 'auto',
'cover': 'cover',
'contain': 'contain',
),
'output': 'responsive',
'property': 'background-size'
),
'bg': (
'items': (
'unset': 'unset',
'output': 'responsive',
'property': 'background-size'
),
(
'items': (
'unset': 'unset',
),
'output': 'responsive',
'property': 'background-color'
),
'bg': (
'items': (
'border': 'border-box',
'clip-content': 'content-box',
'clip-padding': 'padding-box',
'output': 'responsive',
'property': 'background-color'
),
(
'items': (
'border': 'border-box',
'clip-content': 'content-box',
'clip-padding': 'padding-box',

TO DO:
.bg-clip-text{
background-clip:text;
-webkit-background-clip:text;
color:transparent;
}
),
'output': 'responsive',
'property': 'background-clip'
/*TO DO:
.bg-clip-text{
background-clip:text;
-webkit-background-clip:text;
color:transparent;
} */
),
'output': 'responsive',
'property': 'background-clip'
)
),
*/

/*** Border ***/
/*
'border': (
'items': (
'solid': 'solid',
'dashed': 'dashed',
'dotted': 'dotted',
'double': 'double',
'none': 'none',
(
'items': (
'solid': 'solid',
'dashed': 'dashed',
'dotted': 'dotted',
'double': 'double',
'none': 'none',
),
'output': 'responsive',
'property': 'border-style'
),
'border': (
'items': (
'bs-none': 'none',
'output': 'responsive',
'property': 'border-style'
),
(
'items': (
'bs-none': 'none',
),
'output': 'responsive',
'property': 'border-block-start'
),
'border': (
'items': (
'be-none': 'none',
'output': 'responsive',
'property': 'border-block-start'
),
(
'items': (
'be-none': 'none',
),
'output': 'responsive',
'property': 'border-block-end'
),
'border': (
'items': (
'is-none': 'none',
'output': 'responsive',
'property': 'border-block-end'
),
(
'items': (
'is-none': 'none',
),
'output': 'responsive',
'property': 'border-inline-start'
),
'border': (
'items': (
'ie-none': 'none',
'output': 'responsive',
'property': 'border-inline-start'
),
(
'items': (
'ie-none': 'none',
),
'output': 'responsive',
'property': 'border-inline-end'
),
'border': (
'items': (
'0': '0px',
'1': '1px',
'2': '2px',
'3': '4px',
'output': 'responsive',
'property': 'border-inline-end'
),
(
'items': (
'0': '0px',
'1': '1px',
'2': '2px',
'3': '4px',
),
'output': 'responsive',
'property': 'border-width'
),
'border': (
'items': (
'bs0': '0px',
'bs1': '1px',
'bs2': '2px',
'bs3': '4px',
'output': 'responsive',
'property': 'border-width'
),
(
'items': (
'bs0': '0px',
'bs1': '1px',
'bs2': '2px',
'bs3': '4px',
),
'output': 'responsive',
'property': 'border-block-start-width'
),
'border': (
'items': (
'be0': '0px',
'be1': '1px',
'be2': '2px',
'be3': '4px',
'output': 'responsive',
'property': 'border-block-start-width'
),
(
'items': (
'be0': '0px',
'be1': '1px',
'be2': '2px',
'be3': '4px',
),
'output': 'responsive',
'property': 'border-block-end-width'
),
'border': (
'items': (
'is0': '0px',
'is1': '1px',
'is2': '2px',
'is3': '4px',
'output': 'responsive',
'property': 'border-block-end-width'
),
(
'items': (
'is0': '0px',
'is1': '1px',
'is2': '2px',
'is3': '4px',
),
'output': 'responsive',
'property': 'border-inline-start-width'
),
'border': (
'items': (
'ie0': '0px',
'ie1': '1px',
'ie2': '2px',
'ie3': '4px',
'output': 'responsive',
'property': 'border-inline-start-width'
),
(
'items': (
'ie0': '0px',
'ie1': '1px',
'ie2': '2px',
'ie3': '4px',
),
'output': 'responsive',
'property': 'border-inline-end-width'
'output': 'responsive',
'property': 'border-inline-end-width'
)
),
*/

/*** Radius ***/

/*** Radius ***/
// TO DO - Radius
'box': (
'items': (
'block': 'block',
Expand Down

0 comments on commit 3dd3303

Please sign in to comment.