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

Releasing & publishing new versions to npm

We use the tool np (installed globally) for deploying new versions of the library.

When you're ready to deploy and your changes are pushed to master, run np --no-tests and it will walk you through the steps:

• Verifying tests pass
• Choosing a new version number
• Auto-tagging and release notes
• Publishing to NPM