20 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ page.title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | {% include alert.html %} 12 | {% include header.html %} 13 | 14 | {{content}} 15 | 16 | {% include footer.html %} 17 | 18 | 19 | -------------------------------------------------------------------------------- /_layouts/docs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ page.title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {% include alert.html %} 13 | {% include header.html %} 14 | 17 |
18 |
19 |
20 | {{content}} 21 |
22 | 23 |
24 | {% include docs-navigation.html %} 25 |
26 |
27 |
28 | 29 | {% include footer.html %} 30 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ page.title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | {% include alert.html %} 12 | 13 | {{content}} 14 | 15 | {% include footer.html %} 16 | 17 | -------------------------------------------------------------------------------- /_layouts/list.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: simple 3 | --- 4 | 5 | {{ content }} 6 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: simple 3 | --- 4 | 5 | 9 |
10 |
11 | {{ content }} 12 |
13 |
14 | -------------------------------------------------------------------------------- /_layouts/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ page.title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {% include header.html %} 13 | 14 | {{ content }} 15 | 16 | {% include footer.html %} 17 | 18 | -------------------------------------------------------------------------------- /_posts/2018-11-01-test.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "This is my first post" 4 | description: This is the page description 5 | date: 2018-11-01 6 | --- 7 | 8 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure. 9 | 10 | Lorem **ipsum dolor sit amet**, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui. 11 | 12 | ## This is a second-level heading 13 | [Aliquam erat volutpat.](#) Mauris vulputate scelerisque feugiat. *Cras a erat a diam venenatis aliquam*. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor. 14 | 15 | 1. Ordered list item 16 | 2. Another ordered list item 17 | 3. Yet another ordered list item 18 | 19 | 20 | ### This is a third-level heading 21 | Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui. 22 | 23 | ### [This is a linked heading]((#)) 24 | 25 | - Bulleted list item 26 | - Another bulleted list item 27 | - Yet bulleted list item 28 | - And here's yet another bulleted list item 29 | 30 | > This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla 31 | > 32 | > -- Cite Source 33 | 34 | #### This is a fourth-level headin 35 | Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

