Learning Pattern Lab

Just one of the things I'm learning. https://github.com/hchiam/learning

https://patternlab.io

https://github.com/pattern-lab/patternlab-node

npm create pattern-lab
# will use the pattern-lab initializer

• BTW: npm create is an alias for npm init https://stackoverflow.com/a/57133248 so you could run npm init pattern-lab instead.

(Note: the /public folder is auto-generated, as well as some other files.)

For templating syntax, I prefer Handlebars over Twig.

View patterns: npm run pl:serve

Patterns be here: /source/_patterns

You can edit the files and the page will reload, and auto-generate the HTML.

You can edit CSS here and see on live reload: /source/css/style.css (See example commit.)

You can add a pattern by simply adding a new file under source/_patterns (see example commit), and it'll auto-generate the menu, title, expandable tab, HTML code, etc.