KatieMFritz

First install patternlab/edition-node-gulp.

Then update package.json and run npm install in the command line.

Then update gulpfile.js, then patternlab-config.json.

If you're renaming your default stylesheet, update it in source/_meta/_00-head.mustache.

Once everything is updated, test with gulp patternlab:build.

KatieMFritz

Setup

1. Assuming you already have npm, install Yarn: npm install --global yarn
2. Add package.json to the root of your Pattern Lab. Change the name and version if you'd like.
3. Install dependencies with yarn install
4. Set up your CSS folder structure to match the sass-watch script, or edit the script to match your structure.

Folder structure

source
-- css

KatieMFritz

KatieMFritz

Automatic Color Swatches for Pattern Lab Node Gulp Mustache

1. Install the necessary packages:

npm install --save-dev gulp-sass-json
npm install --save-dev gulp-rename
npm install --save-dev gulp-replace

KatieMFritz

Color code sites in Craft 3 Multisite

Dependencies

1. Control Panel Body Classes plugin
2. Control Panel JavaScript plugin
3. Control Panel CSS plugin

Notes

KatieMFritz

Craft 3 plugins for better author experience

Annotated Notes: For admin notes with automatic timestamps.

Control Panel Body Classes: Add body classes to various Control Panel screens for easier styling (in combination with Control Panel CSS).

Control Panel CSS: To make style tweaks to the control panel. See web/cp.css for styles.

Control Panel Nav: Custom navigation menus for each user type, for easier navigation.

KatieMFritz

{#  ℹ️ Component name
    ==================================================================================================
    Component description
    Where to find it on the site
    Links to references or documentation
#}

{# 🔌 EXTENDS #}
If you're extending another template, put that function here.