Pug 101 - HTML Preprocessor
Pug is a preprocessor for HTML that makes it more readable, easier to write, and simpler to separate out into components. This will be your first intro to using Pug and utilizing the Pug compiler in Bowtie.
Differences between Pug and HTML
Hierarchy differencesHTML uses opening and closing tags to show hierarchy
<div id="parent"> <p class="child"></p> <p class="child"></p> </div>Pug uses indentation to show hierarchy
#parent p.child p.child
Side by side example
li h3 Preprocessors are our friends .slides h2 A preprocessor allows us to write easier code. p Here are the ones we will be using. .slide h4 HTML ul li Markdown li.highlight Pug li Haml h4 CSS ul li Scss li Sass li.highlight Stylus
<li> <h3>Preprocessors are our friends</h3> <div class="slides"> <h2>A preprocessor allows us to write easier code.</h2> <p>Here are the ones we will be using.</p> <div class="slide"> <h4>HTML</h4> <ul> <li>Markdown</li> <li class="highlight">Pug</li> <li>Haml</li> </ul> <h4>CSS</h4> <ul> <li>Scss</li> <li>Sass</li> <li class="highlight">Stylus</li> </ul> </div> </div> </li>
Note the lack of closing tags in pug. This allows for cleaner, more readable code. More importantly though it allows you to write front-end code faster; something quite important when prototyping.
Tags and attribute differences
IDs`#` denotes an ID for an element
If no tag name is present, it defaults to div
Classes`.` denotes a class for an element
AttributesAttributes are listed in parentheses
a(href='http://utonium.com') Utonium Enterprises
<a href='http://utonium.com'>Utonium Enterprises</a>
Text contentText has to be inline following a tag
p Sugar. Spice. Everything Nice. Chemical X.
<p>Sugar. Spice. Everything Nice. Chemical X.</p>Or on a new line starting with `|`
p | Sugar. | Spice. | Everything Nice. | Chemical X.
<p> Sugar. Spice. Everything Nice. Chemical X. </p>Or on any number of lines after a tag ending in `.`
p. Sugar. Spice. Everything Nice. Chemical X.
<p> Sugar. Spice. Everything Nice. Chemical X. </p>
Pug Exercises #1
Create a file named `index.pug` and place it inside a folder named `pug` inside `Documents/Prototypes`. Write pug that outputs the following:
Note: You'll be able to view this at http://localhost:8900/pug
h1 Hello, world
Create a new project inside bowtie by clicking the `+`. Open it in an editor by clicking the `</>` icon. Open your `index.pug` and write pug that outputs the following:
<link href="styles/style.styl" rel="stylesheet"/> <div id="content"> <h1>Prototyping Course</h1> <div class="week"> <h2>Week 1</h2> </div> </div>
link(href='styles/style.styl' rel='stylesheet') #content h1 Prototyping Course .week h2 Week 1
Write the resulting html from the pug file. Do so by hand - don't cheat and just toss it in the compiler :P
a#batman(href="google.com") a(id='batman' href='google.com')
<a id='batman' href='google.com'></a> <a id='batman' href='google.com'></a>
Pug can be used to separate components of the page into more modular parts. This allows for more reusability and flexibility when building pages.Full includes documentation
link(href='styles/style.styl' rel='stylesheet') #content h1 Prototyping Course include week1.pug
.week h2 Week 1 .timeslot h3 Morning
<link href="styles/style.styl" rel="stylesheet"/> <div id="content"> <h1>Prototyping Course</h1> <div class="week"> <h2>Week 1</h2> <div class="timeslot"> <h3>Morning</h3>
Note that `week1.pug` gets imported at the indentation level of the `include` statement. Even if nothing in the included pug file is indented, it will be set to the indentation level of the `include` statement.
Pug Exercises #2
Recreate the following site in pug:My First Website
Make sure to split up the sidebar into a separate pug file. To see the html of the site, right click and select "view source". That should help guide the pug you write. Be sure to import the same stylesheet as well.
Also if you don't fill in a joke, you fail the class.
Download multipleIncludes.zip and extract it in your prototypes folder.
Our newest edition of Cat Vogue is almost complete, we just need to fit the final pieces together. Using the given files recreate site shown below.
(hint: you only need to edit the `index.pug` file)
link(href='style.styl' rel='stylesheet') #header include header.pug include volume.pug .column1 include photo2.pug .column2 include article.pug
Download userIncludeExample.zip and extract it in your prototypes folder.
Our cat fancy site doesn't have enough users for our demo to MCB this afternoon. Add five users to our user list.
(hint: there's a `reader.pug` file in the directory)
link(href='style.styl' rel='stylesheet') h1 Catlassian Magazine h3 January, 2017 #content #article p. Did you know that eighty percent of Atlassian employees love cats? That's why this quarter we're firing one fifth of the Atlassian work force. We predict once 100% of employees love cats, morale will skyrocket. That's stunning, as is our favorite kitten Greg. img(src='greg.jpg' width='100%') p. What a cutie. I bet he's just a ball of love and energy. Not that I would actually know. Greg's a stock image cat, I don't even know if his name is Greg. My entire life is a lie. #ourReaders h3 Our Readers include reader.pug include reader.pug include reader.pug include reader.pug include reader.pug