We’re going to start with the header. We’re going to get a little snippet of code from Patternbot that will include the header HTML onto our page. All magic-like.
Browse to the “Header” pattern in the pattern library. There’s a small button in the pattern toolbar named “Copy include” that will generate the snippet we need. Press it.
Now jump into the code for the
home.html file and paste, right inside the body.
<script type="application/json" data-pattern="header/header"></script>
Browse the pattern library and click the “Home” link in the navigation. It will pop open the homepage in a new tab.
Patternbot will go about it’s business to build the homepage by finding the correct pattern, denoted by the
<script> tag we just pasted, and including it onto the page in the exact same location as the include tag.
We didn’t even have to touch the header pattern!
A note on CSS files
We don’t need to connect any CSS files! Patternbot will find & connect all the CSS files inside the
patterns folder as well as connect the standard CSS files from within the
common folder automatically.
Pages themselves do not get their own CSS files. If the styling doesn’t exist within a pattern, it doesn’t exist at all.