Day 7 - More Layout Patterns with Flexbox

Housekeeping

• Achievements Round 2
  • Worth: 15 points
  • Due: Tuesday, October 4 @ 11:59pm
• CPNT 260 A2 marks will be returned Monday
• Late-start challenge
  • If 20 students submit an achievement by end-of-class tomorrow, we start at 9am on Monday!

1. Hack session: Codepen export to GitHub Pages?

If we can figure out how to easily publish a Codepen to GH Pages, you can submit Pens for Assignments 3 & 4.

Instructions for exporting a Pen

1. Export Codepen as a ZIP;
2. Expand the ZIP;
3. Copy the following files to a new GH repo;
   • /dist/index.html -> /index.html
   • /dist/style.css -> /css/style.css
   • /dist/script.js -> /js/script.js, if applicable
4. Enable GH Pages;
5. Submit to Brightspace as normal.

2. Slides: Flexbox Extras

Demo: Mobile-first media queries

Let’s build a nav bar that is vertical on mobile and horizontal on desktop.

• Sample Code

Watch party!

• Flexbox vs. CSS Grid — Which is Better? by Jenn Simmons

Activity: Horizontal nav with sticky footers

1. Try building a sticky footer using code found in the slides;
2. Add the yesterday’s horizontal nav bar to the layout.

3. Lab Time

• Achievements Round 2
• Assignment 3

Bonus Demo: Sticky footers with CSS Grid

Prep

Reading list

• Document and Website Structure
• Complete Guide to Grid
• Learning CSS Grid on MDN

Watch list

• Build a Classic Layout FAST in CSS Grid by Miriam Suzanne
  • You can stop watching @6:05; the rest describes an obscure way of doing the same thing (that you might like better).
• On Grid by Example:
  • Defining a Grid
  • The fr unit
  • Introducing minmax()

Search list

• “page layout patterns”

Digging deeper (optional)

• Game: Grid Garden
• Other CSS Grid videos on Grid by Example