Skip to content

Commit

Permalink
Add overview
Browse files Browse the repository at this point in the history
  • Loading branch information
colepeters committed Jul 5, 2024
1 parent 2832d5b commit 8db2f8a
Showing 1 changed file with 31 additions and 2 deletions.
33 changes: 31 additions & 2 deletions v7/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ Contents:
- [Installation & usage](#installation-and-usage)
- [For Enhance](#for-enhance)
- [Standalone usage](#standalone-usage)
- Overview
- Customization
- [Overview](#overview)
- [What is parametric CSS?](#what-is-parametric-css)
- [Customization](#customization)
- Further documentation
- Prior art

For further guidance and documentation, refer to [the Enhance Styles microsite](?)

## Installation and usage

### For Enhance
Expand Down Expand Up @@ -100,3 +103,29 @@ The CLI can also be used more programmatically by including it as a script in yo
```

This script can be run just like any other NPM script, using `npm run enhance-styles`. This can then be factored into other processes in your application pipeline if required.

## Overview

Enhance Styles is a configurable CSS toolkit for generating CSS that adheres to the principles of an approach we refer to as *parametric CSS*, and which is optimized for performance, versatility, and scalability.

### What is parametric CSS?

‘Parametric CSS’ is a term we use to refer to our particular approach of authoring CSS. We consider our approach to be an incremental evolution of existing CSS methodologies, based on many years of research and usage.

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…).
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.

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 further guidance on working with Enhance Styles, refer to [the Enhance Styles microsite](?)

# Customization

0 comments on commit 8db2f8a

Please sign in to comment.