Awesome
Learning Pattern Lab
Just one of the things I'm learning. https://github.com/hchiam/learning
https://github.com/pattern-lab/patternlab-node
npm create pattern-lab
# will use the pattern-lab initializer
- BTW:
npm create
is an alias fornpm init
https://stackoverflow.com/a/57133248 so you could runnpm 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.