colette-kss-builder's Introduction

Colette kss-builder

Custom Twig.js builder for kss-node designed for Colette.

Custom KSS rules added

KSS is great but some options are missing.

Symbols

To document SVG symbols

// SVG symbols
//
// A collection of svg symbols built with [svgstore](https://www.npmjs.com/package/svgstore).
//
// Symbols: **/*.svg in ../../svg/
//
// Style guide: Symbols

A new option is added to KSS to include SVG symbols bundle in KSS template.

module.exports = {
  svgSprite: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 32 32" id="symbol-social-youtube" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 8.3c-.4-1.4-1.4-2.4-2.8-2.8-2.4-.7-12.5-.7-12.5-.7s-10 0-12.5.7C2.1 5.9 1.1 6.9.7 8.3.2 10.8 0 13.4 0 16c0 2.6.2 5.2.7 7.7.4 1.4 1.4 2.4 2.8 2.8 2.5.7 12.5.7 12.5.7s10 0 12.5-.7c1.4-.4 2.4-1.4 2.8-2.8.5-2.5.7-5.1.7-7.7 0-2.6-.2-5.2-.7-7.7zM12.8 20.8v-9.6l8.4 4.8-8.4 4.8z"/></symbol></svg>`,
  svgPrefix: 'symbol',
}

It’s recommanded to use a tool to build your svg sprite.

Integrate your local version into Colette

Run npm pack to generate a compressed .tgz file of the project (e.g colette-kss-builder-5.4.0.tgz) on the root of the project
On Colette's side, point to that file on the package.json and run npm install
/!\ Be careful to not commit this file and/or the colette-kss-file path

colette-kss-builder's People

Contributors

Stargazers

Watchers

colette-kss-builder's Issues

Make Colette-kss-builder more universal

Colette-kss-builder is a nice Kss builder but branded as 20 Minutes.
We should move every brand elements as config to Make it more reusable for open source project.

Dark-mode choose should be saved

It's painful to click on the button at each refresh.

Prefix every css custom properties

To avoid conflict with css custom properties of documented css we should prefix all of theme.
Idealy by a post processer but currently postcss-prefix-variables do not exist.

Recommend Projects