IAT-339: 03 Like Building Blocks

IAT-339: 03 Like Building Blocks — A slide deck

Close All Laptops

No laptops during lecture time please.

How do I test on consoles or smartwatches?

Does my site have to use the same structure or layout?

Show, Don't Tell

It is very important that when we start talking about brands, colours, layouts, (etc) that you show us what you intend.

"I'm thinking a sky blue" vs.

Use Cases

Please do make sure to think about P01 and what the user is there to do. Not what the company says the user should do.

Like Building Blocks
An example of a search form
According to "Atomic Design" principles; how would we break this down? (From Atomic Design Methodology)

Why We Style Guide

Style guides help us to:

  • Document our design
  • Test cross-browser
  • Avoid duplicates
  • Create a common language
  • Work in teams

Mailchimp Style Guide

Let's take a look at the The MailChimp Style Guide.

Yelp Style Guide

Let's also take a look at the The Yelp Style Guide.

For P01

As part of your first project you are building out style-guides, these should include both design and code for:

Interactive elements

  • An in-text link
  • Navigation button style
  • A submit and reset button for forms
  • A text input field and label

Text Styling

  • Three levels of headings
  • A paragraph
  • Bulleted lists
  • Numbered lists

Combined elements

  • Your main navigation
  • A product listing
  • The grid structure

Style Guide Component

At minimum, each component in your style guide should include:

  • A title for the element: Default Button Style
  • A CSS selector for the item: .button-default
  • A sample for the element in code: <a href="" class="button-default">Default Button</a>
  • The component rendered out:
    Default Button

Style Guide Template

We have put together a style-guide template for you to work with if you would like to, available at the course sub-site and on Canvas.

IAT-339 - P01: Process
Total Validator

Alternative Validators

Alternative options for checking semantics:

It's just a bunch of blocks
An animated gif illustrating the differences between responsive and adaptive web design
From the 9 Basic Principles of Responsive Web Design

Elements of Responsive Design

The pieces you need:

  • Relative units
  • Fluid grids
  • Media queries

What Are Relative Units?

Fluid Grids

Flexbox and Floats

Item #1
Item #2
Tousled gentrify whatever, art party sustainable.

Can I Use... Flexbox?


If you need support for flexbox, I recommend The Flexbox Cheatsheet Cheatsheet (Joni Trythall)

An animated gif illustrating how breakpoints work
From the 9 Basic Principles of Responsive Web Design

Media Queries and Breakpoints

@media (min-width: 40em) { .grid-col-1of2 { width: 100%; } }

Media queries

How we design responsibly

Let's check out some examples of media queries in action.


Runaway! Runaway...

You may:

  • Skip merrily through some posies (not provided)
  • Sternly stare at the floor
  • Ask a question

This week's labs

The low-down

  • Coding tutorial continuation
  • P01 crits + Andrew

Next week's lecture

Meet Your Toolkit

  • Git
  • Debugging code
  • Troubleshooting

Next week's reading

Chapter 1 of Git for Humans by David Demaree — it is important that you complete this reading

Requirements for Next Week

Please make sure to:

  1. Install GitKraken (Mac/PC) before lecture
  2. Complete the reading before lecture

Contacting Andrew


  • Via email at andrew.h@sfu.ca
  • During office hours on the mezzanine between 9-10am on Tuesdays or Thursdays