ClearKit Hype
npm install clearkit-hype* Demo: https://ck-hype.netlify.app
* NPM: https://www.npmjs.com/package/@clearkit/hype
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.
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.
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/csssrc/css/helpers
directory, importing the CSS helpers from , inlining them insrc/css/clearkit-hype.css and then running the Tailwind directives to compilesrc/clearkit-hype.css
to a single stylesheet named .
Parcel then serves the front-end at http://localhost:5678 and reloads when it
detects changes in the CSS and HTML.
By default clearkit-hype imports the Tailwind config from clearkit-core/clearkit.config.js
and uses it for it's own Tailwind config file at .
To replace or override properties from clearkit-core you can edit this file and.text-my-custom-color
refer to the Tailwind docs. For example,
to add a magenta color that could be used with and.bg-my-custom-color you could write the following -
``
theme: {
colors: {
"my-custom-color": "#ff00ff",
...clearKitCore.theme.colors
}
}
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 -
``
Here is my panel
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 compiledposthtml
by as part of the parcel build process -
```