Skip to content

Commit

Permalink
WIP customization
Browse files Browse the repository at this point in the history
  • Loading branch information
colepeters committed Jul 15, 2024
1 parent 8c0638c commit 29e3c18
Showing 1 changed file with 18 additions and 3 deletions.
21 changes: 18 additions & 3 deletions v7/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,18 +114,33 @@ Enhance Styles is a configurable CSS toolkit for generating CSS that adheres to

In short, we define parametric CSS as follows:

1. Parametric CSS is derived from a **configurable styleguide** that constrains the central characteristics of a design language to a predefined set of values (for example: font sizes, spacing intervals, a colour palette…).
1. Parametric CSS is derived from a **configurable styleguide** that constrains the central characteristics of a design language to a predefined set of values (for example: font sizes, spacing intervals, a color palette…).
2. Parametric CSS generates discrete, single purpose units of style that are **composable** (single units can be combined to build complex designs), **complementary** (units implement one style and one style only, and thus do not interact or introduce side effects), and **constant** (the style a unit implements does not change unless the configuration is updated). These units of style can be in the form of classes, classes utilizing custom properties, or custom properties on their own.
3. Parametric CSS serves as a base for **design systems and global styles**. While it can be used to apply those styles to discrete components, it is not intended to create bespoke styles local to specific components. Other CSS methodologies can be used in tandem for these design challenges, while relying on parametric CSS as a common baseline for performance, scalability, and versatility.

By referring to our approach as parametric CSS rather than by the name (or a modification of) an existing methodology, we’re not looking to disregard the important, category defining work of other authors, but rather to clarify and assert the principles behind our approach.

Our modelling of parametric CSS draws on the work of designers and developers such as [Tim Brown](https://tbrown.org/) (and his work on [modular type on the web](https://alistapart.com/article/more-meaningful-typography/)), [Adam Morse](https://mrmrs.cc/) ([Tachyons](https://tachyons.io/), [Components AI](https://components.ai/)), [Brent Jackson](https://jxnblk.com/) ([Theme UI](https://theme-ui.com/)), and [James Gilyead](https://www.hustlersquad.net/) & [Trys Mudford](https://www.trysmudford.com/) ([Utopia](https://utopia.fyi/)), among others.

### Available in two flavours

Out of the box, Enhance Styles provides a wide base of parametric single purpose classes and custom properties that can be used as a global styling system. These classes and custom properties are derived from a fully configurable styleguide, making Enhance Styles ideal for use with new and preexisting design systems and brand standards.

For those who wish to construct their own CSS classes, Enhance Styles can be configured to emit only custom properties for use in application stylesheets. This allows authors to leverage its parametric configurability (and its automation of creating fluid scales, colour palettes, etc) while utilizing whatever additional CSS methodology they feel most comfortable with.
For those who wish to construct their own CSS classes, Enhance Styles can be configured to emit *only* custom properties, which can be used in your own application stylesheets. This allows authors to leverage its parametric configurability (and its automation of creating fluid scales, color palettes, etc) while utilizing whichever CSS methodologies they feel most comfortable with.

For further guidance on working with Enhance Styles, refer to [the Enhance Styles microsite](?)

# Customization
## Customization

Enhance Styles’ generated custom properties and classes can be configured to your liking, making it extremely suitable for integration with new and existing design systems and brand guidelines.

Customization of Enhance Styles is managed via a configuration file; see [Installation and usage](#installation-and-usage) for guidance on how to specify the configuration file based on how you’re using Enhance Styles.

The configuration file must provide an object as its default export. The properties of this configuration object are documented below.

| Property | Description | Type | Default |
|-|-|-|
| `classes` | Enable to include single purpose classes in Enhance Styles’ output; disable to only emit custom properties | boolean | `true` |
| `reset` | Enable to include a CSS reset with Enhance Styles’ output; disable to exclude it | boolean | `true` |
| `borders` | -|-|-|
| `borders.radii` | Values to use for border radius properties and classes | array of strings and/or numbers |

0 comments on commit 29e3c18

Please sign in to comment.