CSSKit is a toolbox for stylesheets. The purpose of this is to provide ways to get manipulate and visualise parts of your CSS. This has been built very much from the perspective of a having a lot of large, legacy stylesheets. The project is a work in progress and very early in development, the existing tools will be extended and new tools will be added, as well as general improvements made to the site as and when I get time.
Rainbow
Rainbow takes all the colours (Hex, RGB and HSL) from your uploaded stylesheets and present them as dots on the screen. This is useful to visualise your "colour stack" and have an easy way to share it with interested parties.
CoCo - Contextless Comments
CoCo is a very simple tool the extracts and displays all comments found in your stylesheets, with a total count. The comments are displayed without any context in regards to where they are in the stylesheet, hence the name. This tool was only created as a side effect of creating the comment parser really, but hey, someone may find it useful.
nanonow
nanonow is a simple, pre-configured, portable way to minify your CSS. The tool uses postcss + cssnano to perform the minification, using preset configuration provided by cssnano.
Remmy
Remmy is a tool that converts the pixel and point values found in your stylesheets to rem values, and returns you a downloadable converted stylesheet. This is useful if you are aiming to start introducing responsiveness into a legacy app, as incrementally introducing responsiveness with rem values when amongst pixel and point values can cause more harm than good.
[Coming soon] Propper
Propper will be able to replace all the colours found in your CSS with custom properties (aka CSS variables), present you with an editable list of the custom properties, and then allow you to download your CSS with the replaced custom properties and your new stylesheet containing your custom properties.
This is to provide an easy way to manage colours across a large number of stylesheets, and extend how you need to going.
Technologies used
This project also uses:
- ColorTranslator to convert parsed colours to HSL for effective deduping
- cssnano to perform CSS minification in the nanonow tool
- PostCSS for the app itself as well as running the minification as a plugin in the nanonow tool
Developing
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
To create a production version of your app:
npm run build
You can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.
