ClearKit Hype

* Demo: https://ck-hype.netlify.app
* NPM: https://www.npmjs.com/package/@clearkit/hype

$3

This repo takes the Tailwind config and the CSS variables stylesheet from the
published clearkit-core npm package and uses them to generate a complete
CSS library, named clearkit-hype.

This CSS library includes atomic CSS utility classes, informed by the variables
from clearkit-core.css. It also uses these utility classes to construct helper
classes with the @apply Tailwind function.

The intention would be to publish clearkit-hype as a package on NPM, and make
the compiled stylesheet available on a CDN.

The build process in this repo also generates a front-end that documents the
classes in the library and demos the blueprints created by helper classes.

$3

1. Clone this repo.
2. Run $ yarn.
3. Run $ yarn start to build clearkit-hype.css, watch for changes, and serve
the front-end at http://localhost:5678.

$3

Running $ yarn start kicks off the following process:

``
npm-run-all -s clean -p postcss:watch parcel:serve
`

PostCSS takes the Tailwind config from /clearkit.config.js and builds the src/css
directory, importing the CSS helpers from src/css/helpers, inlining them in
src/css/clearkit-hype.css and then running the Tailwind directives to compile
to a single stylesheet named src/clearkit-hype.css.

Parcel then serves the front-end at http://localhost:5678 and reloads when it
detects changes in the CSS and HTML.

$3

By default clearkit-hype imports the Tailwind config from clearkit-core
and uses it for it's own Tailwind config file at /clearkit.config.js.

To replace or override properties from clearkit-core you can edit this file and
refer to the Tailwind docs. For example,
to add a magenta color that could be used with .text-my-custom-color and
.bg-my-custom-color you could write the following -

`
theme: {
colors: {
"my-custom-color": "#ff00ff",
...clearKitCore.theme.colors
}
}
`

$3

To compose new helper classes that can be used in blueprints, you could create
src/css/helpers/_ck-panel.css and src/blueprints/_ck-panel.html.

In _ck-panel.css you would write -

`
.ck-panel {
@apply bg-white shadow rounded-lg;
}
`

And you would document it's usage in _ck-panel.html with -

`



`

To add the blueprint to the front-end you would add the new partial to
src/blueprints.html as an include, which would get automatically get compiled
by posthtml as part of the parcel build process -

`

``