@paramour/css

Parametric CSS for the modern age

Contents:

- Installation & usage
- Standalone usage
- For Enhance
- Overview
- What is parametric CSS?
- Optional classes
- Prior art
- Customization
- Migrating from Enhance Styles
- Further documentation

Installation and usage

$3

Paramour can be used as a standalone library in any project or framework that allows for the insertion of arbitrary CSS files. The built-in CLI can be used both to generate CSS files for use, and in more complex application pipelines to (re)generate CSS as required.

The steps below demonstrate the basic usage of the CLI, which can be used as a starting point for more advanced used cases.

To begin, install Paramour from NPM:
``shell
npm i @paramour/css
`

With the package installed, you can now interact with its CLI via the use of npx. For example, to generate your styles at the path ./public/paramour.css using the default configuration:

`shell
npx paramour --output=./public/paramour.css
`

To generate styles using a custom configuration, use the --config parameter:

`shell
npx paramour --config=./styleguide.mjs --output=./public/paramour.css
`

The CLI can also be used more programmatically by including it as a script in your package manifest:

`json
{
"scripts": {
"paramour": "paramour --config=./styleguide.mjs output=./public/paramour.css"
}
}
`

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

$3

Paramour works seamlessly with Enhance apps via its Architect plugin.

To get started, install the Paramour CSS plugin:
`shell
npm i @paramour/arc-plugin-paramour-css
`

Next, add the plugin in your project’s .arc file:
`arc
@app
my-app

Define your plugins pragma and add the Paramour CSS plugin

@plugins
paramour/arc-plugin-paramour-css

Enable the plugin

@paramour-css

Optionally use a custom configuration file

config ./styleguide.mjs
`

Finally, include the generated styles in your project’s head.mjs file:

`javascript
import { getStyles } from '@paramour/arc-plugin-paramour-css'

// create an object with the generated stlyes in multiple formats
const styles = getStyles.all()

// Choose your preferred method for including styles:
const link = styles.link // a tag pointing to your generated styles
const style = styles.style // a