Starterkits are a potent way create or augment a Pattern Lab instance with a baseline set of patterns and assets. They are an important part of the Pattern Lab Ecosystem An agency or team could use it for each new client or project. Several starterkits already exist to kick your project off, whether you’re looking for a blank start, begin with a demo that showcases Pattern Lab’s features, or start with a popular framework like Bootstrap, Foundation, or Material Design.
A Starterkit's structure mirrors that of the default file structure of Pattern Lab. Usually this is found under the
_annotations/ _data/ _meta/ _patterns/ css/ fonts/ images/ js/ favicon.ico
Teams constructing their own Starterkits should stick to this structure if they wish to publish it externally, else may alter the structure to their configured
Open your terminal and navigate to the root of your project. Type:
npm install [starterkit-name] gulp patternlab:loadstarterkit --kit=[starterkit-name]
where [starterkit-name] is the name of the Starterkit.
so... a complete example:
npm install @pattern-lab/starterkit-mustache-demo gulp patternlab:loadstarterkit --kit=@pattern-lab/starterkit-mustache-demo
The Pattern Lab Node CLI will also support installation of Starterkits should you not be using gulp.
LOADING A STARTERKIT WILL OVERWRITE ANY MATCHES INSIDE
./source Users can pass another flag
--clean=true to attempt to delete the contents of
./source prior to load.
- Sometimes users will run into file permissions issues. It's recommended to run all command prompts as administrator if you can.
patternlab-config.json also defines a
starterkitSubDir key (with a default value of
dist) which can be used to target a directory inside the starterkit module if need be.