pnx-mixtape-coverart
v1.0.0-alpha.23
Published
A custom twig buidler for KSS node.
Downloads
736
Keywords
Readme
Builder for kss-node, designed by PreviousNext
Requires KKS-node 3.0.x
This is a custom builder for kss-node living styleguide.
Custom properties
This template supports a couple of custom
properties which need to be added to your projects
kssOptions
in order to access utilise them. Custom properties can be added to the CSS files doc comment.
const kssOptions = {
...
builder: pnx-mixtape-coverart,
custom: [
'wrapper',
'default',
'wide',
],
...
};
The options are;
wrapper
- add any class to the example div, works nicely for ‘container’ classes that you don’t really want inside
the markup, but are necessary for making the grid align nicely.
eg. // Wrapper: page-container
default
- hides the default example and only shows modifiers.
eg. // Default: false
wide
- removes horizontal padding from the example div for components that should extend past the container.
eg. // Wide: true
Script type=module
To support modern ES6 modules, a new mjs
option is now available. Simply list these javascript files in the kssOptions
:
const kssOptions = {
...
builder: pnx-mixtape-coverart,
css: [...],
js: [...],
mjs: [
'relative/path/to/module.js',
'relative/path/to/anothermodule.js'
],
...
};
Any javascript files loaded by the mjs
option will be output with <script type="module" src="path/to/file.js"></script>
.
How to apply this builder
- Install kss-node. Type
npm install kss
ornpm install -g kss
for global CLI. - Install this template
npm install pnx-mixtape-coverart@alpha
- Run
kss-node
command with--builder
option, like below.
kss-node <sourcedir> --builder path/to/pnx-mixtape-coverart