ClearKit Hype

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

What's happening in this repo?

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.

Initial setup

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.

Building clearkit-hype.css

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.

Extend Tailwind config

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
  }
}

Write new blueprints

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 -

<div class="ck-panel">
  Here is my panel
</div>

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 -

<include src="blueprints/_ck-panel.html"></include>