@clearkit/one

ClearKit One

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-one.

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-one 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-one.css, watch for changes, and serve the front-end at http://localhost:8080.

Building clearkit-one.css

Running $ yarn start kicks off the following process:

npm-run-all -s clean -p postcss:watch docs

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-one.css and then running the Tailwind directives to compile to a single stylesheet named dist/clearkit-one.css.

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

Extend Tailwind config

By default clearkit-one 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 docs/_includes/blueprints/_ck-panel.hbs 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 docs/blueprints.hbs as an include, which would get automatically get compiled by eleventy as part of its build process.

{{> blueprints/ck-fields }}