36 | 37 | ##### This is a fifth-level heading 38 | Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel. 39 | 40 | ###### This is a sixth-level heading 41 | Lorem ipsum dolor sit amet. 42 | -------------------------------------------------------------------------------- /_posts/2018-11-02-test2.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "This is also a Test" 4 | description: This is the page description 5 | date: 2018-11-02 6 | --- 7 | Yes, this is a test 2 8 | -------------------------------------------------------------------------------- /assets/_design/atomic-icons.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/_design/atomic-icons.ai -------------------------------------------------------------------------------- /assets/_design/atomic-icons.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/_design/atomic-icons.psd -------------------------------------------------------------------------------- /assets/_design/avatars.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/_design/avatars.psd -------------------------------------------------------------------------------- /assets/_design/icon-molecule.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /assets/_design/uncle-dave.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/_design/uncle-dave.psd -------------------------------------------------------------------------------- /assets/atomic-design.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/atomic-design.mp4 -------------------------------------------------------------------------------- /assets/atomic-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/atomic-design.png -------------------------------------------------------------------------------- /assets/atoms-scales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/atoms-scales.png -------------------------------------------------------------------------------- /assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/avatar.png -------------------------------------------------------------------------------- /assets/bg-organism-pattern.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/emptycaret.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | emptycaret 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/fonts/icons.eot -------------------------------------------------------------------------------- /assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/fonts/icons.woff -------------------------------------------------------------------------------- /assets/footer-after.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | footer-after 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/footer-before.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/guts-after.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icon-atom-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-atom 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /assets/icon-atom-header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /assets/icon-atom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /assets/icon-molecule-footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /assets/icon-molecule.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /assets/icon-organism-footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /assets/icon-organism.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /assets/img_brad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/img_brad.jpg -------------------------------------------------------------------------------- /assets/img_brian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/img_brian.jpg -------------------------------------------------------------------------------- /assets/img_dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/img_dave.jpg -------------------------------------------------------------------------------- /assets/img_octocat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/img_octocat.jpg -------------------------------------------------------------------------------- /assets/organisms-scales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/organisms-scales.png -------------------------------------------------------------------------------- /assets/pattern-lab-2-image_18-large-opt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/pattern-lab-2-image_18-large-opt.png -------------------------------------------------------------------------------- /assets/scales.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/assets/scales.jpg -------------------------------------------------------------------------------- /blog-index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: list 3 | --- 4 | 5 | 8 | 9 |
10 | 22 |
23 | -------------------------------------------------------------------------------- /contribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Contribute to the Pattern Lab Community | Pattern Lab 4 | heading: Contribute to the Pattern Lab Community 5 | --- 6 | 7 | Have an idea for or feedback about Pattern Lab? Want to fix some code or add a feature? 8 | Did you write about your experiences with Pattern Lab? Have you built a tool on top of Pattern Lab and want others 9 | to know about it? Just want to join the larger Pattern Lab community? Here's how to do it. 10 | 11 | ## GitHub 12 | 13 | The [Pattern Lab organization on GitHub](https://github.com/pattern-lab/) is the traditional way to give the Pattern Lab team feedback. If you have problems with code or ideas then GitHub is a decent first stop. Pull requests are always welcome. 14 | 15 | ## Gitter 16 | 17 | The [Pattern Lab rooms on Gitter](https://gitter.im/orgs/pattern-lab/rooms) offer a place for the Pattern Lab community to ask questions and offer help to each other. The core team actively monitor the rooms. If you've built a tool using Pattern Lab or written a blog post please share it with us and the larger Pattern Lab community on Gitter. We'll also get it added to our [resources page](/resources.html). 18 | 19 | ## Slack 20 | 21 | The stellar [Design Systems Slack](http://designsystems.herokuapp.com/) run by [@jina](https://twitter.com/jina) also has a #tool-pattern-lab channel that folks hang out in. 22 | 23 | ## Twitter 24 | 25 | If you're just looking to get updates about what's going on with Pattern Lab then [@patternlabio on Twitter](https://twitter.com/patternlabio) is our "talk-at-you" medium of choice. 26 | 27 | ## The Pattern Lab Port Interop Group 28 | 29 | The [Pattern Lab Port Interop Group](https://github.com/pattern-lab/the-spec/blob/draft/PL-PIG.md) discusses the commonalities between ports and tries to find ways to standardize our work together. To get an idea of upcoming features, request new ones, or provide feedback on implemented features check out the [issues queue](https://github.com/pattern-lab/the-spec/issues) on The Spec®. We need and want your feedback. 30 | -------------------------------------------------------------------------------- /css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: #fff; 11 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | word-wrap: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, 31 | pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, 33 | code[class*="language-"] ::-moz-selection { 34 | text-shadow: none; 35 | background: #b3d4fc; 36 | } 37 | 38 | pre[class*="language-"]::selection, 39 | pre[class*="language-"] ::selection, 40 | code[class*="language-"]::selection, 41 | code[class*="language-"] ::selection { 42 | text-shadow: none; 43 | background: #b3d4fc; 44 | } 45 | 46 | @media print { 47 | code[class*="language-"], 48 | pre[class*="language-"] { 49 | text-shadow: none; 50 | } 51 | } 52 | 53 | /* Code blocks */ 54 | pre[class*="language-"] { 55 | padding: 1em; 56 | margin: 0.5em 0; 57 | overflow: auto; 58 | } 59 | 60 | :not(pre) > code[class*="language-"], 61 | pre[class*="language-"] { 62 | /* background: #f5f2f0; */ 63 | } 64 | 65 | /* Inline code */ 66 | :not(pre) > code[class*="language-"] { 67 | padding: 0.1em; 68 | border-radius: 0.3em; 69 | white-space: normal; 70 | color: #222; 71 | } 72 | 73 | .token.comment, 74 | .token.prolog, 75 | .token.doctype, 76 | .token.cdata { 77 | color: slategray; 78 | } 79 | 80 | .token.punctuation { 81 | color: #999; 82 | } 83 | 84 | .namespace { 85 | opacity: 0.7; 86 | } 87 | 88 | .token.property, 89 | .token.tag, 90 | .token.boolean, 91 | .token.number, 92 | .token.constant, 93 | .token.symbol, 94 | .token.deleted { 95 | color: #905; 96 | } 97 | 98 | .token.selector, 99 | .token.attr-name, 100 | .token.string, 101 | .token.char, 102 | .token.builtin, 103 | .token.inserted { 104 | color: #690; 105 | } 106 | 107 | .token.operator, 108 | .token.entity, 109 | .token.url, 110 | .language-css .token.string, 111 | .style .token.string { 112 | color: #a67f59; 113 | } 114 | 115 | .token.atrule, 116 | .token.attr-value, 117 | .token.keyword { 118 | color: #07a; 119 | } 120 | 121 | .token.function { 122 | color: #dd4a68; 123 | } 124 | 125 | .token.regex, 126 | .token.important, 127 | .token.variable { 128 | color: #e90; 129 | } 130 | 131 | .token.important, 132 | .token.bold { 133 | font-weight: bold; 134 | } 135 | .token.italic { 136 | font-style: italic; 137 | } 138 | 139 | .token.entity { 140 | cursor: help; 141 | } 142 | -------------------------------------------------------------------------------- /demos.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Pattern Lab Demos 4 | heading: Pattern Lab Demos 5 | --- 6 | 7 | Here's a list of Pattern Lab's UI starterkits that you can use to kickstart your UI design system project, as well as a list of Pattern Labs from around the web. 8 | 9 | ## Handlebars starterkits 10 | 11 | - [Handlebars base starterkit](https://patternlab-handlebars-preview.netlify.com/) 12 | - [Handlebars demo starterkit](https://www.npmjs.com/package/@pattern-lab/starterkit-handlebars-demo) 13 | - [Handlebars vanilla starterkit](https://www.npmjs.com/package/@pattern-lab/starterkit-handlebars-vanilla) 14 | 15 | ## Twig 16 | 17 | - [Twig base starterkit](https://github.com/pattern-lab/starterkit-twig-base) 18 | 19 | ## Pattern Lab 2 and other demos 20 | 21 | - [Pattern Lab 2 Mustache Demo](http://demo.patternlab.io/) 22 | 23 | ## Pattern Labs in the wild 24 | 25 | - [Bolt Design System](https://boltdesignsystem.com/) 26 | - [Brad Frost's website PL](https://bradfrostdotcom-pl.netlify.com/) 27 | -------------------------------------------------------------------------------- /docs/advanced-auto-regenerate.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Watching for Changes and Auto Regenerating Patterns | Pattern Lab 4 | heading: Watching for Changes and Auto Regenerating Patterns 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Pattern Lab has the ability to watch for changes to patterns and frontend assets. When these files change, it will automatically rebuild the entire Pattern Lab website. You simply make your changes, save the file, and Pattern Lab will take care of the rest. 10 | 11 | ## How to Start the Watch 12 | 13 | Open your terminal and navigate to the root of your project. Type: 14 | 15 | ``` 16 | gulp patternlab:build --watch 17 | ``` 18 | 19 | > If using grunt, substitute `grunt` for `gulp` above. 20 | 21 | ## How to Start the Watch and Self-Host the Pattern Lab Website 22 | 23 | Rather than manually refreshing your browser when your patterns or frontend assets change you can have Pattern Lab watch for changes and [auto-reload your browser window](/docs/viewing-patterns.html#node) for you when it’s in watch mode. 24 | 25 | ## How to Stop the Watch 26 | 27 | To stop watching files on Mac OS X and Windows you can press`CTRL+C` in the command line window where the process is running. 28 | 29 | ## The Default Files That Are Watched 30 | 31 | By default, Pattern Lab monitors the following files: 32 | 33 | * all of the JSON files under `source/_annotations/` 34 | * all of the JSON files under `source/_data/` 35 | * all of the files under `source/_meta/` 36 | * all of the pattern templates under `source/_patterns/` 37 | * all of the CSS files under `source/css/` 38 | * all of the files under `source/images/` and `source/fonts/` 39 | * all of the Javascript files under `source/js/` 40 | 41 | The watch configuration is found within the Gruntfile or Gulpfile at the root of the project. 42 | 43 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 44 | 45 | {% endcapture %} 46 | {{ m | markdownify }} 47 | -------------------------------------------------------------------------------- /docs/advanced-clean-public.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Stopping public/ from Being "Cleaned" | Pattern Lab 4 | heading: Stopping `public/` from Being "Cleaned" 5 | --- 6 | 7 | {% capture m %} 8 | 9 | By default Pattern Lab deletes most of the files and directories found in `public/` when generating your site or starting the watch. Developers are supposed to use `source/` to store their files. This includes static assets like images, JavaScript and CSS. When generating your site Pattern Lab moves all of the static assets found in `source/` to `public/` (_after cleaning it_) so there shouldn't be a reason not to use `source/`. 10 | 11 | That said, developers might be more comfortable storing their static assets in `public/`. In order to turn-off the automatic cleaning of `public/` do the following: 12 | 13 | 1. Open patternlab-config.json` at the root of your project 14 | 2. Change the `cleanPublic` from `"true"` to `"false"` 15 | 16 | When you next generate your site or start the watch `public/` will no longer be cleaned. Identically named files will be overridden, however. 17 | 18 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 19 | 20 | {% endcapture %} 21 | {{ m | markdownify }} 22 | -------------------------------------------------------------------------------- /docs/advanced-ecosystem-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Overview of Pattern Lab's Ecosystem | Pattern Lab 4 | heading: Overview of Pattern Lab's Ecosystem 5 | --- 6 | 7 | Pattern Lab 2 introduces the beginnings of an ecosystem that will allow teams to mix, match and extend Pattern Lab to meet their specific needs. It will also make it easier for the Pattern Lab team to push out new features. Documentation that explains how best to take advantage of the ecosystem will be released in the coming weeks. 8 | 9 | ## Editions 10 | 11 | Editions let teams and agencies bundle all the things that support their unique workflows with Pattern Lab. An Edition can become the starting point for all of your projects while teams share and update functionality. The Node version of Pattern Lab uses [npm](https://www.npmjs.com/) to pull in separate components, while PHP version uses [Composer](https://getcomposer.org) to help you kick off your projects in a simple and standardized way. 12 | 13 | ## Components of an Edition 14 | 15 | The following is good overview of what components might make up an edition: 16 | 17 | 18 | 19 | This is by no means exhaustive and can be added to as needed. Here is a description of each component: 20 | 21 | ### Pattern Lab Core 22 | 23 | Core is the guts of Pattern Lab and enables all of the other features. Because Core is standalone a team can update and stay current with the latest Pattern Lab features without disrupting the rest of their project. 24 | 25 | ### StarterKits 26 | 27 | Have a trusty set of boilerplate code that you start every project with? Perhaps a common set of basic patterns, Sass mix-ins, and JavaScript libraries that are your go-to tools? A StarterKit is perfect for bundling these assets together into a boilerplate that makes sure each project starts off on the right foot. 28 | 29 | [Several starterkits](https://github.com/pattern-lab?utf8=%E2%9C%93&q=starterkit&type=&language=) 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. And you can roll your own, which can be fully version-controlled so your team’s StarterKit can evolve along with your tools. 30 | 31 | Importing a starterkit is only a few keystrokes away after installation. Eventually this feature will be built into a post-install phase like it is for Pattern Lab PHP via composer. 32 | 33 | [Learn more about Starterkits](/docs/advanced-starterkits.html#node) 34 | 35 | ### StyleguideKits 36 | 37 | StyleguideKits are the front-end of Pattern Lab. We call this “The Viewer.” StyleguideKits allow agencies and organizations to develop custom, branded Pattern Lab UIs to show off their patterns. 38 | 39 | ### PatternEngines 40 | 41 | PatternEngines are the templating engines that are responsible for parsing patterns and turning them into HTML. PatternEngines give Pattern Lab Core the flexibility to render many different types of template languages. Current PatternEngines include Mustache and Twig, with others like Handlebars and Underscore in development. And there’s no stopping you from adding another templating engine to Pattern Lab. 42 | 43 | ### Plugins 44 | 45 | Plugins allow developers to extend Pattern Lab Core and other parts of the ecosystem. For example, the PHP version of Pattern Lab has a number of plugins like [Browser Auto-Reload](https://github.com/pattern-lab/plugin-php-reload), [Data Inheritance](https://github.com/pattern-lab/plugin-php-data-inheritance), and [Faker](https://github.com/pattern-lab/plugin-php-faker). Pattern Lab’s architecture allows developers to modify data at different stages, add their own commands or pattern rules, or change the front-end to modify and extend Pattern Lab’s capabilities. 46 | 47 | ### Other Types of Components 48 | 49 | The flexibility of the Pattern Lab ecosystem means that teams can develop tools on top of Pattern Lab that meet _their_ needs. Want to standardize and push entire data sets to teams? Want to develop with granular collections of components instead of entire StarterKits? Only want to customize the CSS for the default StyleguideKit and distribute it as part of your projects? All of this and more is possible. We feel we're just scratching the surface on what it means to develop projects and design systems with a tool like Pattern Lab 50 | 51 | ## Guidance and Help 52 | 53 | If you have ideas or would like guidance before we have all of the documentation done please learn how you can [engage with the Pattern Lab community](/contribute.html). 54 | -------------------------------------------------------------------------------- /docs/advanced-exporting-patterns.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Exporting Patterns | Pattern Lab 4 | heading: Exporting Patterns 5 | --- 6 | 7 | {% capture m %} 8 | 9 | While the Pattern Lab website is great for design, iteration, alignment, and discussion - you may find yourself wanting to export whole pattern markup snippets into a different environment. 10 | 11 | In Pattern Lab Node, `patternlab-config.json` has two properties that work together to export completed patterns for use elsewhere. To export, provide an array of patternPartials and an output directory. Pattern Lab Node doesn't ship with any patternPartials specified for export. The default directory,`'./pattern_exports/'`, is created inside the install directory. Here is an example with three patternPartials set. 12 | 13 | ```javascript 14 | "patternExportPatternPartials": ["molecules-primary-nav", "organisms-header", "organisms-footer"], 15 | "patternExportDirectory": "./pattern_exports/" 16 | ``` 17 | 18 | Couple this technique with exported CSS via tools like [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy) to really make patterns portable. 19 | 20 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 21 | 22 | {% endcapture %} 23 | {{ m | markdownify }} 24 | -------------------------------------------------------------------------------- /docs/advanced-generating-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Generating CSS | Pattern Lab 4 | heading: Generating CSS 5 | --- 6 | 7 | **Note:** *The [CSS Rule Saver](https://github.com/dmolsen/css-rule-saver) library and CSS generation feature was added in v0.6.0 of the PHP version of Pattern Lab.* 8 | 9 | 10 | When using this feature, Pattern Lab can display only those CSS rules that affect a given pattern on the pattern detail view. This might be useful if you have a large Sass-generated CSS file or framework but only need a sub-set of styles that may affect a small piece of mark-up or pattern. 11 | 12 | ## How to Generate the CSS 13 | 14 | To generate your Pattern Lab site with CSS support on Mac OS X you can do the following: 15 | 16 | 1. Open `core/scripts/` 17 | 2. Double-click `generateSiteWithCSS.command` 18 | 3. Refresh the Pattern Lab site 19 | 20 | For Linux and Windows users you can also start the service from the command line. To do so open your command prompt and navigate to the root of the patternlab-php directory. Type: 21 | 22 | ``` 23 | php core/builder.php -gc 24 | ``` 25 | 26 | ## Important Note About Performance 27 | 28 | It may take several seconds for the PHP version of Pattern Lab to generate a site when it's also calculating the CSS rules. Be patient. 29 | 30 | -------------------------------------------------------------------------------- /docs/advanced-integration-with-compass.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Integration with Compass | Pattern Lab 4 | heading: Integration with Compass 5 | --- 6 | 7 | **Note:** *These directions incomplete. They are not meant to imply that Compass is officially supported with Pattern Lab. They should be modified to fit your instance of the PHP version of Pattern Lab.* 8 | 9 | 10 | Setting up Compass to work with the PHP version of Pattern Lab should be really straightforward. To set-up a Compass config that uses SCSS and _doesn't_ install any starter stylesheets do the following: 11 | 12 | 1. Open Terminal on a Mac 13 | 2. `gem install compass` (if you don't have it) 14 | 3. `cd /source` 15 | 4. `compass create --bare --sass-dir "css" --css-dir "css" --javascripts-dir "js" --images-dir "images"` 16 | 17 | The directories provided in step #4 are based on the default install of the PHP version of Pattern Lab and should be updated to reflect your directory structure. Also, if you need Compass to watch other directories or implement features modify step #4 as appropriate. 18 | 19 | ## Workflow with Pattern Lab 20 | 21 | Compass will only recompile your SCSS. To get Pattern Lab to rebuild your entire site as well as reload the browser when your SCSS files have been updated do the following: 22 | 23 | 1. Open Terminal on a Mac 24 | 2. `cd ` 25 | 3. `compass watch source` 26 | 4. Open a new tab in Terminal 27 | 5. `php core/builder.php -wr` 28 | 6. Reload your browser 29 | 30 | As you make changes to the SCSS files Compass will recompile them and, seeing the changes to `styles.css`, the PHP version of Pattern Lab will rebuild the entire site. It should also reload the Pattern Lab website. -------------------------------------------------------------------------------- /docs/advanced-integration-with-grunt.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Integration with Grunt/Gulp | Pattern Lab 4 | heading: Integration with Grunt/Gulp 5 | --- 6 | 7 | **Note:** _These directions may be incomplete. They also require **v0.7.9** of the PHP version of Pattern Lab._ 8 | 9 | # Integration with Grunt 10 | 11 | Setting up Grunt to work with the PHP version of Pattern Lab should be straightforward. To do so please do the following: 12 | 13 | 1. Open a terminal window 14 | 2. Type `npm install --save-dev grunt-shell` to install [grunt-shell](https://github.com/sindresorhus/grunt-shell) 15 | 3. Add the following to your `grunt.initConfig`. The `-p` flag ensures that Pattern Lab only generates patterns. 16 | 17 | 
shell: {
18 |   patternlab: {
19 |     command: "php core/builder.php -gp"
20 |   }
21 | }
22 | 23 | 4. Add `grunt.loadNpmTasks('grunt-shell');` to your list of plugins. 24 | 5. Add `'shell:patternlab'` to your list of tasks in `grunt.registerTask`. 25 | 26 | You should also be using `grunt-contrib-watch` to monitor changes to Pattern Lab's patterns and data. The Pattern Lab section for your `watch` might look like: 27 | 28 | html: { 29 | files: ['source/_patterns/**/*.mustache', 'source/_patterns/**/*.json', 'source/_data/*.json'], 30 | tasks: ['shell:patternlab'], 31 | options: { 32 | spawn: false 33 | } 34 | } 35 | 36 | You might be able to use `livereload` as well but that hasn't been tested by us yet. 37 | 38 | For more information, check out [this post about using Pattern Lab with Grunt](http://bradfrost.com/blog/post/using-grunt-with-pattern-lab/). 39 | -------------------------------------------------------------------------------- /docs/advanced-keyboard-shortcuts.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Keyboard Shortcuts | Pattern Lab 4 | heading: Keyboard Shortcuts 5 | --- 6 | 7 | > **Note:** This feature is currently disabled. It will be back in a future release of `styleguidekit-assets-default`. 8 | 9 | Pattern Lab comes with support for a number of special keyboard shortcuts to make using Pattern Lab easier. These are broken up by where they work or are most useful. 10 | 11 | Modifying the viewport: 12 | 13 | * **ctrl+shift+0**: set the viewport to 320px 14 | * **ctrl+shift+s**: set the viewport to "small" 15 | * **ctrl+shift+m**: set the viewport to "medium" 16 | * **ctrl+shift+l**: set the viewport to "large" 17 | * **ctrl+shift+h**: toggle Hay mode 18 | * **ctrl+shift+d**: toggle disco mode 19 | 20 | Modifying the views: 21 | 22 | * **ctrl+shift+a**: open/close info panels 23 | * **ctrl+shift+c**: open/close info panels 24 | * **cmd+a/ctrl+a**: select the content of the current open tab in code view 25 | * **ctrl+shift+u**: make the Mustache tab active 26 | * **ctrl+shift+y**: make the HTML tab active 27 | * **esc**: close the open view 28 | 29 | Other: 30 | 31 | * **ctrl+shift+f**: open/close the pattern search 32 | -------------------------------------------------------------------------------- /docs/advanced-page-follow.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Multi browser & Multi device Testing with Page Follow | Pattern Lab 4 | heading: Multi browser & Multi device Testing with Page Follow 5 | --- 6 | 7 | {% capture m %} 8 | 9 | The Pattern Lab's Page Follow feature gives developers the ability to have one browser control other browsers that connect to the Pattern Lab website. Pattern Lab Node utilizes [BrowserSync](http://www.browsersync.io/) to synchronize all connected browsers and devices. 10 | 11 | ## How to Start and Connect to Pattern Lab with BrowserSync 12 | 13 | Running `gulp patternlab:serve` or `grunt patternlab:serve` from the command line of your working directory will start up Pattern Lab with BrowserSync. By default, BrowserSync will output four URLs of note: 14 | 15 | 1. Local: [http://localhost:3000](http://localhost:3000) 16 | 2. External: http://your.ip.address:3000 17 | 3. UI: [http://localhost:3001](http://localhost:3001) 18 | 4. UI External: http://your.ip.address:3001 19 | 20 | Any browsers on your machine will be able access these URLs. Browsers on other machines or devices on the same network should use the external URLs. Connecting to the Pattern Lab website will inform users they are also connected to BrowserSync. 21 | 22 | ## How to Stop the Page Follow 23 | 24 | To stop watching files on Mac OS X and Windows you can press`CTRL+C` in the command line window where the process is running. 25 | 26 | ## BrowserSync Capabilities 27 | 28 | It's strongly recommended to visit [BrowserSync](http://www.browsersync.io/) documentation or the BrowserSync UI at [http://localhost:3001](http://localhost:3001). From this administration interface one can perform the following: 29 | 30 | * See all connected devices and browsers 31 | * Open new tabbed instances of the Pattern Lab website on devices 32 | * Sync all connected devices 33 | * Reload all connected devices 34 | * Scroll all connected devices to the top 35 | * Toggle mouse click synchronization 36 | * Toggle scroll synchronization 37 | * Toggle form submission synchronization 38 | * Toggle form input synchronization 39 | * View browsing history of the connect session 40 | * Toggle remote debugging tools 41 | * Artificially throttle the network 42 | 43 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 44 | 45 | {% endcapture %} 46 | {{ m | markdownify }} 47 | -------------------------------------------------------------------------------- /docs/advanced-pattern-lab-nav.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Modifying Pattern Lab's Navigation | Pattern Lab 4 | heading: Modifying Pattern Lab's Navigation 5 | --- 6 | 7 | {% capture m %} 8 | 9 | When sharing Pattern Lab with a client it may be beneficial to turn-off certain elements in the default navigation. To turn-off navigation elements, alter the flags inside the `ishControlsHide` object within `patternlab-config.json` and then re-generate the site. The following keys are supported and will hide their respective elements if toggled on: 10 | 11 | ```javascript 12 | "ishControlsHide": { 13 | "s": false, 14 | "m": false, 15 | "l": false, 16 | "full": false, 17 | "random": false, 18 | "disco": false, 19 | "hay": true, 20 | "find": false, 21 | "views-all": false, 22 | "views-annotations": false, 23 | "views-code": false, 24 | "views-new": false, 25 | "tools-all": false, 26 | "tools-docs": false 27 | }, 28 | ``` 29 | 30 | By default all navigation elements are visible except Hay Mode. 31 | 32 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 33 | 34 | {% endcapture %} 35 | {{ m | markdownify }} 36 | -------------------------------------------------------------------------------- /docs/advanced-reload-browser.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Auto Reloading the Browser Window When Changes Are Made | Pattern Lab 4 | heading: Auto Reloading the Browser Window When Changes Are Made 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Rather than manually refreshing your browser when your patterns or CSS change, Pattern Lab auto-reloads your browser window for you using [BrowserSync](http://www.browsersync.io/). 10 | 11 | Auto-reloading is a behavior that is done in concert with file watching. You can read more about how these two features work together [here](/docs/advanced-auto-regenerate.html#node). 12 | 13 | ## How to Start and Connect to Pattern Lab with BrowserSync 14 | 15 | Running 'gulp patternlab:serve' or 'grunt patternlab:serve' from the command line of your working directory will start up Pattern Lab with BrowserSync and launch [http://localhost:3000](http://localhost:3000) in your default browser. 16 | 17 | ## How to Stop the Server 18 | 19 | To stop watching and serving files on Mac OS X and Windows you can press`CTRL+C` in the command line window where the process is running. 20 | 21 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 22 | 23 | {% endcapture %} 24 | {{ m | markdownify }} 25 | -------------------------------------------------------------------------------- /docs/advanced-starterkits.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Starterkits | Pattern Lab 4 | heading: Starterkits 5 | --- 6 | 7 | {% capture m %} 8 | 9 | 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](/docs/advanced-ecosystem-overview.html) An agency or team could use it for each new client or project. [Several starterkits](https://github.com/pattern-lab?utf8=%E2%9C%93&q=starterkit&type=&language=) 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. 10 | 11 | ## Structure 12 | 13 | A Starterkit's structure mirrors that of the default file structure of Pattern Lab. Usually this is found under the `dist/` directory: 14 | 15 | ``` 16 | _annotations/ 17 | _data/ 18 | _meta/ 19 | _patterns/ 20 | css/ 21 | fonts/ 22 | images/ 23 | js/ 24 | favicon.ico 25 | ``` 26 | 27 | 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 `paths`](/docs/advanced-config-options.html#node). 28 | 29 | ## Installing Starterkits 30 | 31 | Open your terminal and navigate to the root of your project. Type: 32 | 33 | ``` 34 | npm install [starterkit-name] 35 | gulp patternlab:loadstarterkit --kit=[starterkit-name] 36 | ``` 37 | 38 | where [starterkit-name] is the name of the Starterkit. 39 | 40 | so... a complete example: 41 | 42 | ``` 43 | npm install @pattern-lab/starterkit-mustache-demo 44 | gulp patternlab:loadstarterkit --kit=@pattern-lab/starterkit-mustache-demo 45 | ``` 46 | 47 | The [Pattern Lab Node CLI](https://github.com/pattern-lab/patternlab-node/tree/master/packages/cli) will also support installation of Starterkits should you not be using gulp. 48 | 49 | ## PSA 50 | 51 | **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. 52 | 53 | * Sometimes users will run into file permissions issues. It's recommended to run all command prompts as administrator if you can. 54 | 55 | `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. 56 | 57 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 58 | 59 | {% endcapture %} 60 | {{ m | markdownify }} 61 | -------------------------------------------------------------------------------- /docs/advanced-template-language-and-pattern-engines.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Template Language and PatternEngines | Pattern Lab 4 | heading: Template Language and PatternEngines 5 | patternEnginesScript: true 6 | --- 7 | 8 | By default Pattern Lab uses the Mustache template language, extended with [pattern parameters](/docs/pattern-parameters.html). PatternEngines let you add support for a template language of your personal choice. Each PatternEngine has it's own set of features and caveats. 9 | 10 | Right now the most mature PatternEngines are Handlebars, Mustache and Twig. 11 | 12 | ## Official PatternEngines for Node 13 | 17 | 18 | ## Install and Configure a PatternEngine 19 | 20 | 1. Install a new PatternEngine that you wish to use. For example, to install the Handlebars engine, run `npm install --save @pattern-lab/engine-handlebars`. 21 | 2. (Optional) Change the `"patternExtension"` property of your config. This sets the panel name and language for the code tab on the styleguide. 22 | 23 | You'll need to restart Pattern Lab for changes to take effect. Some PatternEngines may provide further configuration. 24 | -------------------------------------------------------------------------------- /docs/changes-1-to-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Pattern Lab 1 to Pattern Lab 2 Changes | Pattern Lab 4 | heading: Pattern Lab 1 to Pattern Lab 2 Changes 5 | --- 6 | 7 | {% capture m %} 8 | 9 | 10 | The list of features is coming soon. 11 | 12 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 13 | 14 | {% endcapture %} 15 | {{ m | markdownify }} 16 | -------------------------------------------------------------------------------- /docs/command-line.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Using The Command Line Options | Pattern Lab 4 | heading: Using The Command Line Options 5 | --- 6 | 7 | {% capture m %} 8 | 9 | To use Pattern Lab you must use the command line interface. Gulp or grunt tasks are the primary entry point to interact with the core library and manage frontend assets across all platforms. To view the available commands when using Pattern Lab do the following: 10 | 11 | 1. In a terminal window navigate to the root of your project 12 | 2. Type `gulp patternlab:help` 13 | 14 | > If using grunt, substitute `grunt` for `gulp` above. 15 | 16 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 17 | 18 | {% endcapture %} 19 | {{ m | markdownify }} 20 | -------------------------------------------------------------------------------- /docs/command-prompt-windows.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Command Prompt on Windows | Pattern Lab 4 | heading: Command Prompt on Windows 5 | --- 6 | 7 | 8 | If you're on Windows you'll need to use the command line options when using the PHP version of Pattern Lab. To access the command prompt you can [follow the directions from Microsoft](http://windows.microsoft.com/en-us/windows-vista/open-a-command-prompt-window). 9 | 10 | After getting to the command prompt type the following to make sure you have PHP installed: 11 | 12 | ``` 13 | php -v 14 | ``` 15 | 16 | If you get an error you may need to [update your path variable so Windows can find PHP](http://willj.co/2012/10/run-wamp-php-windows-7-command-line/). 17 | -------------------------------------------------------------------------------- /docs/data-json-mustache.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Introduction to JSON & Mustache Variables | Pattern Lab 4 | heading: Introduction to JSON & Mustache Variables 5 | --- 6 | 7 | > This documentation is provided as a simple introduction to using one of the supported data types and one of the supported PatternEngines. The best reference for this topic is the [Mustache documentation](http://mustache.github.io/mustache.5.html) but this should provide a good beginner's primer. 8 | 9 | ## Simple Variables 10 | 11 | At its core JSON is a simple key-value store. This means that any piece of data in JSON has a key and a value. The key is the name of an attribute and the value is what should be shown when that attribute is referenced. Here's a simple example: 12 | 13 | ```javascript 14 | "src": "../../images/fpo-avatar.png" 15 | ``` 16 | 17 | In this case the key is `src` and the value is `../../images/fpo-avatar.png`. Let's look at how we might reference this data in a pattern template. Mustache variables are denoted by the double-curly braces (or mustaches). 18 | 19 | ```html 20 | Avatar 21 | ``` 22 | 23 | The Mustache variable is `{% raw %}{{ src }}{% endraw %}`. Note that `src` matches the name of the key in our JSON example. When the PHP and Node versions of Pattern Lab compile this template the end result will be: 24 | 25 | ```html 26 | Avatar 27 | ``` 28 | 29 | Note that `{% raw %}{{ src }}{% endraw %}` was replaced by the value for `src` found in our JSON example. 30 | 31 | ## Nested Variables 32 | 33 | We may want our JSON file to be a little more organized and our Mustache variable names to be a little more descriptive. For example, maybe we have multiple image sizes that we want to provide image sources for. We might organize our JSON key-values this way: 34 | 35 | ```javascript 36 | "square": { 37 | "src": "../../images/fpo-square.png", 38 | "alt": "Square" 39 | }, 40 | "avatar": { 41 | "src": "../../images/fpo-avatar.png", 42 | "alt": "Avatar" 43 | } 44 | ``` 45 | 46 | Note how their are attributes ( `src`, `alt` ) nested within a larger container ( `square` ). Also note how the attributes are separated by commas. If we wanted to use the attributes for the square image in our pattern we'd write: 47 | 48 | ```html 49 | {% raw %}{{ square.alt }}{% endraw %} 50 | ``` 51 | 52 | This would compile to: 53 | 54 | ```html 55 | Square 56 | ``` 57 | 58 | This nesting makes it easier to read how the attributes are organized in our patterns. The default `data.json` file has several examples of this type of nesting of attributes. 59 | 60 | ## Rendering HTML in Variables 61 | 62 | You may want to include HTML in your variables. By default, Mustache will convert HTML mark-up to their HTML entity equivalents. For example, our JSON may look like: 63 | 64 | ```javascript 65 | "lyrics": "Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood." 66 | ``` 67 | 68 | Based on our previous Mustache examples you would probably write out your template like so: 69 | 70 | ```html 71 |

TV Show Lyrics

72 |

{% raw %}{{ lyrics }}{% endraw %}

73 | ``` 74 | 75 | Unfortunately, that would compile as: 76 | 77 | ```html 78 |

TV Show Lyrics

79 |

Just <em>good ol' boys</em>, wouldn't change if they could, <strong>fightin'</strong> the system like a true modern day Robin Hood.

80 | ``` 81 | 82 | In order to make sure the mark-up doesn't get converted you must use _triple_ curly brackets like so: 83 | 84 | ```html 85 |

TV Show Lyrics

86 |

{% raw %}{{{ lyrics }}}{% endraw %}

87 | ``` 88 | 89 | Now it would compile correctly: 90 | 91 | ```html 92 |

TV Show Lyrics

93 |

Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

94 | ``` 95 | -------------------------------------------------------------------------------- /docs/data-link-variable.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Linking to Patterns with Pattern Lab's Default `link` Variable | Pattern Lab 4 | --- 5 | 6 | # Linking to Patterns with Pattern Lab's Default `link` Variable 7 | You can build patterns that link to one another to help simulate using a real website. This is especially useful when working with the Pages and Templates pattern types. Rather than having to remember the actual path to a pattern you can use the same shorthand syntax you'd use to include one pattern within another. **Important:** Pattern links _do not_ support the same fuzzy matching of names as the shorthand partials syntax does. The basic format is: 8 | 9 | ```html 10 | {% raw %}{{ link.pattern-name }}{% endraw %} 11 | ``` 12 | 13 | For example, if you wanted to add a link to the `article` page from your `blog` page you could write the following: 14 | 15 | ```html 16 | Article Headline 17 | ``` 18 | 19 | This would compile to: 20 | 21 | ```html 22 | Article Headline 23 | ``` 24 | 25 | Additionally, you can use pattern links within JSON to link to other pages, templates, or patterns within Pattern Lab. For instance, if you had a pattern containing the following: 26 | 27 | ```html 28 | This is a link 29 | ``` 30 | 31 | You can set the URL to a pattern link via JSON like so: 32 | 33 | ```javascript 34 | { 35 | "url" : "link.pages-article" 36 | } 37 | ``` 38 | 39 | Using pattern links in JSON is especially helpful at keeping the pattern's structure and content entirely separate. 40 | -------------------------------------------------------------------------------- /docs/data-listitems.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Creating Lists with Pattern Lab's Default `listItems` Variable | Pattern Lab 4 | heading: Creating Lists with Pattern Lab's Default `listItems` Variable 5 | --- 6 | 7 | Many more complicated patterns may include lists of objects. For example, comments or headlines. The PHP and Node versions of Pattern Lab come with a simple way to fill out these lists with dynamic data so that you can quickly stub them out. The list data can be found in `./source/_data/listitems.json` and is accessed in patterns using the `listItems` key. Lists are randomized each time the Pattern Lab website is generated. 8 | 9 | ## Using listItems Attributes to Create a Simple List 10 | 11 | Let's look at a simple example of iterating over a list. In your template you might have: 12 | 13 | ```html 14 | {% raw %}
    15 | {{# listItems.four }} 16 |
  • {{ title }}
    • 17 | {{/ listItems.four }} 18 |
{% endraw %} 19 | ``` 20 | 21 | Let's break this down before showing the results. The `#` denotes that Mustache needs to loop over the given key that contains multiple values, in this case `listItems.four`, and write-out the corresponding value `{% raw %}{{ title }}{% endraw %}`. A full list of attributes can be found below. The `/` denotes the end of the block that's being rendered. The PHP and Node versions of Pattern Lab support the keys `one` through `twelve`. If you need more than twelve items for a given list you'll need to add your own data. **Important**: the keys `one` through `twelve` are Pattern Lab-specific and not a general feature of Mustache. 22 | 23 | The above would compile to: 24 | 25 | ```html 26 |
    27 |
  • Rebel Mission to Ord Mantell
    • 28 |
  • Help, help, I'm being repressed!
    • 29 |
  • Bacon ipsum dolor sit amet turducken strip steak beef ribs shank
    • 30 |
  • Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.
    • 31 |
32 | ``` 33 | 34 | If you wanted six items in your list you'd write: 35 | 36 | ```html 37 | {% raw %}
    38 | {{# listItems.six }} 39 |
  • {{ title }}
    • 40 | {{/ listItems.six }} 41 |
{% endraw %} 42 | ``` 43 | 44 | ## Combining listItems with Includes 45 | 46 | Let's look at how we might build a comment thread using `listItems` and includes. First we'll start with an organism called `comment-thread` that looks like: 47 | 48 | ```html 49 |
50 |
51 |

Comment List

52 |
53 | {% raw %}{{# listItems.five }} 54 | {{> molecules-single-comment }} 55 | {{/ listItems.five }}{% endraw %} 56 |
57 |
58 |
59 | ``` 60 | 61 | This organism is including the `single-comment` molecule ( `{% raw %}{{> molecules-single-comment}}{% endraw %}` ) _within_ our block where we're iterating over five items from the `listItems` variable ( `{% raw %}{{# listItems.five }}{% endraw %}` ). What this is doing is rendering the `single-comment` molecule five times with different data each time. Our `single-comment` molecule might look like this: 62 | 63 | ```html 64 | {% raw %}
65 |
66 | {{> atoms-avatar }} 67 |

{{ name.first }} {{ name.last }}

68 |
69 |
70 |

{{ description }}

71 |
72 |
{% endraw %} 73 | ``` 74 | 75 | Note how the Mustache variable names match up to the attributes available in our `listItems` variable. Again, each time the `single-comment` pattern is rendered those variables will have different data. Using a partial allows us to DRY up our code. We can even nest partials within partials as shown by `{% raw %}{{> atoms-avatar }}{% endraw %}` in our example. 76 | 77 | **Important**: You don't have to use the default `listItems` variable to take advantage of this feature. You can also use this method with pattern-specific data files or the default `data.json` file. 78 | 79 | ## Overriding the Defaults with Pattern-specific listItems 80 | 81 | In much the [same way that one can override values](/docs/data-pattern-specific.html) in `_data.json` with pattern-specific data you can also override `_listitems.json`. The same principles apply but it's a slightly different naming convention. For example, if you wanted to provide pattern-specific `listItem` data for the `article` pattern under the pattern type `pages` your `pages` directory would look like this: 82 | 83 | ``` 84 | pages/article.mustache 85 | pages/article.listitems.json 86 | ``` 87 | 88 | Otherwise [the same rules for overriding defaults](/docs/data-pattern-specific.html) for `_data.json` apply to `_listitems.json`. 89 | 90 | ## The listItems Attributes 91 | 92 | The list text attributes were built using several lorem ipsum generators. The image attributes utilize [placeimg.com](http://placeimg.com). The names were generated with [Behind the Name](http://www.behindthename.com/). The available attributes are: 93 | 94 | ``` 95 | title 96 | description 97 | url 98 | headline.short (~37 characters long) 99 | headline.medium (~72 characters long) 100 | excerpt.short (~150 characters long) 101 | excerpt.medium (~233 characters long) 102 | excerpt.long (~450 characters long) 103 | img.avatar.src 104 | img.avatar.alt 105 | img.square.src 106 | img.square.alt 107 | img.rectangle.src (4x3 aspect ratio) 108 | img.rectangle.alt 109 | img.landscape-4x3.src 110 | img.landscape-4x3.src 111 | img.landscape-16x9.src 112 | img.landscape-16x9.alt 113 | name.first (e.g. Junius) 114 | name.firsti (e.g. J) 115 | name.middle (e.g. Marius) 116 | name.middlei (e.g. M) 117 | name.last (e.g. Koolen) 118 | name.lasti (e.g. K) 119 | year.long (e.g. 2013) 120 | year.short (e.g. 13) 121 | month.long (e.g. January) 122 | month.short (e.g. Jan) 123 | month.digit (e.g. 01) 124 | dayofweek.long (e.g. Monday) 125 | dayofweek.short (e.g. Mon) 126 | day.long (e.g. 05) 127 | day.short (e.g. 5) 128 | day.ordinal (e.g. th) 129 | hour.long (e.g. 11) 130 | hour.short (e.g. 11) 131 | hour.military (e.g. 23) 132 | hour.ampm (e.g. pm) 133 | minute.long (e.g. 09) 134 | minute.short (e.g. 9) 135 | seconds (e.g. 52) 136 | ``` 137 | 138 | The aspect ratio for `img.rectangle` is 4x3. Hopefully this gives pattern developers an easy way to build out dynamic lists for testing. 139 | -------------------------------------------------------------------------------- /docs/data-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Overview of Data | Pattern Lab 4 | heading: Overview of Data 5 | --- 6 | 7 | The primary default global source of data used when rendering Pattern Lab patterns can be found in `./source/_data/`. 8 | 9 | ## Supported Data Formats 10 | 11 | The PHP version of Pattern Lab supports JSON and YAML. To use JSON or YAML simply use the appropriate file extension with the files holding your data. They are `.json` for JSON and `.yml` or `.yaml` for YAML. You can mix JSON and YAML files in the same project. 12 | 13 | The Node version of Pattern Lab only supports JSON. 14 | 15 | ## Locations for Data 16 | 17 | There are three places to store data in Pattern Lab: 18 | 19 | * in `./source/_data`. The PHP version of Pattern Lab supports an unlimited number of data files in this directory. 20 | * in [pattern-specific](/docs/data-pattern-specific.html) files in `./source/_patterns`. 21 | * in [pseudo-pattern](/docs/pattern-pseudo-patterns.html) files in `./source/_patterns`. 22 | 23 | ### A Special Note About Pattern Parameters 24 | 25 | [Pattern parameters](/docs/pattern-parameters.html) are a simple find and replace of variables in the included pattern. As such they do not affect the context stack of Mustache and we don't consider them true data. They have no impact on overall data inheritance and they cannot be used any deeper than the included pattern. They are a hack. 26 | 27 | ## Data Inheritance 28 | 29 | Data inheritance in Pattern Lab follows this flow: 30 | 31 | ``` 32 | Pattern-specific data for the pattern being rendered > Global data in _data 33 | ``` 34 | 35 | The only data that is loaded to render a pattern is its own data and global data. It will not include the data for any included patterns. For example, the pages template, `article`, might include the molecule, `block-hero`. `block-hero` may have its own pattern-specific data file, `block-hero.json`. The PHP and Node versions of Pattern Lab **will not** use the `block-hero` data when rendering `article`. It will only use `article.json` (_if available_) and data found in `./source/_data`. 36 | 37 | If you need to load data based on included patterns or pseudo-patterns the [Data Inheritance Plugin for PHP](https://github.com/pattern-lab/plugin-php-data-inheritance) may fit your needs. 38 | -------------------------------------------------------------------------------- /docs/data-pattern-specific.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Creating Pattern-specific Values | Pattern Lab 4 | heading: Creating Pattern-specific Values 5 | --- 6 | 7 | > **Note:** The PHP version of Pattern Lab supports JSON and YAML. This article uses JSON because it is a standard between the PHP and Node versions of Pattern Lab. 8 | 9 | Storing data for your atoms, molecules, and organisms in `./source/_data` may work just fine. When fleshing out templates and pages, where data may need to be unique to each page even if they use the same molecules and organisms, data stored in `./source/_data` can become cumbersome. In order to work around this the PHP and Node versions of Pattern Lab allow you to define pattern-specific data files that allow you to override the default values found in `./source/_data`. 10 | 11 | ## Setting Up Pattern-specific Data 12 | 13 | In order to tell the PHP and Node versions of Pattern Lab to use pattern-specific data to override the default global data create a JSON file with the same name as the pattern and put it in the same directory as the pattern. For example, if you wanted to provide pattern-specific data for the `article` pattern under the pattern type `pages` your `pages` directory would look like this: 14 | 15 | ``` 16 | pages/article.mustache 17 | pages/article.json 18 | ``` 19 | 20 | ## Overriding the Default Variables 21 | 22 | To override the global data using pattern-specific data make sure the latter has the same variable names as the former. For example, the 4x3 landscape image source may look like this in `data.json`: 23 | 24 | ```javascript 25 | "landscape-4x3": { 26 | "src": "../../images/fpo-landscape-4x3.jpg", 27 | "alt": "Landscape 4x3 Image" 28 | } 29 | ``` 30 | 31 | In our pattern-specific data file, `article.json`, we'd simply copy that structure and provide our own information: 32 | 33 | ```javascript 34 | "landscape-4x3": { 35 | "src": "../../images/a-team-hero.jpg" 36 | } 37 | ``` 38 | 39 | Now the article pattern will display an image of the A-Team when using `{% raw %}{{ landscape-4x3.src }}{% endraw %}`. All other patterns using `{% raw %}{{ landscape-4x3.src }}{% endraw %}` will display the default 4x3 image. Also, note that we **didn't** override the `landscape-4x3.alt` attribute. If we were to use that attribute in our pattern the default value, "Landscape 4x3 Image", would be displayed. 40 | 41 | **Important note:** You don't have to override every attribute. You can limit the data in your pattern-specific data file to just those variables you want. The PHP and Node versions of Pattern Lab will fallback to using the default attributes from `data.json` if the attributes aren't defined in the pattern-specific data file. 42 | 43 | ## Working With Includes 44 | 45 | The only data that is loaded to render a pattern is its own data and global data. It will not include the data for any included patterns. For example, the pages template, `article`, might include the molecule, `block-hero`. `block-hero` may have its own pattern-specific data file, `block-hero.json`. The PHP and Node versions of Pattern Lab **will not** use the `block-hero` data when rendering `article`. It will only use `article.json` (_if available_) and data found in `./source/_data`. 46 | 47 | If you need to load data based on included patterns or pseudo-patterns the [Data Inheritance Plugin for PHP](https://github.com/pattern-lab/plugin-php-data-inheritance) may fit your needs. 48 | -------------------------------------------------------------------------------- /docs/editing-source-files.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Editing Pattern Lab Source Files | Pattern Lab 4 | heading: Editing Pattern Lab Source Files 5 | --- 6 | 7 | When editing Pattern Lab you must put your files and edit them in the `./source/` directory. This includes your static assets like [JavaScript, CSS, and images](/docs/pattern-managing-assets.html). Each time [your site is generated](/docs/generating-pattern-lab.html) your patterns will be compiled and your static assets will be moved to the `./public/` directory. Because of this you **should not edit** the files in the `./public/` directory. 8 | 9 | ## Pattern Lab Directories 10 | 11 | For the most part you can organize `./source/` anyway you see fit. There are a few Pattern Lab-specific directories though. They are: 12 | 13 | * `_annotations/` - where your annotations reside. [learn more](/docs/pattern-adding-annotations.html). 14 | * `_data/` - where the global data used to render your patterns resides. [learn more](/docs/data-overview.html). 15 | * `_meta/` - where the header and footer that get applied to all of your patterns resides. [learn more](/docs/pattern-header-footer.html). 16 | * `_patterns/` - where your patterns, pattern documentation, and pattern-specific data reside. [learn more](/docs/pattern-organization.html). 17 | 18 | ## Configuring Pattern Lab Directories 19 | 20 | All Pattern Lab directories can be configured to suit your needs. 21 | 22 | In the PHP version of Pattern Lab you can modify or add the following configuration options in `./config/config.yml`: 23 | 24 | ``` 25 | // base directories 26 | exportDir: "value" // default is exports. where clean mark-up sans PL code is exported to. 27 | publicDir: "value" // default is public 28 | sourceDir: "value" // default is source 29 | 30 | // exportDir is the base directory for the following directories (e.g. ./exports/patterns) 31 | patternExportDir: "value" // default is patterns 32 | 33 | // publicDir is the base directory for the following directories (e.g. ./public/patterns) 34 | componentDir: "value" // default is patternlab-components. where plugin components are installed. 35 | patternPublicDir: "value" // default is patterns 36 | 37 | // sourceDir is the base directory for the following directories (e.g. ./source/_patterns) 38 | annotationsDir: "value" // default is _annotations 39 | dataDir: "value" // default is _data 40 | metaDir: "value" // default is _meta 41 | patternSourceDir: "value" // default is _patterns 42 | ``` 43 | 44 | In the Node version of Pattern Lab you can modify the following configuration options in `patternlab-config.json`: 45 | 46 | ```javascript 47 | "paths" : { 48 | "source" : { 49 | "root": "./source/", 50 | "patterns" : "./source/_patterns/", 51 | "data" : "./source/_data/", 52 | "meta": "./source/_meta/", 53 | "annotations" : "./source/_annotations/", 54 | "styleguide" : "./node_modules/styleguidekit-assets-default/dist/", 55 | "patternlabFiles" : "./node_modules/styleguidekit-mustache-default/views/", 56 | "js" : "./source/js", 57 | "images" : "./source/images", 58 | "fonts" : "./source/fonts", 59 | "css" : "./source/css/" 60 | }, 61 | "public" : { 62 | "root" : "./public/", 63 | "patterns" : "./public/patterns/", 64 | "data" : "./public/styleguide/data/", 65 | "annotations" : "./public/annotations/", 66 | "styleguide" : "./public/styleguide/", 67 | "js" : "./public/js", 68 | "images" : "./public/images", 69 | "fonts" : "./public/fonts", 70 | "css" : "./public/css" 71 | } 72 | } 73 | ``` 74 | 75 | ## Watching for Source File Changes 76 | 77 | Manually generating the Pattern Lab website after each change can be cumbersome. The PHP and Node versions of Pattern Lab come with the ability to [watch files in the `./source/` directory for changes and re-generate the site automatically](/docs/advanced-auto-regenerate.html). The Pattern Lab website can also be [automatically reloaded](/docs/advanced-reload-browser.html). 78 | -------------------------------------------------------------------------------- /docs/generating-pattern-lab.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Generating Pattern Lab | Pattern Lab 4 | heading: Generating Pattern Lab 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Running Pattern Lab for the first time will vary depending on which version was [installed](/docs/installation.html). 10 | 11 | ## edition-node 12 | If you installed [edition-node](https://github.com/pattern-lab/edition-node), run the following command to serve Pattern Lab and watch for changes: 13 | 14 | ``` 15 | npm run pl:serve 16 | ``` 17 | 18 | ## edition-twig 19 | If you installed [edition-twig](https://github.com/pattern-lab/edition-php-twig-standard), run the following command to serve Pattern Lab and watch for changes: 20 | 21 | ``` 22 | php core/console --watch 23 | ``` 24 | 25 | 26 | ## edition-node-gulp (legacy) 27 | If you installed Pattern Lab [edition-node-gulp](https://github.com/pattern-lab/edition-node-gulp), run the following command to serve Pattern Lab and watch for changes: 28 | 29 | ``` 30 | gulp patternlab:serve 31 | ``` 32 | 33 | ## Pattern Lab is now running: now what? 34 | Your Pattern Lab should now be populated and [available for viewing](/docs/viewing-patterns.html#node) and you can [make changes to your patterns](/docs/editing-source-files.html). 35 | 36 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 37 | 38 | {% endcapture %} 39 | {{ m | markdownify }} 40 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Pattern Lab Documentation 4 | --- 5 | 6 | 7 | 10 | 11 |
12 |
13 | 14 |
15 |

Getting Started

16 | {% include docs-nav-start.html %} 17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 |

Working with Patterns

25 | {% include docs-nav-patterns.html %} 26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 |

Working with Data

34 | {% include docs-nav-data.html %} 35 |
36 | 37 |
38 | 39 |
40 | 41 |
42 |

Advanced Features

43 | 44 | {% include docs-nav-advanced.html %} 45 |
46 | 47 |
48 |
49 | -------------------------------------------------------------------------------- /docs/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Installing Pattern Lab | Pattern Lab 4 | heading: Installing Pattern Lab 5 | --- 6 | 7 | {% capture m %} 8 | 9 | {% include download-node.html %} 10 | 11 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 12 | 13 | {% endcapture %} 14 | {{ m | markdownify }} 15 | -------------------------------------------------------------------------------- /docs/pattern-add-new.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Adding New Patterns | Pattern Lab 4 | heading: Adding New Patterns 5 | --- 6 | 7 | To add new patterns to the PHP and Node versions of Pattern Lab just add new Mustache templates under the appropriate pattern type or pattern subtype directories in `./source/_patterns`. For example, let's add a new pattern under the pattern type "molecules" and the pattern sub-type "blocks". The `./source/_patterns/molecules/blocks/` directory looks like: 8 | 9 | block-hero.mustache 10 | headline-byline.mustache 11 | media-block.mustache 12 | 13 | If we want to add a new pattern we simply tack it onto the end: 14 | 15 | block-hero.mustache 16 | headline-byline.mustache 17 | media-block.mustache 18 | new-pattern.mustache 19 | 20 | If you want more control over their ordering please refer to "[Reorganizing Patterns](/docs/pattern-reorganizing.html)." 21 | -------------------------------------------------------------------------------- /docs/pattern-adding-annotations.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Adding Annotations | Pattern Lab 4 | heading: Adding Annotations 5 | --- 6 | 7 | Annotations provide an easy way to add notes to elements that may appear inside patterns. Annotations can be saved as a single JSON file at `./source/_annotations/annotations.js` or as multiple Markdown files in `./source/_annotations/`. They're _not_ tied to any specific patterns. When annotations are active they are compared against every pattern using a CSS selector syntax. 8 | 9 | ## The Elements of an Annotation 10 | 11 | The elements of an annotation are: 12 | 13 | * **el** - the selector to be used to attach the annotation to a pattern 14 | * **title** - the title for a given annotation 15 | * **comment** - the description for a given annotation 16 | 17 | ## JSON Example 18 | 19 | This is an example of an annotation saved as part of `annotations.js` that will be added to an element with the class `logo`: 20 | 21 | ```javascript 22 | { 23 | "el": ".logo", 24 | "title" : "Logo", 25 | "comment": "The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.

Further reading: Optimizing Web Experiences for High Resolution Screens

" 26 | } 27 | ``` 28 | 29 | ## Markdown Example 30 | 31 | This is an example of an annotation saved as part of `annotations.md` that will be added to an element with the class `logo`: 32 | 33 | ``` 34 | --- 35 | el: .logo 36 | title: Logo 37 | --- 38 | The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images. 39 | 40 | Further reading: [Optimizing Web Experiences for High Resolution Screens](http://bradfrostweb.com/blog/mobile/hi-res-optimization/) 41 | ``` 42 | 43 | To separate multiple annotations within one file use `~*~` between annotations. 44 | 45 | ``` 46 | --- 47 | el: .logo 48 | title: Logo 49 | --- 50 | The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images. 51 | 52 | Further reading: [Optimizing Web Experiences for High Resolution Screens](http://bradfrostweb.com/blog/mobile/hi-res-optimization/) 53 | ~*~ 54 | --- 55 | el: .hamburger 56 | title: Sandwiches Considered Harmful 57 | --- 58 | According to everyone, hamburger menus are not obvious, and obvious always wins. 59 | 60 | Further reading: [Hamburger Menus and Hidden Navigation Hurt UX Metrics](https://www.nngroup.com/articles/hamburger-menus/) 61 | ``` 62 | 63 | ## Viewing Annotations 64 | 65 | In order to view annotations click "Show Pattern Info" in the Pattern Lab toolbar. 66 | -------------------------------------------------------------------------------- /docs/pattern-converting.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Converting Old Patterns | Pattern Lab 4 | heading: Converting Old Patterns 5 | --- 6 | 7 | 8 | You may have invested time in building patterns for Brad's original edition of Pattern Lab but now want to convert them so they can be used with the new PHP version of Pattern Lab. To convert them all you need to do is swap out the old `inc()` calls for the Mustache-based [shorthand partials syntax](/docs/pattern-including.html). For example, let's say this was a call to a pattern using the original syntax: 9 | 10 | 11 | 12 | The new Mustache-based shorthand partials syntax would be: 13 | 14 | {% raw %}{{> atoms-logo }}{% endraw %} 15 | 16 | The only real difference between the two is that the pattern type, e.g. `atoms`, has to be exact when using the Mustache partials syntax. Otherwise, it should be very easy to convert between the two formats. -------------------------------------------------------------------------------- /docs/pattern-documenting.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Documenting Patterns | Pattern Lab 4 | heading: Documenting Patterns 5 | --- 6 | 7 | Pattern documentation gives developers and designers the ability to provide context for their patterns. The documentation file consists of Markdown with YAML front matter. It should follow this format: 8 | 9 | ``` 10 | --- 11 | title: Title for my pattern 12 | --- 13 | This is a *Markdown* description of my pattern. 14 | ``` 15 | 16 | The `title` attribute is used in Pattern Lab's navigation as well as in the styleguide views. The `description` is used in the styleguide views. 17 | 18 | Pattern documentation needs to have a `.md` file extension and match the name of the pattern it's documenting. For example, to document the following pattern: 19 | 20 | 00-atoms/images/landscape-16x9.mustache 21 | 22 | We'd name our documentation file: 23 | 24 | 00-atoms/images/landscape-16x9.md 25 | 26 | ## Documenting Pseudo-Patterns 27 | 28 | To add documentation to [pseudo-patterns](/docs/pattern-pseudo-patterns.html), replace the tilde sign (`~`) with a dash (`-`) when naming your documentation file. 29 | 30 | For example, to document the following pseudo-pattern: 31 | 32 | ``` 33 | 00-atoms/button/button~red.mustache 34 | ``` 35 | 36 | We'd name our documentation file: 37 | 38 | ``` 39 | 00-atoms/button/button-red.md 40 | ``` 41 | 42 | ## Adding More Attributes to the Front Matter 43 | 44 | A future update of Pattern Lab will support more front matter attributes including: state, order, hidden, links and tags. 45 | It will also support adding custom attributes that could be utilized by plugins. For example, GitHub issues related to patterns. 46 | -------------------------------------------------------------------------------- /docs/pattern-header-footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Modifying the Pattern Header & Footer | Pattern Lab 4 | heading: Modifying the Pattern Header & Footer 5 | --- 6 | 7 | To add your own assets like JavaScript and CSS to your patterns' header and footer you need to modify two files: 8 | 9 | * `./source/_meta/_00-head.mustache` 10 | * `./source/_meta/_01-foot.mustache` 11 | 12 | These files are added to every rendered pattern, "view all" page and style guide. To see your changes simply re-generate your site. 13 | 14 | ## Important: Don't Remove Two Things... 15 | 16 | **Do not remove the following two lines in these patterns:** 17 | 18 | * a tag referencing `patternLabHead` in `_00-head.mustache` 19 | * a tag referencing `patternLabFoot` in `_00-foot.mustache` 20 | 21 | Pattern Lab will not so mysteriously stop working if you do. 22 | -------------------------------------------------------------------------------- /docs/pattern-hiding.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Hiding Patterns in the Navigation | Pattern Lab 4 | heading: Hiding Patterns in the Navigation 5 | --- 6 | 7 | To remove a pattern from Pattern Lab's drop-down navigation and style guide add an underscore (`_`) to the beginning of the pattern name. For example, we may have a Google Map-based pattern that we don't need for a particular project. The path might look like: 8 | 9 | molecules/media/map.mustache 10 | 11 | To "hide" the pattern we add the underscore and re-generate our site: 12 | 13 | molecules/media/_map.mustache 14 | 15 | A hidden pattern can still be included in other patterns. 16 | 17 | Not all PatternEngines support hiding patterns. -------------------------------------------------------------------------------- /docs/pattern-including.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Including Patterns | Pattern Lab 4 | heading: Including Patterns 5 | --- 6 | 7 | To include one pattern within another, for example to create a molecule from several atoms, you can either use: 8 | 9 | * a shorthand include syntax or 10 | * the default include syntax for the template language you're using (e.g. Mustache, Twig, Handlebars). 11 | 12 | ## The Shorthand Include Syntax 13 | 14 | The shorthand include syntax is less verbose than the default include syntax for many template languages. The shorthand syntax uses the following format: 15 | 16 | [patternType]-[patternName] 17 | 18 | For example, to include the following pattern in a molecule: 19 | 20 | 00-atoms/images/landscape-16x9.mustache 21 | 22 | The shorthand include syntax would be: 23 | 24 | atoms-landscape-16x9 25 | 26 | The pattern type matches the top-level folder and is `atoms`. The pattern name matches the template file and is `landscape-16x9`. Any digits used for ordering are _dropped_ from both the pattern type and pattern name. Pattern subtypes are _never_ a part of the shorthand include syntax. This way patterns can be re-organized within a pattern type and/or by using digits without needing to change your pattern includes. 27 | 28 | The following are examples of using the shorthand include syntax with our supported PatternEngines: 29 | 30 | ``` 31 | {% raw %}{{> atoms-landscape-16x9 }} // Mustache{% endraw %} 32 | {% raw %}{% include "atoms-landscape-16x9" %} // Twig{% endraw %} 33 | ``` 34 | 35 | The shorthand syntax also allows for fuzzy matching on pattern names. This means that if you feel your pattern name is going to be unique within a given pattern type you can supply just the unique part of the pattern name and the partial will be included correctly. For example, using the shorthand syntax the pattern `atoms-landscape-16x9.mustache` could be written as: 36 | 37 | atoms-16x9 38 | 39 | *Warning:* Because subtypes are not included in the shorthand include syntax a given pattern name needs to be unique within its _pattern type_ and not just its pattern subtype. If you run into this problem you can do one of two things: 40 | 41 | * use the default include syntax for your template language or 42 | * give your pattern a unique name and use [the pattern's documentation](/docs/pattern-documentation.html) to provide the pattern name 43 | 44 | 45 | ## The Default Include Syntax 46 | 47 | If you need more specificity when including patterns the PHP and Node versions of Pattern Lab also support the include syntax for the template language that you're using. For example, the syntax for Mustache is the path to the pattern minus the `.mustache` extension. Let's say we wanted to include the following pattern in a molecule: 48 | 49 | 00-atoms/images/landscape-16x9.mustache 50 | 51 | The default Mustache include syntax would be: 52 | 53 | {% raw %}{{> 00-atoms/images/landscape-16x9 }}{% endraw %} 54 | 55 | **Important:** Unlike the shorthand include syntax the template language specific include syntax **must** include any digits used for ordering and subtype directories. Pattern paths need to be updated when either is changed for a given pattern. 56 | 57 | ## Examples and Gotchas 58 | 59 | Here are some examples of how to include patterns as well as some gotchas. 60 | 61 | ``` 62 | {% raw %}// partials to match 63 | 00-atoms/global/05-test.mustache 64 | 00-atoms/global/06-test.mustache 65 | 00-atoms/global/test.mustache 66 | 00-atoms/global/test-with-picture.mustache 67 | 68 | // using the shorthand partials syntax 69 | {{> atoms-test }} // will match 00-atoms/global/05-test.mustache 70 | // using the shorthand syntax you'll never be able to match 06-test nor test in this scenario 71 | {{> atoms-test-with-picture }} // will match 00-atoms/global/test-with-picture.mustache 72 | {{> atoms-test-wit }} // will match 00-atoms/global/test-with-picture.mustache 73 | 74 | // using the default mustache partials syntax 75 | {{> atoms/global/05-test }} // won't match anything because atoms is missing its digits 76 | {{> 00-atoms/global/06-test }} // will match 00-atoms/global/06-test.mustache{% endraw %} 77 | ``` 78 | -------------------------------------------------------------------------------- /docs/pattern-linking.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Pattern Lab's Special Query String Variables | Pattern Lab 4 | heading: Pattern Lab's Special Query String Variables 5 | --- 6 | 7 | 8 | Pattern Lab comes with support for a number of special query string variables to help you share patterns with clients. These query string variables include ways to link to patterns, set the Pattern Lab viewport to a specific width, open various views as well as start Hay and disco modes on page load. There are lots of options: 9 | 10 | * [Linking to Specific Patterns](#link-pattern) 11 | * [Setting the Default Width for the Viewport](#default-width) 12 | * [Opening Annotations View on Page Load](#annotations-view) 13 | * [Opening Code View on Page Load](#code-view) 14 | * [Starting Hay Mode on Page Load](#hay-mode) 15 | * [Starting Disco Mode on Page Load](#disco-mode) 16 | 17 | ## Linking to Specific Patterns 18 | 19 | You can link directly to any pattern listed on the Pattern Lab website. This might be useful when asking clients for feedback on a particular template or page pattern. If you want to [link from one pattern to another use the `link` variable](/docs/data-link-variable.html). 20 | 21 | ### Copy & Paste 22 | 23 | The simplest method is to copy the address found in the address bar. 24 | 25 | ### Manually Creating the Link 26 | 27 | It's also very easy to create a link manually. Simply append `?p=pattern-name` to the end of the address for your Pattern Lab website. For example, if we wanted to link to the `templates-article` pattern we'd add the following to the address for our Pattern Lab website: 28 | 29 | ``` 30 | ?p=templates-article 31 | ``` 32 | 33 | The direct link feature supports the [shorthand partials syntax](/docs/pattern-including.html) found in the PHP and Node versions of Pattern Lab. Just provide part of a pattern name and Pattern Lab will attempt to resolve it. 34 | 35 | ## Setting the Default Width for the Viewport 36 | 37 | You can load a specific viewport size by using the `w` query string variable. 38 | 39 | ``` 40 | http://patternlab.localhost/?w=320 (sets the viewport to 320px) 41 | http://patternlab.localhost/?w=400px (sets the viewport to 400px) 42 | http://patternlab.localhost/?w=40em (sets the viewport to 40em or 640px) 43 | ``` 44 | 45 | And it works with the `p` query string variable so you can also do: 46 | 47 | ``` 48 | http://patternlab.localhost/?p=atoms-landscape-4x3&w=400px 49 | ``` 50 | 51 | ## Opening Annotations View on Page Load 52 | 53 | When sending a particular pattern to a client for review you may not want to include directions for how to open annotations. You can force the annotations view to open on page load by using the `view` query string variables with the values `annotations` or `a`: 54 | 55 | ``` 56 | http://patternlab.localhost/?p=templates-homepage&view=annotations 57 | http://patternlab.localhost/?p=templates-homepage&view=a 58 | ``` 59 | 60 | You can also force the annotations panel to scroll to a particular item by including the query string variable `number`. To scroll to the fifth element in the list of annotations you'd do the following: 61 | 62 | ``` 63 | http://patternlab.localhost/?p=templates-homepage&view=annotations&number=5 64 | ``` 65 | 66 | ## Opening Code View on Page Load 67 | 68 | When sending a particular pattern to a client for review you may not want to include directions for how to open the code view. You can force the code view to open on page load by using the `view` query string variables with the values `code` or `c`: 69 | 70 | ``` 71 | http://patternlab.localhost/?p=templates-homepage&view=code 72 | http://patternlab.localhost/?p=templates-homepage&view=c 73 | ``` 74 | 75 | You can also force the HTML tab mark-up to be highlighted for copying by including the query string variable `copy`. 76 | 77 | ``` 78 | http://patternlab.localhost/?p=templates-homepage&view=code©=true 79 | ``` 80 | 81 | ## Starting Hay Mode on Page Load 82 | 83 | You can start Hay mode automatically when the page is loaded by using the `h` or `hay` query string variables. 84 | 85 | ``` 86 | http://patternlab.localhost/?h=true 87 | http://patternlab.localhost/?hay=true 88 | ``` 89 | 90 | And it works with the `p` query string variable so you can also do: 91 | 92 | ``` 93 | http://patternlab.localhost/?p=atoms-landscape-4x3&h=true 94 | ``` 95 | 96 | ## Starting Disco Mode on Page Load 97 | 98 | You can start disco mode automatically when the page is loaded by using the `d` or `disco` query string variables. 99 | 100 | ``` 101 | http://patternlab.localhost/?d=true 102 | http://patternlab.localhost/?disco=true 103 | ``` 104 | 105 | And it works with the `p` query string variable so you can also do: 106 | 107 | ``` 108 | http://patternlab.localhost/?p=atoms-landscape-4x3&d=true 109 | ``` -------------------------------------------------------------------------------- /docs/pattern-managing-assets.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Managing Pattern Assets | Pattern Lab 4 | heading: Managing Pattern Assets 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Assets for patterns - including JavaScript, CSS, and images - should be stored and edited in the `./source/` directory. Pattern Lab will move these assets to the `./public/` directory for you when you generate your site or when you watch the `./source/` directory for changes. *You can name and organize your assets however you like.* If you would like to use `./source/stylesheets/` to store your styles instead of `./source/css/` you can do that. The structure will be maintained when they're moved to the `./public/` directory. 10 | 11 | Pattern Lab ships with copy tasks in the `Gruntfile.js` or `Gulpfile.js` of [the Editions](https://github.com/pattern-lab/?utf8=%E2%9C%93&query=edition-node) that copy your assets for you. 12 | 13 | This structure is meant to be extended to suit your purposes. Change targets, move files, or ignore certain filetypes altogether. **Note**: If you make changes to `Gruntfile.js` or `Gulpfile.js`, such as to copy a new directory, and have [auto re-generation and browser reload enabled](/docs/advanced-auto-regenerate.html#node), you will need to stop and start your tasks to pick up the changes. 14 | 15 | ## Configuring Asset Locations 16 | 17 | Pattern Lab has a configuration object which allows users to separate source patterns and assets from what is generated. The paths are managed within `patternlab-config.json`, found at the root of the edition project. The contents are sampled here: 18 | 19 | ```javascript 20 | "paths" : { 21 | "source" : { 22 | "root": "./source/", 23 | "patterns" : "./source/_patterns/", 24 | "data" : "./source/_data/", 25 | "meta": "./source/_meta/", 26 | "annotations" : "./source/_annotations/", 27 | "styleguide" : "./node_modules/styleguidekit-assets-default/dist/", 28 | "patternlabFiles" : "./node_modules/styleguidekit-mustache-default/views/", 29 | "js" : "./source/js", 30 | "images" : "./source/images", 31 | "fonts" : "./source/fonts", 32 | "css" : "./source/css/" 33 | }, 34 | "public" : { 35 | "root" : "./public/", 36 | "patterns" : "./public/patterns/", 37 | "data" : "./public/styleguide/data/", 38 | "annotations" : "./public/annotations/", 39 | "styleguide" : "./public/styleguide/", 40 | "js" : "./public/js", 41 | "images" : "./public/images", 42 | "fonts" : "./public/fonts", 43 | "css" : "./public/css" 44 | } 45 | } 46 | ``` 47 | 48 | Note how some sets of files even extend into the "vendor" `./node_modules/` directory. Relative paths are the default but absolute paths are supported also. You may also use these paths within the Grunt or Gulp taskfiles by referring to the `paths()` function. 49 | 50 | ## Adding Assets to the Pattern Header & Footer 51 | 52 | Static assets like Javascript and CSS **are not** added automagically to your patterns. You need to add them manually to the [shared pattern header and footer](/docs/advanced-auto-regenerate.html#node). 53 | 54 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 55 | 56 | {% endcapture %} 57 | {{ m | markdownify }} 58 | -------------------------------------------------------------------------------- /docs/pattern-mobile-view.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Viewing Patterns on a Mobile Device | Pattern Lab 4 | heading: Viewing Patterns on a Mobile Device 5 | --- 6 | 7 | **Note:** *The QR code generator and xipHostname configuration option were introduced in v0.7.0 of the PHP version of Pattern Lab. As of v0.7.9 it is off by default. Turn it on in config.ini.* 8 | 9 | 10 | While the resizing toolbar is nice it's always good to review your patterns on real mobile devices. Depending on where your patterns are located the directions are slightly different. 11 | 12 | ## For Patterns Hosted Locally on Your Computer 13 | 14 | For an instance of the PHP version of Pattern Lab hosted locally you can do the following. These directions assume that you're using Apache to host your Pattern Lab website locally and that you've set-up a `ServerAlias` for your site using `xip.io`. The `ServerAlias` should look like `patternlab.*.xip.io` 15 | 16 | 1. Install a QR code reader on your mobile device 17 | 2. Make sure `xipHostname` in `config/config.ini` matches your `xip.io` hostname in Apache 18 | 3. Make sure your mobile device and computer are on the same WiFi network 19 | 4. Generate your website 20 | 5. Navigate to the pattern you want to view on your mobile device 21 | 6. Scan the auto-generated QR code found under the gear icon in Pattern Lab's toolbar 22 | 23 | If you don't like QR codes you can also do the following: 24 | 25 | 1. Note the IP address for your computer. On Mac OS X this is found under System Preferences > Sharing 26 | 2. Replace the star with your IP address in the following address: `patternlab.*.xip.io` 27 | 3. Enter that into the browser on your mobile device 28 | 29 | ## For Patterns Hosted on a Server 30 | 31 | For an instance of the PHP version of Pattern Lab hosted on a server you can do the following: 32 | 33 | 1. Install a QR code reader on your mobile device 34 | 2. Make sure `xipHostname` in `config/config.ini` is **blank** 35 | 3. Generate your website 36 | 4. Upload it to your server 37 | 5. Navigate to the pattern you want to view on your mobile device 38 | 6. Scan the auto-generated QR code found under the gear icon in Pattern Lab's toolbar 39 | 40 | If you don't like QR codes you can simply visit the website in your browser. 41 | -------------------------------------------------------------------------------- /docs/pattern-organization.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Overview of Patterns | Pattern Lab 4 | heading: Overview of Patterns 5 | --- 6 | 7 | Patterns can be found in `./source/_patterns/`. Patterns must be written in the template languages supported by Pattern Lab's PatternEngines. For PHP the supported PatternEngines are Mustache and Twig. For Node there are [several more PatternEngines to choose from](/docs/advanced-template-language-and-pattern-engines.html). 8 | 9 | ## How Patterns Are Organized 10 | 11 | Patterns are organized in a nested folder structure under `./source/_patterns/`. This allows the PHP and Node versions of Pattern Lab to automatically find and build assets like the "view all" pages and the drop down navigation. Pattern Lab uses the following organizational structure: 12 | 13 | [patternType]/[patternSubtype]/[patternName].[patternExtension] 14 | 15 | Here are the parts: 16 | 17 | * `patternType` denotes the overall pattern type. If using Atomic Design this will be something like "atoms" or "molecules" but it can be anything you want. For example, "components" or "elements." 18 | * `patternSubtype` denotes the sub-type of pattern and is _optional_. This helps to organize patterns under an overall pattern type in the drop downs in Pattern Lab. For example, a "blocks" pattern subtype under the "molecules" pattern type. 19 | * `patternName` is the name of the pattern. This is used when the pattern is displayed in the drop downs in Pattern Lab. 20 | * `patternExtension` is the file extension that tells the PatternEngine to render the pattern. For example, `.mustache`. 21 | 22 | Dashes (`-`) in your pattern types, pattern subtypes or pattern names will be replaced with spaces. For example, if you want a pattern to be displayed in the drop-down as "Hamburger Navigation" and you're using the Mustache PatternEngine you should name it `hamburger-navigation.mustache`. 23 | 24 | ## Pattern Type Naming Conventions 25 | 26 | You do **not** have to use the Atomic Design naming convention when organizing your patterns. You can name your pattern types whatever you like and use as many or as few as you like. For example, you could use the pattern types Nachos, Tacos, and Burritos instead of Atoms, Molecules, and Organisms. 27 | 28 | ## Ordering 29 | 30 | By default, pattern types, pattern subtypes and patterns are ordered alphabetically. If you want more control over their ordering please refer to "[Reorganizing Patterns](/docs/pattern-reorganizing.html)." 31 | 32 | ## Deeper Nesting 33 | 34 | Both PHP and Node versions support nesting of folders under `patternSubtype`. For example, you may want to organize your [pattern documentation](/docs/pattern-documenting.html), pattern, Sass files and [pseudo-patterns](/docs/pattern-pseudo-patterns.html) in one directory like so: 35 | 36 | - molecules/ 37 | - blocks/ 38 | - media-block/ 39 | - media-block.md 40 | - media-block.mustache 41 | - media-block.scss 42 | - media-block~variant1.json 43 | - media-block~variant2.json 44 | 45 | In this example the `media-block/` directory is ignored for the purposes of generating breadcrumbs and navigation in the Pattern Lab front-end but the documentation, pattern and pseudo-patterns are still rendered. 46 | 47 | Folders can be nested under `media-block/` if desired but this is discouraged because of possible collisions when using the [shorthand partial syntax](http://patternlab.io/docs/pattern-including.html). 48 | -------------------------------------------------------------------------------- /docs/pattern-parameters.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Using Pattern Parameters | Pattern Lab 4 | heading: Using Pattern Parameters 5 | --- 6 | 7 | **Important:** Pattern parameters are only supported by the PHP and Node Mustache PatternEngines. Other template languages provide better solutions to this problem. 8 | 9 | Pattern parameters are a **simple** mechanism for replacing Mustache variables in an included pattern. They are limited to replacing variables in the included pattern and **only** the included pattern. They are especially useful when including a single pattern multiple times in a molecule, template, or page and you want to supply unique data to that pattern each time it's included. Pattern parameters **do not** currently support the following: 10 | 11 | * sub-lists (_e.g. iteration of a section_), 12 | * long strings of text (_can be unwieldy_) 13 | * modifying/replacing variables in patterns included _within_ the targeted pattern 14 | 15 | Pattern parameters are Pattern Lab-specific, have no relationship to Mustache, and are implemented outside of Mustache. Learn more about pattern parameters: 16 | 17 | * [The Pattern Parameter Syntax](#pattern-parameter-syntax) 18 | * [Adding Pattern Parameters to Your Pattern Partial](#adding-pattern-parameters) 19 | * [Toggling Sections with Pattern Parameters](#toggling-sections) 20 | 21 | ## The Pattern Parameter Syntax 22 | 23 | The attributes listed in the pattern parameters need to match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. For example: 24 | 25 | {% raw %}{{> patternType-pattern(attribute1: value, attribute2: "value string") }}{% endraw %} 26 | 27 | Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values. 28 | 29 | ## Adding Pattern Parameters to Your Pattern Partial 30 | 31 | Let's look at a simple example for how we might use pattern parameters. First we'll set-up a pattern that might be included multiple times. We'll make it a simple "message" pattern with a single Mustache variable of `message`. 32 | 33 | ```html 34 | {% raw %}
{{ message }}
{% endraw %} 35 | ``` 36 | 37 | We'll organize it under Atoms > Global and call it "message" so it'll have the pattern partial of `atoms-message`. 38 | 39 | Now let's create a pattern that includes our message pattern partial multiple times. It might look like this. 40 | 41 | ```html 42 | {% raw %}
43 | {{> atoms-message }} 44 |
45 | A bunch of extra information 46 |
47 | {{> atoms-message }} 48 |
{% endraw %} 49 | ``` 50 | 51 | Using `data.json` or a pattern-specific JSON file we wouldn't be able to supply separate messages to each pattern partial. For example, if we defined `message` in our `data.json` as "this is an alert" then "this is an alert" would show up twice when our parent pattern was rendered. 52 | 53 | Instead we can use pattern parameters to supply unique messages for each instance. So let's show what that would look like: 54 | 55 | ```html 56 | {% raw %}
57 | {{> atoms-message(message: "this is an alert message") }} 58 |
59 | A bunch of extra information 60 |
61 | {{> atoms-message(message: "this is an informational message") }} 62 |
{% endraw %} 63 | ``` 64 | 65 | Now each pattern would have its very own message. 66 | 67 | ## Toggling Sections with Pattern Parameters 68 | 69 | While pattern parameters are not a one-to-one match for Mustache they do offer the ability to toggle sections of content. For example we might have the following in a generic header pattern called `organisms-header`: 70 | 71 | ```html 72 | {% raw %}
73 | {{# emergency }} 74 |
Emergency!!!
75 | {{/ emergency }} 76 |
77 | ... stuff ... 78 |
79 |
{% endraw %} 80 | ``` 81 | 82 | We call the header pattern in a template like so: 83 | 84 | ``` 85 | {% raw %}{{> organisms-header }}{% endraw %} 86 | ... stuff ... 87 | ``` 88 | 89 | By default, if we don't have an `emergency` attribute in our `data.json` or the pattern-specific JSON file for the template the emergency alert will never be rendered. Instead of modifying either of those two files we can use a boolean pattern param to show it instead like so: 90 | 91 | ``` 92 | {% raw %}{{> organisms-header(emergency: true) }}{% endraw %} 93 | ... stuff ... 94 | ``` 95 | 96 | Again, because pattern parameters aren't leveraging Mustache this may not fit the normal Mustache workflow. We still wanted to offer a way to quickly turn on and off sections of an included pattern. 97 | -------------------------------------------------------------------------------- /docs/pattern-pseudo-patterns.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Using Pseudo-Patterns | Pattern Lab 4 | heading: Using Pseudo-Patterns 5 | --- 6 | 7 | Pseudo-patterns give developers and designers the ability to quickly build multiple unique variants of an existing pattern. This feature is especially useful when developing template- and page-style patterns or showing the states of other patterns. 8 | 9 | ## The Pseudo-Pattern File Naming Convention 10 | 11 | Pseudo-patterns are similar to [pattern-specific JSON files](/docs/data-pattern-specific.html) but are hinted in such a way that a developer can build a variant of an existing pattern. The basic syntax: 12 | 13 | patternName~pseudo-pattern-name.json 14 | 15 | The tilde (`~`) and `.json` file extension are the hints that Pattern Lab uses to determine that this is a pseudo-pattern. The `patternName` tells Pattern Lab which existing pattern it should use when rendering the pseudo-pattern. The JSON file itself works exactly like the [pattern-specific JSON file](/docs/data-pattern-specific.html). It has the added benefit that the pseudo-pattern will also inherit any values from the existing pattern's pattern-specific JSON file. 16 | 17 | From a navigation and naming perspective `patternName` and `pseudoPatternName` will be combined. 18 | 19 | ## Adding Pseudo-Patterns to Your Project 20 | 21 | Adding a pseudo-pattern is as simple as naming it correctly and following the [pattern-specific JSON file](/docs/data-pattern-specific.html) instructions for organizing its content. Let's look at a simple example where we want to show an emergency notification on our homepage Mustache template. Our `03-templates/` directory might look like this: 22 | 23 | article.mustache 24 | blog.mustache 25 | homepage.mustache 26 | 27 | Our `homepage.mustache` template might look like this: 28 | 29 | ```html 30 | {% raw %}
31 | {{# emergency }} 32 |
Oh Noes! Emergency!
33 | {{/ emergency }} 34 | { ...a bunch of other content... } 35 |
{% endraw %} 36 | ``` 37 | 38 | If our `_data.json` file doesn't give a value for `emergency` that section will never show up when `homepage.mustache` is rendered. Obviously we'd need to show _both_ the regular and emergency states of the homepage but we don't want to duplicate the entire `homepage.mustache` template. That would be a maintenance nightmare. So let's add our pseudo-pattern: 39 | 40 | ``` 41 | article.mustache 42 | blog.mustache 43 | homepage.mustache 44 | homepage~emergency.json 45 | ``` 46 | 47 | In our pseudo-pattern, `00-homepage~emergency.json`, we add our `emergency` attribute: 48 | 49 | ```javascript 50 | {% raw %}{ 51 | "emergency": true 52 | }{% endraw %} 53 | ``` 54 | 55 | Now when we generate our site we'll have our homepage template rendered twice. Once as the regular template and once as a pseudo-pattern showing the emergency section. Note that the pseudo-pattern will show up in our navigation as `Homepage Emergency`. 56 | 57 | ## Using Pseudo-Patterns as Pattern Includes 58 | 59 | By default, pseudo-patterns **cannot** be used as pattern includes. The data included in the pseudo-pattern, the bit that actually controls the magic, cannot be accessed when rendering the pattern include. 60 | 61 | To utilize pseudo-patterns as pattern includes for the PHP version of Pattern Lab you can install the [Data Inheritance Plugin](https://github.com/pattern-lab/plugin-php-data-inheritance). 62 | 63 | 64 | ## Re-ordering Pseudo-Patterns 65 | 66 | To learn how to re-order pseudo-patterns, check the documentation for [Reorganizing Patterns](/docs/pattern-reorganizing.html). 67 | 68 | ## Documenting Pseudo-Patterns 69 | To learn how to document pseudo-patterns, check the documentation for [Documenting Patterns](/docs/pattern-documenting.html) to learn more. 70 | -------------------------------------------------------------------------------- /docs/pattern-reorganizing.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Reorganizing Patterns | Pattern Lab 4 | heading: Reorganizing Patterns 5 | --- 6 | 7 | By default, the PHP and Node versions of Pattern Lab organizes pattern types, pattern subtypes, and patterns alphabetically when displaying them in the drop-down navigation, pattern subtype "view all" pages, and the "all" style guide. This may not meet your needs. You can re-order pattern types, pattern subtypes and patterns by prefixing them with two digit numbers. 8 | 9 | For example, we'll look at how we can re-organize patterns. Using alphabetical ordering the `lists` pattern subtype in `atoms` looks like: 10 | 11 | ``` 12 | definition.mustache 13 | ordered.mustache 14 | unordered.mustache 15 | ``` 16 | 17 | This is also the order they'll show up in the drop-down navigation. Because you rarely need to see the definition list pattern maybe you want to have it show up last in the navigation. To re-order the patterns just add numbers to the beginning: 18 | 19 | ``` 20 | 01-ordered.mustache 21 | 02-unordered.mustache 22 | 03-definition.mustache 23 | ``` 24 | 25 | You may want to put some space between the numbers just in case you want to further re-order and not touch the other patterns. For example, a better default ordering might be: 26 | 27 | ``` 28 | 01-ordered.mustache 29 | 05-unordered.mustache 30 | 10-definition.mustache 31 | ``` 32 | 33 | The numbers will not show up when Pattern Lab displays the name of the pattern in the drop-down navigation. They're simply a re-ordering mechanism. 34 | 35 | ##Re-ordering Pseudo-Patterns 36 | 37 | The rules for re-ordering [pseudo-patterns](/docs/pattern-pseudo-patterns.html) are slightly different than normal patterns. The numbers go **after** the tilde sign (`~`) rather than at the beginning of the file name. For instance: 38 | 39 | ``` 40 | - pattern.mustache 41 | - pattern.yml 42 | - pattern~01-variation2.yml 43 | - pattern~02-variation3.yml 44 | - pattern~03-variation1.yml 45 | ``` 46 | -------------------------------------------------------------------------------- /docs/pattern-states.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Using Pattern States | Pattern Lab 4 | heading: Using Pattern States 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Pattern states provide your team and client a simple visual of the current state of patterns in Pattern Lab. Pattern states can track progress of a pattern from development, through client review, to completion or they can be used to give certain patterns specific classes. It's important to note that the state of a pattern can be influenced by its pattern partials. 10 | 11 | ## The Default Pattern States 12 | 13 | Pattern Lab comes with the following default pattern states: 14 | 15 | * **inprogress**: pattern is in development or being worked upon. a red dot. 16 | * **inreview**: pattern is ready for a client to look at and comment upon. a yellow dot. 17 | * **complete**: pattern is ready to be moved to production. a green dot. 18 | 19 | Any pattern that includes a pattern partial that has a lower pattern state will inherit that state. For example, a pattern with the state of `inreview` that includes a pattern partial with the state of `inprogress` will have its state overridden and set to `inprogress`. It will not change to `inreview` until the pattern partial has a state of `inreview` or `complete`. 20 | 21 | ## Giving Patterns a State 22 | 23 | Giving patterns a state is accomplished by setting the `state` frontmatter key on any pattern's companion `.md` file. Consider this media block pattern: 24 | 25 | ``` 26 | ./source/_patterns/molecules/blocks/media-block.mustache 27 | ``` 28 | 29 | We would create or edit a file in the same location, calling it `media-block.md`: 30 | 31 | ``` 32 | --- 33 | state: inreview 34 | --- 35 | The media block consists of... 36 | ``` 37 | 38 | ## Adding Customized States 39 | 40 | The three default states included with Pattern Lab might not be enough for everyone. To add customized states you should modify your own CSS files. **DO NOT** modify pattern states in `public/`. You cannot be assured these files won't be overwritten. 41 | 42 | You can use the following as your CSS template for new pattern states: 43 | 44 | ```css 45 | {% raw %}.newpatternstate:before { 46 | color: #B10DC9 !important; 47 | }{% endraw %} 48 | ``` 49 | 50 | Place this class inside `./source/css/pattern-scaffolding.css` to separate it from your css. Then add `newpatternstate` to your patterns' markdown `state` to have the new look show up. If you want to add it to the cascade of the default patterns you can modify `./patternlab-config.json`. Simply add your new pattern state to the `patternStateCascade` array. 51 | 52 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 53 | 54 | {% endcapture %} 55 | {{ m | markdownify }} 56 | -------------------------------------------------------------------------------- /docs/pattern-stylemodifier.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Using styleModifiers | Pattern Lab 4 | heading: Using styleModifiers 5 | --- 6 | 7 | **Important:** styleModifiers are only supported by the PHP and Node Mustache PatternEngines. Other template languages provide better solutions to this problem. 8 | 9 | styleModifiers provide a way to extend the shorthand include syntax to quickly pass one or more class names to the included pattern. 10 | 11 | ## Syntax 12 | 13 | The basic syntax: 14 | 15 | {% raw %}{{> patternType-pattern:styleModifier }}{% endraw %} 16 | 17 | To include multiple classes just separate styleModefiers by a pipe. For example: 18 | 19 | {% raw %}{{> patternType-pattern:styleModifier1|styleModifier2 }}{% endraw %} 20 | 21 | ## Example 22 | 23 | Let's look at a simple example where we add a `styleModifier` Mustache variable to a pattern called `atoms-message`. For this feature to work the Mustache variable *has* to be called `styleModifier`. 24 | 25 | ```html 26 | {% raw %}
{{ message }}
{% endraw %} 27 | ``` 28 | 29 | Now let's include the pattern partial: 30 | 31 | ```html 32 | {% raw %}
33 | {{> atoms-message:error }} 34 |
{% endraw %} 35 | ``` 36 | 37 | This would render as: 38 | 39 | ```html 40 |
41 |
42 |
43 | ``` 44 | 45 | We forgot to provide a message so we can do that too with [pattern parameters](/docs/pattern-parameters.html): 46 | 47 | ```html 48 | {% raw %}
49 | {{> atoms-message:error(message: "some error message") }} 50 |
{% endraw %} 51 | ``` 52 | 53 | Which would render as: 54 | 55 | ```html 56 |
57 |
some error message
58 |
59 | ``` 60 | -------------------------------------------------------------------------------- /docs/php/advanced-auto-regenerate.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Watching for Changes and Auto Regenerating Patterns | Pattern Lab 4 | heading: Watching for Changes and Auto Regenerating Patterns - PHP 5 | --- 6 | 7 | Pattern Lab can watch for changes to files in `./source/` and automatically rebuild the entire Pattern Lab website for you. Make your changes, save the file, and Pattern Lab takes care of the rest. 8 | 9 | ## How to Start Watching for Changes 10 | 11 | To start watching for changes do the following: 12 | 13 | 1. In a terminal window navigate to the root of your project 14 | 2. Type `php core/console --watch` 15 | 16 | To stop watching files use `CTRL+C` in the same terminal window. 17 | 18 | ### Only Watch for Changes to Pattern Lab Files 19 | 20 | If you use a task runner like Gulp or Grunt to compile Sass, JavaScript or images you may want Pattern Lab to only concern itself with its own files. To limit Pattern Lab to watch and move only its files do the following: 21 | 22 | 1. In a terminal window navigate to the root of your project 23 | 2. Type `php core/console --watch --patternsonly` 24 | 25 | Or, better yet, use this command within your Gulp or Grunt script. 26 | 27 | ### Start the Web Server & Watch for Changes at the Same Time 28 | 29 | If you're relying on Pattern Lab's server to view your content you'll want to run the watch and server with the same command. Do the following: 30 | 31 | 1. In a terminal window navigate to the root of your project 32 | 2. Type `php core/console --server --with-watch` 33 | 34 | You can also start the server and watch only patterns: 35 | 36 | 1. In a terminal window navigate to the root of your project 37 | 2. Type `php core/console --server --with-watch --patternsonly` 38 | 39 | To stop the server and watching files use `CTRL+C` in the same terminal window. 40 | 41 | ### Start the Web Server, Watch for Changes, and Reload the Browser at the Same Time 42 | 43 | The ultimate solution for working with Pattern Lab if you're not using a task runner is Pattern Lab's [Auto-Reload Plugin](https://github.com/pattern-lab/plugin-php-reload). Do the following: 44 | 45 | 1. In a terminal window navigate to the root of your project 46 | 2. Install the [Auto-Reload Plugin](https://github.com/pattern-lab/plugin-php-reload) using `composer require pattern-lab/plugin-reload` 47 | 3. Type `php core/console --server --with-watch` 48 | 49 | The Auto-Reload Plugin is automatically enabled when you install it. You can always [disable the plugin](https://github.com/pattern-lab/plugin-php-reload#disabling-the-plugin) if you need to. 50 | 51 | To stop the server, watching files, and auto-reload service use `CTRL+C` in the same terminal window. 52 | 53 | ## What Pattern Lab Will Watch 54 | 55 | By default, the PHP version of Pattern Lab will watch all files in `./source` except those that match the "ignore" configuration options in `config/config.yml`. When using `--patternsonly` Pattern Lab will only watch those directories in `./source` that start with an underscore. For example, `_patterns`. To learn how to modify what is ignored check out "[Managing Assets for a Pattern](/docs/pattern-managing-assets.html)". 56 | -------------------------------------------------------------------------------- /docs/php/advanced-clean-public.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Stopping public/ from Being "Cleaned" | Pattern Lab 4 | heading: Stopping `public/` from Being "Cleaned" - PHP 5 | --- 6 | -------------------------------------------------------------------------------- /docs/php/advanced-config-options.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Editing the Configuration Options | Pattern Lab 4 | heading: Editing the Configuration Options - PHP 5 | --- 6 | 7 | Pattern Lab comes with a simple configuration file that allows you to modify certain aspects of the system. The configuration file can be found in `./config/config.yml`. 8 | -------------------------------------------------------------------------------- /docs/php/advanced-exporting-patterns.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Exporting Patterns | Pattern Lab 4 | heading: Exporting Patterns - PHP 5 | --- 6 | 7 | Pattern Lab can export all of your patterns for you sans Pattern Lab's CSS and JavaScript. To export your patterns do the following: 8 | 9 | 1. In a terminal window navigate to the root of your project 10 | 2. Type `php core/console --export` 11 | 12 | If you require your patterns to be exported without your global header and footer (_e.g. to export a clean molecule_) do the following: 13 | 14 | 1. In a terminal window navigate to the root of your project 15 | 2. Type `php core/console --export --clean` 16 | 17 | In both cases the patterns will be exported to `./export/patterns`. The export directory is one of the many directories that can be [configured and changed](/docs/editing-source-files.html). 18 | -------------------------------------------------------------------------------- /docs/php/advanced-page-follow.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Multi browser & Multi device Testing with Page Follow | Pattern Lab 4 | heading: Multi browser & Multi device Testing with Page Follow - PHP 5 | --- 6 | 7 | An auto-reload service was built into Pattern Lab 1. With Pattern Lab 2 this feature has been removed. This feature may return as a plugin in the same way that the [Auto-Reload service](/docs/advanced-reload-browser.html) did. 8 | -------------------------------------------------------------------------------- /docs/php/advanced-pattern-lab-nav.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Modifying Pattern Lab's Navigation | Pattern Lab 4 | heading: Modifying Pattern Lab's Navigation - PHP 5 | --- 6 | 7 | When sharing Pattern Lab with a client it may be beneficial to turn-off certain elements in the default navigation. To turn-off navigation elements do the following: 8 | 9 | 1. Open `./config/config.yml` 10 | 2. Add the keys for the elements you'd like to hide to the `ishControlsHide` configuration option 11 | 3. Re-generate your Pattern Lab site 12 | 13 | The following keys are supported and will hide their respective elements: 14 | 15 | ``` 16 | s 17 | m 18 | l 19 | full 20 | random 21 | disco 22 | hay 23 | find 24 | views-new 25 | tools-all 26 | tools-docs 27 | ``` 28 | 29 | `hay` is disabled by default. 30 | -------------------------------------------------------------------------------- /docs/php/advanced-reload-browser.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Auto Reloading the Browser Window When Changes Are Made | Pattern Lab 4 | heading: Auto Reloading the Browser Window When Changes Are Made - PHP 5 | --- 6 | 7 | An auto-reload service was built into Pattern Lab 1. With Pattern Lab 2 this feature has been turned into the [Auto-Reload Plugin](https://github.com/pattern-lab/plugin-php-reload). To install this plugin do the following: 8 | 9 | 1. In a terminal window navigate to the root of your project 10 | 2. Type `composer require pattern-lab/plugin-reload` 11 | 12 | The Auto-Reload Plugin is automatically enabled when you install it. You can always [disable the plugin](https://github.com/pattern-lab/plugin-php-reload#disabling-the-plugin) if you need to. 13 | 14 | This service is enabled when using the `--watch` or `--server --with-watch` commands. Learn more about [watching for changes](/docs/advanced-auto-regenerate.html). 15 | -------------------------------------------------------------------------------- /docs/php/advanced-starterkits.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Starterkits | Pattern Lab 4 | heading: Starterkits - PHP 5 | --- 6 | 7 | StarterKits can be installed via the following commands: 8 | 9 | ``` 10 | php core/console --starterkit --install [starterkit-name] 11 | ``` 12 | 13 | where [starterkit-name] is the name of the Starterkit. 14 | 15 | so... a complete example: 16 | 17 | ``` 18 | php core/console --starterkit --install pattern-lab/starterkit-mustache-demo 19 | ``` 20 | 21 | It is recommended that you do not install this StarterKit as a dependency for your Pattern Lab project via Composer. 22 | -------------------------------------------------------------------------------- /docs/php/changes-1-to-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Pattern Lab 1 to Pattern Lab 2 Changes | Pattern Lab 4 | heading: Pattern Lab 1 to Pattern Lab 2 Changes - PHP 5 | --- 6 | 7 | With Pattern Lab 2 in development for almost two years many under-the-hood changes have been implemented. For the most part a Pattern Lab 1 project should work with minimal changes in Pattern Lab 2. Here is a non-exhaustive list of new features in Pattern Lab 2: 8 | 9 | * complete rebuilding of core 10 | * support for Composer 11 | * support for more template languages (_currently Mustache and Twig_) 12 | * support for StarterKits allowing separation of a team's unique needs from Pattern Lab proper 13 | * event notification system, getters, setters, and a clean install process to allow for plugins 14 | * redesigned and rebuilt modal view 15 | * redesigned and rebuilt styleguide view 16 | * multi-source directory support 17 | * support for YAML in global data, pattern-specific data, and pseudo-patterns 18 | * can have multiple JSON/YAML files in `./_data/` 19 | * support for JSON/YAML linting to find errors 20 | * can set multiple classes using the style modifier 21 | * can use link.[pattern-name] within data to link to other patterns 22 | * pattern parameters support simple lists 23 | * pattern parameters act more like mustache (_but not exactly!_) 24 | * patternParameters can over listItem loop numbers 25 | * global pattern header and footer is now in `./source/_meta` 26 | * upgraded console utility 27 | * patterns and pattern subtypes can be documented in the styleguide by using `[pattern-name].md` or `[pattern-subtype].md` 28 | * view all pages for pattern sub-types 29 | * annotations can be defined using Markdown 30 | * patterns can be exported minus Pattern Lab mark-up 31 | * can hide individual patterns from "view all" view still available via the nav 32 | * can set a pattern to be the default pattern when loading Pattern Lab 33 | * can turn on modal view by default 34 | * implemented server 35 | * sayings can now be defined in the config 36 | * install process that makes it easier to install various components 37 | 38 | These are the features of Pattern Lab 1 that have become plugins: 39 | 40 | * Automatic Browser Reload 41 | 42 | These are the features of Pattern Lab 1 that have been removed in Pattern Lab 2: 43 | 44 | * QR Code Generator 45 | * Page Follow 46 | * MQs 47 | -------------------------------------------------------------------------------- /docs/php/command-line.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Using The Command Line Options | Pattern Lab 4 | heading: Using The Command Line Options - PHP 5 | --- 6 | 7 | To use Pattern Lab you must use the command line interface. To view the available commands when using Pattern Lab do the following: 8 | 9 | 1. In a terminal window navigate to the root of your project 10 | 2. Type `php core/console --help` 11 | 12 | To get the options for a particular command, for example the `--generate` command, you can type: 13 | 14 | php core/console --help --generate 15 | 16 | ## A Special Note About Windows 17 | 18 | To access the command prompt on Windows you can [follow the directions from Microsoft](http://windows.microsoft.com/en-us/windows-vista/open-a-command-prompt-window). After getting to the command prompt type the following to make sure you have PHP installed: 19 | 20 | php -v 21 | 22 | If you get an error and know that you've installed PHP you may need to [update your path variable so Windows can find PHP](http://willj.co/2012/10/run-wamp-php-windows-7-command-line/). 23 | -------------------------------------------------------------------------------- /docs/php/generating-pattern-lab.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Generating Pattern Lab | Pattern Lab 4 | heading: Generating Pattern Lab - PHP 5 | --- 6 | 7 | Pattern Lab consists of an empty shell when you first install it. To populate the public-facing side of Pattern Lab with your content and patterns do the following: 8 | 9 | 1. In a terminal window navigate to the root of your project 10 | 2. Type `php core/console --generate` 11 | 12 | Your Pattern Lab install should now be populated and [available for viewing](/docs/viewing-patterns.html). As you [make changes to your patterns](/docs/editing-source-files.html) you'll need re-generate your site using step 2 above. 13 | 14 | Manually re-generating your site after each change or collection of changes can be cumbersome. Pattern Lab can [watch files in the `./source/` directory for changes and re-generate the site automatically](/docs/advanced-auto-regenerate.html). The Pattern Lab website can also be [automatically reloaded](/docs/advanced-reload-browser.html). 15 | -------------------------------------------------------------------------------- /docs/php/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Pattern Lab Documentation 4 | --- 5 | 6 | 7 | 10 | 11 |
12 |
13 | 14 |
15 |

Getting Started

16 | {% include docs-nav-start.html %} 17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 |

Working with Patterns

25 | {% include docs-nav-patterns.html %} 26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 |

Working with Data

34 | {% include docs-nav-data.html %} 35 |
36 | 37 |
38 | 39 |
40 | 41 |
42 |

Advanced Features

43 | 44 | {% include docs-nav-advanced.html %} 45 |
46 | 47 |
48 |
49 | -------------------------------------------------------------------------------- /docs/php/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Installing Pattern Lab | Pattern Lab 4 | heading: Installing Pattern Lab - PHP 5 | --- 6 | 7 | {% capture m %} 8 | 9 | {% include download-php.html %} 10 | 11 | {% endcapture %} 12 | {{ m | markdownify }} 13 | -------------------------------------------------------------------------------- /docs/php/pattern-managing-assets.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Managing Pattern Assets | Pattern Lab 4 | heading: Managing Pattern Assets - PHP 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Assets for patterns - including JavaScript, CSS, and images - should be stored and edited in the `./source/` directory. Pattern Lab will move these assets to the `./public/` directory for you when you generate your site or when you watch the `./source/` directory for changes. **You can name and organize your assets however you like.** If you would like to use `./source/stylesheets/` to store your styles instead of `./source/css/` you can do that. There is nothing to configure. The structure will be maintained when they're moved to the `./public/` directory. 10 | 11 | ## Ignoring and Not Moving Assets Based on File Extension 12 | 13 | By default, Pattern Lab will not move assets with the following file extensions: 14 | 15 | * `.less` 16 | * `.scss` 17 | * `.DS_Store` 18 | 19 | To ignore more file extensions edit the `ie` configuration option in `./config/config.yml`. For example, to ignore `*.png` files your `ie` configuration option would look like: 20 | 21 | ie: 22 | - DS_Store 23 | - less 24 | - scss 25 | - png 26 | 27 | ## Ignoring and Not Moving Assets Based on Directory 28 | 29 | By default, the PHP version of Pattern Lab will ignore **all** assets in directories that exactly match: 30 | 31 | * `scss` 32 | 33 | To ignore more directories just edit the `id` configuration option in `./config/config.yml`. For example, to ignore directories named `test/` your `id` configuration option would look like: 34 | 35 | id: 36 | - scss 37 | - test 38 | 39 | **Important:** Pattern Lab will only ignore exact matches of ignored directories. For example, if you had a directory named `cool_scss/` it, and the assets underneath it, _would_ be moved to `./public/` even though `scss` was in the name of the directory. 40 | 41 | ## Adding Assets to the Pattern Header & Footer 42 | 43 | Static assets like Javascript and CSS **are not** added automagically to your patterns. You need to add them manually to the [shared pattern header and footer](/docs/pattern-header-footer.html). 44 | 45 | {% endcapture %} 46 | {{ m | markdownify }} 47 | -------------------------------------------------------------------------------- /docs/php/pattern-states.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Using Pattern States | Pattern Lab 4 | heading: Using Pattern States - PHP 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Pattern states provide your team and client a simple visual of the current state of patterns in Pattern Lab. Pattern states can track progress of a pattern from development, through client review, to completion or they can be used to give certain patterns specific classes. It's important to note that the state of a pattern can be influenced by its pattern partials. 10 | 11 | ## The Default Pattern States 12 | 13 | Pattern Lab comes with the following default pattern states: 14 | 15 | * **inprogress**: pattern is in development or being worked upon. a red dot. 16 | * **inreview**: pattern is ready for a client to look at and comment upon. a yellow dot. 17 | * **complete**: pattern is ready to be moved to production. a green dot. 18 | 19 | Any pattern that includes a pattern partial that has a lower pattern state will inherit that state. For example, a pattern with the state of `inreview` that includes a pattern partial with the state of `inprogress` will have its state overridden and set to `inprogress`. It will not change to `inreview` until the pattern partial has a state of `inreview` or `complete`. 20 | 21 | ## Giving Patterns a State 22 | 23 | Giving patterns a state is simply a matter of modifying the file name. If we wanted to give our `molecules-media-block` pattern a state of `inprogress` we'd change the file name from: 24 | 25 | ``` 26 | ./source/_patterns/01-molecules/02-blocks/00-media-block.mustache 27 | ``` 28 | 29 | to: 30 | 31 | ``` 32 | ./source/_patterns/01-molecules/02-blocks/00-media-block@inprogress.mustache 33 | ``` 34 | 35 | ## Adding Customized States 36 | 37 | The three default states included with Pattern Lab might not be enough for everyone. To add customized states you should modify your own CSS files. **DO NOT** modify `states.css` in `public/styleguide/css/`. This is because `states.css` will be overwritten in future upgrades. 38 | 39 | You can use the following as your CSS template for new pattern states: 40 | 41 | ```css 42 | {% raw %}.newpatternstate:before { 43 | color: #B10DC9 !important; 44 | }{% endraw %} 45 | ``` 46 | 47 | Then add `@newpatternstate` to your patterns to have the new look show up. If you want to add it to the cascade of the default patterns you can modify `./config/config.yml`. Simply add your new pattern state to the `patternStates` list. 48 | 49 | {% endcapture %} 50 | {{ m | markdownify }} 51 | -------------------------------------------------------------------------------- /docs/php/requirements.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Requirements | Pattern Lab 4 | heading: Requirements - PHP 5 | --- 6 | 7 | {% capture m %} 8 | 9 | The requirements for Pattern Lab 2 vary depending on what features you want to use. 10 | 11 | ## Minimum Requirements 12 | 13 | To use the basic features of Pattern Lab to compile patterns, you must have **PHP 5.4+** installed. On Mac OS X Pattern Lab should work "out of the box." If you're on Windows you can [download PHP from PHP.net](http://windows.php.net/download/). Pattern Lab comes with its own built-in web server. 14 | 15 | Because Pattern Lab's output consists of HTML, CSS, and JavaScript there are **no requirements** for hosting your Pattern Lab site. Simply upload the `./public/` directory to your host and you should be good to go. 16 | 17 | ## Highly Recommended: Composer 18 | 19 | Pattern Lab uses [Composer](https://getcomposer.org/) to manage project dependencies. While Pattern Lab can be downloaded as a Zip we highly recommend installing Composer so you can easily update your project in the future. Please follow the directions for [installing Composer](https://getcomposer.org/doc/00-intro.md#installation-linux-unix-osx) on the Composer website. We recommend you [install it globally](https://getcomposer.org/doc/00-intro.md#globally). 20 | 21 | {% endcapture %} 22 | {{ m | markdownify }} 23 | -------------------------------------------------------------------------------- /docs/php/upgrading.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Upgrading Pattern Lab | Pattern Lab 4 | heading: Upgrading Pattern Lab - PHP 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Pattern Lab 2 uses [Composer](https://getcomposer.org) to manage project dependencies. To upgrade an edition based on Pattern Lab 2 do the following: 10 | 11 | 1. In a terminal window navigate to the root of your project 12 | 2. Type `composer update` 13 | 14 | During the upgrade process Pattern Lab 2 will move or add any files that are required for the new version to work. It will also update your configuration as appropriate. If you don't have Composer installed please [follow the directions for installing Composer](https://getcomposer.org/doc/00-intro.md#installation-linux-unix-osx) that are available on the Composer website. We recommend you [install it globally](https://getcomposer.org/doc/00-intro.md#globally). 15 | 16 | ## Upgrading Pattern Lab 1 to Pattern Lab 2 17 | 18 | Pattern Lab 2 was a complete rewrite and reorganization of Pattern Lab 1. [Learn about the changes](/docs/changes-1-to-2.html). To upgrade do the following: 19 | 20 | 1. [Download](http://patternlab.io/download.html) the PHP edition that matches your needs 21 | 22 | If you chose a Mustache-based edition do the following: 23 | 24 | 1. Copy `./source` from your old project to your new edition 25 | 2. Copy `./source/_patterns/00-atoms/00-meta/_00-head.mustache` to `./source/_meta/_00-head.mustache` 26 | 3. Copy `./source/_patterns/00-atoms/00-meta/_01-foot.mustache` to `./source/_meta/_00-foot.mustache` (you can then delete `source/_patterns/00-atoms/00-meta/` directory) 27 | 4. In `./source/_meta/_00-head.mustache`, replace `{% raw %}{% pattern-lab-head %}{% endraw %}` with `{% raw %}{{{ patternLabHead }}}{% endraw %}` 28 | 5. In `./source/_meta/_00-foot.mustache` replace `{% raw %}{% pattern-lab-foot %}{% endraw %}` with `{% raw %}{{{ patternLabFoot }}}{% endraw %}` 29 | 6. Copy `./source/_data/annotations.js` to `./source/_annotations/annotations.js` 30 | 7. Remove the underscore in front of the JSON files in `source/data` (i.e. `data.json` not `_data.json`). 31 | 32 | 33 | 34 | If you chose another version do the above and convert the templates as appropriate. 35 | 36 | ## Learning About Upgrades 37 | 38 | New releases and upgrades are announced in Pattern Lab's [PHP room on Gitter](https://gitter.im/pattern-lab/php) and on Twitter at [@patternlabio](https://twitter.com/patternlabio). 39 | 40 | You can also determine if your version of Pattern Lab 2 can be upgraded yourself by doing the following: 41 | 42 | 1. In a terminal window navigate to the root of your project 43 | 2. Type `composer outdated` 44 | 45 | Two components of Pattern Lab 2 maintain CHANGELOGs as part of their "Releases" page on GitHub: 46 | 47 | * [pattern-lab/core](https://github.com/pattern-lab/patternlab-php-core/releases) 48 | * [pattern-lab/styleguidekit-assets-default](https://github.com/pattern-lab/styleguidekit-assets-default/releases) 49 | 50 | 51 | {% endcapture %} 52 | {{ m | markdownify }} 53 | -------------------------------------------------------------------------------- /docs/php/viewing-patterns.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Viewing Patterns | Pattern Lab 4 | heading: Viewing Patterns - PHP 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Pattern Lab utilizes PHP's [built-in web server](http://php.net/manual/en/features.commandline.webserver.php) to let you browse your generated patterns. To start the server do the following: 10 | 11 | 1. In a terminal window navigate to the root of your project 12 | 2. Type `php core/console --server` 13 | 14 | Your local Pattern Lab install should now be available for browsing at [http://localhost:8080](http://localhost:8080). 15 | 16 | {% endcapture %} 17 | {{ m | markdownify }} 18 | -------------------------------------------------------------------------------- /docs/requirements.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Requirements | Pattern Lab 4 | heading: Requirements 5 | --- 6 | 7 | {% capture m %} 8 | 9 | ## Minimum Requirements 10 | 11 | Pattern compilation is done with [Node](https://nodejs.org), using [npm](https://www.npmjs.com/) to manage project dependencies. You can follow the directions for [installing Node](https://nodejs.org/en/download/) on the Node website if you haven't done so already. Installation will include `npm`. The version of Node that maintainers develop against is documented [here](https://github.com/pattern-lab/patternlab-node/blob/dev/.nvmrc). Pattern Lab comes with its own local development webserver. 12 | 13 | Because Pattern Lab's output consists of HTML, CSS, and JavaScript there are **no requirements** for hosting your Pattern Lab site. Simply upload the `./public/` directory to your host and you should be good to go. 14 | 15 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 16 | 17 | {% endcapture %} 18 | {{ m | markdownify }} 19 | -------------------------------------------------------------------------------- /docs/upgrading.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Upgrading Pattern Lab | Pattern Lab 4 | heading: Upgrading Pattern Lab 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Pattern Lab uses [npm](https://www.npmjs.com/) to manage project dependencies. To upgrade an edition based on Pattern Lab 2 do the following: 10 | 11 | 1. In a terminal window navigate to the root of your project 12 | 2. Type `npm update` 13 | 14 | During the upgrade process Pattern Lab 2 will move or add any files that are required for the new version to work. It will also update your configuration as appropriate. 15 | 16 | It's recommended to review the [ChangeLog](https://github.com/pattern-lab/patternlab-node/wiki/ChangeLog) prior to any update so you are aware of upcoming changes. [Update Instructions](https://github.com/pattern-lab/patternlab-node/wiki/Upgrading) are also maintained on Github and may contain addenda should the normal upgrade process not apply. 17 | 18 | ## Upgrading from Pattern Lab 1.X to 2.X 19 | 20 | 1. Install a [node edition](https://github.com/pattern-lab?utf8=%E2%9C%93&query=edition-node) of Pattern Lab 2 21 | 2. Move the following files: 22 | 23 | * 1.X `source/*` to 2.X `source/` 24 | * 1.X `source/_patterns/00-atoms/00-meta/*` to 2.X `source/_meta/` (you can then delete `source/_patterns/00-atoms/00-meta/`) 25 | * 1.X `source/_data/annotations.js` to 2.X `source/_annotations/` 26 | 27 | 3. In `source/_meta/_00-head.mustache`, replace `{% raw %}{% pattern-lab-head %}{% endraw %}` with `{% raw %}{{{ patternLabHead }}}{% endraw %}` 28 | 4. In `source/_meta/_00-foot.mustache` replace `{% raw %}{% pattern-lab-foot %}{% endraw %}` with `{% raw %}{{{ patternLabFoot }}}{% endraw %}` 29 | 4. Remap the paths configured in the edition's `patternlab-config.json` file with yours, if needed. 30 | 31 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 32 | 33 | {% endcapture %} 34 | {{ m | markdownify }} 35 | -------------------------------------------------------------------------------- /docs/viewing-patterns.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Viewing Patterns | Pattern Lab 4 | heading: Viewing Patterns 5 | --- 6 | 7 | {% capture m %} 8 | 9 | Pattern Lab ships with [BrowserSync](https://www.browsersync.io/) to serve generated files to a browser. BrowserSync does a lot of cool things like reload files without a refresh, expose the site to your network, and synchronize page views across devices. To start the server do the following: 10 | 11 | 1. In a terminal window navigate to the root of your project 12 | 2. Type `gulp patternlab:serve` 13 | 14 | > If using grunt, substitute `grunt` for `gulp` above. 15 | 16 | Doing so will launch your local Pattern Lab install in your default browser at http://localhost:3000. The `Gruntfile|Gulpfile` at the root of your project contains additional configuration for BrowserSync. 17 | 18 | ## How to Stop the Server 19 | 20 | To stop watching and serving files on Mac OS X and Windows you can press`CTRL+C` in the command line window where the process is running. 21 | 22 | The PHP version of Pattern Lab is being deprecated in favor of a new unified Pattern Lab core. The PHP docs for this topic can be viewed here. 23 | 24 | {% endcapture %} 25 | {{ m | markdownify }} 26 | -------------------------------------------------------------------------------- /download.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Pattern Lab | Download 4 | --- 5 | 6 | 9 | 10 |
11 |
12 | 13 |
14 |

Node Versions

15 | {% include download-node.html %} 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 |

PHP Editions

24 | {% include download-php.html %} 25 |
26 |
27 | 28 |
29 | 30 |
31 |

Plugins

32 |

A variety of plugins can be installed in Pattern Lab to assist in your web development:

33 | 61 |
62 |
63 |
64 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pattern-lab/website/3a0b5dadb5aa5f09d86bed0fd22449563b3cb942/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Pattern Lab | Build Atomic Design Systems 4 | --- 5 | 6 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 |
24 |

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.

25 |
26 |
27 | 28 |
29 | 32 |
33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 |
43 |

At its core, Pattern Lab is a static site generator (powered by either PHP or Node) that stitches together UI components. But there's a whole lot more to it than that!

44 |
45 |
46 |
47 |

Nested Patterns

48 |

Pattern Lab lets you include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern, and see those changes reflected anywhere the pattern is included!

49 |
50 |
51 |

Design With Dynamic Data

52 |

Unlike static design tools, Pattern Lab lets you easily swap in different representative content into your components to ensure they can handle the dynamic nature of your content.

53 |
54 |
55 |
56 | 57 |
    58 | 59 |
  • 60 |

    Tool Agnostic

    61 |

    Pattern Lab doesn't impose any tools or libraries on you, which means you can choose what's right for your project. Like Sass? Cool, go for it! Don't need it? That's fine too! jQuery? No jQuery? Totally up to you.

    62 |
    • 63 | 64 |
  • 65 |

    Language Agnostic

    66 |

    Atomic design is a helpful mental model, not rigid doctrine. You can rename pattern categories to whatever makes the most sense for your organization and team.

    67 |
    • 68 | 69 |
  • 70 |

    Pattern Documentation

    71 |

    Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.

    72 |
    • 73 | 74 |
  • 75 |

    Viewport Resizer Tools

    76 |

    Pattern Lab has device-agnostic viewport resizing tools to ensure your design system is fully responsive and embraces the intrinsic fluidity of the web.

    77 |
    • 78 | 79 |
  • 80 |

    Annotations

    81 |

    Lose the gigantic static PDFs and annotate your living, breathing UI from within Pattern Lab. Clients and colleagues can review annotations right within the browser.

    82 |
    • 83 | 84 |
  • 85 |

    Pattern Lineage

    86 |

    Speed up your design, development, and QA time by quickly seeing which patterns make up any given component, as well as seeing where each component is employed.

    87 |
    • 88 | 89 |
  • 90 |

    Pattern Starter Kits

    91 |

    Spin up Pattern Lab loaded with frameworks like Bootstrap, Foundation, or Material Design. Or of course start from scratch and build your own custom design system.

    92 |
    • 93 | 94 |
  • 95 |

    Versatile

    96 |

    Pattern Lab can be used for simple rapid prototyping or for developing production-level frontend code. Some teams have even modified it to power their live sites!

    97 |
    • 98 | 99 |
  • 100 |

    Extensible

    101 |

    Choose your own templating engine to better match your production environment. Also you can or build a plugin to extend Pattern Lab's capabilities even further.

    102 |
    • 103 | 104 |
105 | 106 |
107 | 108 | 109 | 110 | 111 | 112 |
113 | 114 |
115 |
116 |
117 |

How It Works

118 |

Learn how to get Pattern Lab up and running, use patterns, work with dynamic data, and make the most of all Pattern Lab's features.

119 |
120 |
121 |
122 | 123 | View Pattern Lab's Documentation 124 | 125 |
126 |
127 | 128 |
129 | 130 | 131 | 132 | 133 | 134 |
135 | 136 |
137 |
138 |

Pattern Lab is brought to life by people from around the world. You can contribute to the project on Github and join the discussion on Gitter and Twitter.

139 |
140 |
141 | 142 | 143 |
144 | -------------------------------------------------------------------------------- /js/init.js: -------------------------------------------------------------------------------- 1 | $('body').addClass('js'); 2 | 3 | var languageBtn = $('.tabs__link '); 4 | var tabContent = $('.tabs__panel'); 5 | languageBtn.on('click', function(e){ 6 | e.preventDefault(); 7 | var thisHref = $(this).attr('href'); 8 | var thisHrefSub = $(this).attr('href').substring(1); 9 | addHash(thisHrefSub); 10 | openTab(thisHref); 11 | }); 12 | 13 | function addHash(id) { 14 | var changeSource = $('.tabs__link--is-active').attr('src'); 15 | $(this).attr("src", changeSource); 16 | history.pushState(null, null, '#' + id); 17 | } 18 | 19 | function openTab (target) { 20 | languageBtn.removeClass('tabs__link--is-active'); 21 | $('.tabs__link[href="' + target +'"]').addClass('tabs__link--is-active'); 22 | tabContent.removeClass('tabs__item--is-active'); 23 | $(target).addClass('tabs__item--is-active'); 24 | console.log(target); 25 | 26 | } 27 | if(window.location.hash) { 28 | var hash = window.location.hash; //Puts hash in variable, and removes the # character 29 | openTab(hash); 30 | setTimeout(function() { 31 | window.scrollTo(0, 0); 32 | }, 1); 33 | } 34 | else { 35 | $('.tabs__item:nth-of-type(1) .tabs__link').addClass('tabs__link--is-active'); 36 | $('#node').addClass('tabs__item--is-active'); 37 | } -------------------------------------------------------------------------------- /js/nav.js: -------------------------------------------------------------------------------- 1 | if (document.querySelector('.nav__btn')) { 2 | var navActive = false, 3 | navOpen = document.querySelector('.nav__btn'), 4 | navListOpen = document.querySelector('.nav__list'); 5 | 6 | navOpen.addEventListener("click", function(event){ 7 | event.preventDefault(); 8 | 9 | if (navActive === false) { 10 | navActive = true; 11 | navListOpen.classList.add("nav__list--is-active"); 12 | } else { 13 | navActive = false; 14 | navListOpen.classList.remove("nav__list--is-active"); 15 | } 16 | }); 17 | } 18 | -------------------------------------------------------------------------------- /js/pattern-engines.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // We use the new fetch API and promises. The fallback is to link to a list in the monorepo. 4 | if (window.fetch !== undefined && typeof Promise !== 'undefined' && window.localStorage !== undefined) { 5 | (function () { 6 | var repoPackagesUrl = 'https://api.github.com/repos/pattern-lab/patternlab-node/contents/packages?ref=master'; 7 | var packageJsonUrl = 'https://api.github.com/repos/pattern-lab/patternlab-node/contents/packages/engine-/package.json?ref=master'; 8 | 9 | var storeItem = (function () { 10 | try { 11 | window.localStorage.setItem('safari-private-browsing-test', true); 12 | window.localStorage.removeItem('safari-private-browsing-test'); 13 | 14 | return function (key, value) { 15 | window.localStorage.setItem(key, value); 16 | } 17 | } catch (e) { 18 | return function () {}; 19 | } 20 | })(); 21 | 22 | /** 23 | * Fetch and cache stuff from the GitHub API, or fetch from the cache available. The cache is 24 | * only valid for the current day (i.e. it will be invalidated at midnight). 25 | * 26 | * We need the cache because there is a rate limit on the GitHub API. 27 | * 28 | * We need proper error handling because we are likely to hit the rate limit in Safari 29 | * Private Browsing mode (saving to LocalStorage doesn't work in Private Browsing). 30 | * 31 | * @param {string} key Key to use when saving to LocalStorage 32 | * @param {string} url URL (to the GitHub API) 33 | * @param {function} fn Function that processes the response from the API 34 | * 35 | * @returns a promise 36 | */ 37 | function fetchAndCache(key, url, fn) { 38 | // Wait until the next day before looking for updates. This means that you will get updated 39 | // info "tomorrow", whenever "tomorrow" is for you. 40 | var date = window.localStorage.getItem(key + '_date'); 41 | var currentDate = new Date().toJSON().substr(0, 10); 42 | var cachedValue = window.localStorage.getItem(key); 43 | 44 | if (cachedValue !== null && date === currentDate) { 45 | return Promise.resolve(JSON.parse(cachedValue)); 46 | } 47 | 48 | return window.fetch(url, { mode: 'cors' }) 49 | .then(function (response) { 50 | if (response.status === 200) { 51 | return response.json() 52 | .then(function (jsonResponse) { 53 | var value = fn(jsonResponse); 54 | 55 | storeItem(key, JSON.stringify(value)); 56 | storeItem(key + '_date', currentDate); 57 | 58 | return value; 59 | }); 60 | } 61 | 62 | // If API call fails we hope that we still have something cached... 63 | return JSON.parse(cachedValue); 64 | }); 65 | } 66 | 67 | function getPatternEngines() { 68 | return fetchAndCache( 69 | 'patternEngines', 70 | repoPackagesUrl, 71 | function (data) { 72 | return data 73 | .sort() 74 | .filter(function (pkg) { 75 | return pkg.name.indexOf('engine-') === 0; 76 | }) 77 | .map(function (pkg) { 78 | return pkg.name.replace('engine-', ''); 79 | }); 80 | } 81 | ); 82 | } 83 | 84 | function getPatternEngineVersion(patternEngine) { 85 | // Fetch the version if it's not cached 86 | return fetchAndCache( 87 | patternEngine + '::version', 88 | packageJsonUrl.replace('', patternEngine), 89 | function (data) { 90 | return JSON.parse(atob(data.content)).version; 91 | } 92 | ); 93 | } 94 | 95 | 96 | // Use the GitHub API to get a list of all the packages in the monorepo 97 | getPatternEngines().then(function (patternEngines) { 98 | if (patternEngines === null || patternEngines.length === 0) { 99 | return; 100 | } 101 | 102 | var $list = $('#pattern-engine-list'); 103 | 104 | $list.html(''); 105 | 106 | patternEngines.forEach(function (patternEngine) { 107 | $list.append($( 108 | '
  • ' 109 | + '' + patternEngine + '' 110 | + ' (' 111 | + '@pattern-lab/engine-' + patternEngine + '' 112 | + ' ' 113 | + ')' 114 | + '
    • ')); 115 | 116 | // Add version info 117 | getPatternEngineVersion(patternEngine).then(function (version) { 118 | $('#' + patternEngine + '-version').text(version); 119 | }); 120 | }); 121 | }); 122 | })(); 123 | } -------------------------------------------------------------------------------- /resources.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Pattern Lab Resources 4 | --- 5 | 6 | 7 | 10 | 11 |
    12 |
    13 | 14 |
    15 |

    Style guides and atomic design

    16 | 17 | 22 | 23 |
    24 | 25 |
    26 | 27 |
    28 | 29 |
    30 |

    Pattern Lab Examples

    31 | 38 |
    39 | 40 |
    41 | 42 |
    43 | 44 |
    45 |

    Articles

    46 | 54 |
    55 | 56 |
    57 | 58 |
    59 | 60 |
    61 |

    Podcasts

    62 | 66 |
    67 | 68 |
    69 | 70 |
    71 | 72 |
    73 |

    Presentations

    74 | 79 |
    80 | 81 |
    82 |
    83 | -------------------------------------------------------------------------------- /roadmap.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Roadmap | Pattern Lab 4 | heading: Roadmap 5 | --- 6 | 7 | Pattern Lab's many repositories across GitHub can lead to confusion about what's all going on within the ecosystem. This document serves as a narrative companion to the [issues](https://github.com/pattern-lab/patternlab-node/issues), [milestones](https://github.com/pattern-lab/patternlab-node/milestones), [projects](https://github.com/pattern-lab/patternlab-node/projects), and [pull requests](https://github.com/pattern-lab/patternlab-node/pulls) that make up the future of the project. 8 | 9 | ## Pattern Lab 3.0 - Currently in Beta 10 | 11 | Pattern Lab 3.0 is an evolution of Pattern Lab 2.0 [ecosystem](/docs/advanced-ecosystem-overview.html), providing users and the internals more capabilities. 12 | 13 | ### Hello Monorepo 14 | 15 | The [Pattern Lab Node repository](https://github.com/pattern-lab/patternlab-node) is now converted to a monorepo, hosting a dozen or so repositories previously managed independently. This allows the team to develop and orchestrate the release of changes in lockstep. A good example would be when changes need to occur to all PatternEngines at once, or a configuration entry changes across core, the CLI, and Editions. The [CONTRIBUTING](https://github.com/pattern-lab/patternlab-node/blob/master/.github/CONTRIBUTING.md) document outlines how to get setup with the monorepo. 16 | 17 | Some repositories found on the [Pattern Lab organization](https://github.com/pattern-lab) at GitHub will remain, such as StarterKits (we want those to be easier to fork). Repositories now found in the monorepo will be archived once Pattern Lab Node 3.0 is released ([example](https://github.com/pattern-lab/plugin-node-tab/issues/25)). 18 | 19 | The structure of the monorepo may change over time, but having things under one roof also allows us to run integration tests across the entire ecosystem, display examples, and develop features simpler within development Editions. 20 | 21 | ### One Core Library 22 | 23 | Discussed at length at [this spec issue](https://github.com/pattern-lab/the-spec/issues/37), the unification of our core libraries serves to refocus our fragmented community. There are a lot of benefits mentioned inside that issue, but we'll recap here: 24 | 25 | - Pattern Lab output need not be laboriously cross-checked between two separate systems 26 | - Maintainers can respond quicker to the needs of the community 27 | - New features from contributors do not need to be labeled or cross-checked as "on" or "off" spec. 28 | - Major architectural refactoring can occur across a smaller footprint 29 | - Simplify the documentation 30 | - Unify the communities 31 | - Create a single entry point into the ecosystem 32 | - Users get a clearer sense of what features Pattern Lab offers 33 | 34 | We knew there would be challenges along the way. [Evan Lovely](https://twitter.com/evanlovely)'s support and work to bring the primary PHP PatternEngine, Twig [into PL Core](https://github.com/pattern-lab/patternlab-node/pull/897) cannot be overstated. 35 | 36 | ### UIKits 37 | 38 | UIKits are a new term in the Pattern Lab Ecosystem, attempting to evolve beyond the current Styleguidekit pattern which separated front-end templates from front-end assets like stylesheets and code. The existing `styleguidekit-assets-default` and `styleguidekit-mustache-default` have merged into `uikit-workshop` (more on that name in a bit). The hope is that by co-locating all front-end files in a single repository, users will be more capable of altering existing UIKits, making their own, even building multiple UIs from a single source of truth. 39 | 40 | Pattern Lab will support multiple UI outputs from a single set of source patterns - implementing what [Brad Frost](https://twitter.com/brad_frost) coined as the [workshop and the storefront](http://bradfrost.com/blog/post/the-workshop-and-the-storefront/). The default Pattern Lab experience is therefore the workshop, with a storefront to come within the Pattern Lab Node 3.0 lifecycle as another offering. You can read more about UIKits in the [initial pull request](https://github.com/pattern-lab/patternlab-node/pull/840) introducing them. 41 | 42 | UIKit Workshop is also undergoing an internal overhaul to modernize its tech stack. 43 | 44 | ### Async Rendering 45 | 46 | An important milestone in Pattern Lab 3.0's development was making the core rendering of `template + data = HTML` an asynchronous operation. This foundational method call bubbled all the up the stack, resulting in a refactor of most of the codebase. Now, most public methods return Promises. Asynchronous rendering allows PatternEngines that require this capability to be possible, such as Twig, React, Nunjucks, and maybe even HTTP-based engines in the future. 47 | 48 | ### Command Line Interface 49 | 50 | Central to the way Pattern Lab 3.0 will be installed, configured, and potentially ran, is a new Command Line Interface (CLI). Thank you to [Raphael Okon](https://twitter.com/raphaelokon_) for spearheading this effort. It allows users to more easily interact with the ecosystem and their local Pattern Lab. We've built the CLI to guide users into what combination of Edition and Starterkit they desire when starting a project. The CLI is also a drop-in new capability for existing projects, making installation of additional components like Plugins simpler. 51 | 52 | The CLI feels like a large opportunity for growth and new capabilities yet to be discovered. 53 | 54 | ### New PatternEngines: Twig and React 55 | 56 | As mentioned, Twig and React PatternEngines bring more capable templating and rendering systems into Pattern Lab, pursuant to the holy grail of component libraries, making patterns that are directly consumable in production systems. [Geoff Pursell](https://twitter.com/geoffpursell) is working toward basic React functionality within the Pattern Lab 3.0 lifecycle, while Evan works to solidify PHP-powered Twig rendering harnessed by Pattern Lab Node core. 57 | 58 | Expect these PatternEngines to become more refined within the Pattern Lab 3.0 lifecycle and complement our existing offerings. 59 | 60 | ### No Task Runners Needed 61 | 62 | Pattern Lab Node 2.0's reliance on Gulp or Grunt task runners was a crutch holding back adoption and integration opportunities. By having core manage the movement of assets from `source/` to `public/`, while still offering teams opportunities before and after build to alter these assets, we cut the cord from external task runners. 63 | 64 | This remains an area of exploration that the Pattern Lab 3.0 lifecycle will serve to prove out with the community. Are there limitations this forces users into? What can be improved? Feedback is needed. 65 | 66 | ### New Docs, New Demos, New Site 67 | 68 | Wow that's a lot of change! And with this change will come a need to refresh the content and styling of this site. Expect more in-depth How-To's, deeper dives into elements of the ecosystem previously kept behind the scenes, and overall more engagement. 69 | 70 | If you have ideas, let us know what you want in a documentation site. Or better yet, contribute! 71 | 72 | ## Pattern Lab 4.0 and Beyond 73 | 74 | See [this issue](https://github.com/pattern-lab/patternlab-node/issues/834). 75 | 76 | ❤️ 77 | --------------------------------------------------------------------------------