Responsive Design

Blackbird Project issues

CSS Grid Demo

CodeAcademy scores next week

CSS Quiz – study guide

——————————–

Responsive Starter Template

RESPONSIVE DESIGN PRINCIPLES:

mobile first!

flexible design (using % instead of px)
percentages! (do the math)
html flow
cascade principle
inheritance (only change styles that need to change)
max-width and min-width (set limit with max or min width)
height values are tricky
responsive images (100% of container parent or img {width: 100%;})
modular design
“breakpoints” based on design not device
display: none and display: block
turning off iOS resize

Media Queries Overview
workflow – sketches, create boxes of content

Approximate Breakpoints:
1200px
960px
768px
600px
480px
320px

Examples:

Responsive Design Resources:
guidelines-for-responsive-web-design

Recipe Hierarchy

Workshop

————————————————

Student Examples:

Previous Recipes projects,  Previous Recipes projects1, Previous Recipes projects 2,  Previous Recipes projects 3

Highlights: