IAT-339: 03 Like Building Blocks

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

Like Building Blocks

Lecture outline

Covered this week:

  • Style guides
  • Responsive web design
  • Your first grids

Lecture slides will be available the day of the lecture.

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?

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: 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 9 Basic Principles of Responsive Web Design


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 9 Basic Principles of Responsive Web Design

Media Queries and Breakpoints

@media (min-width: 40em) { /* the condition */
.grid-col { /* the selector */
flex-grow: 2; /* conditional changes to selector */


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

This week's lab will be focused on P01 crits, and will include a visit from 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. Sign up for a Gitlab account at SFU Gitlab Server before lecture.
  2. Install GitKraken (Mac/PC) before lecture.
  3. Complete the reading before lecture.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Mondays from 8:30-9:20am and Thursdays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna