Pug 101 - HTML Preprocessor

"Pug life."
literally no one ever

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

  1. Hierarchy differences

    HTML 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.

  2. Tags and attribute differences

    IDs

    `#` denotes an ID for an element
    p#bubbles
    <p id='bubbles'></p>

    If no tag name is present, it defaults to div
    #blossom
    <div id='blossom'></p>

    Classes

    `.` denotes a class for an element
    h1.buttercup
    <h1 class='buttercup'></h1>

    Attributes

    Attributes are listed in parentheses
    a(href='http://utonium.com') Utonium Enterprises
    <a href='http://utonium.com'>Utonium Enterprises</a>

    Text content

    Text 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

Pug's official documentation

  1. Create a file named `index.pug` and place it inside a folder named `pug` inside `Documents/Prototypes`. Write pug that outputs the following:

    <h1>Hello, world</h1>

    Note: You'll be able to view this at http://localhost:8900/pug

    h1 Hello, world
  2. 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
    
  3. 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>
    

Advanced Pug

Includable components

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

  1. Site recreation

    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.

  2. Cat Vogue

    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
    
  3. Catlassian Magazine

    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