@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 spin up the Next.js app, which watches for changes, compiles clearkit-one.css and serves the front-end at http://localhost:3000.

Developing clearkit-one.css

Running $ yarn start kicks off the following process:

npm-run-all -s clean -p docs:dev

Since Next.js has first-class support for PostCSS, it's responsible for compiling the contents of src/css/clearkit-one.css and injecting it into the application.

As you add utility classes, components, etc., the Next.js app should reload automatically (courtesy of its hot-module reloading).

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

[TODO]