Responsive Web Design Sean Wolfe Creative Director, Zivtech

What is Responsive Design?

• A Text editor • A local webserver (http://www.mamp.info/en)

• Github account (https://github.com)

• SASS (http://sass-lang.com/install)

• Compass (http://compass-style.org/install)

• Bundler (http://bundler.io)

• Livereload (http://livereload.com/)*

• Breakpoint (http://breakpoint-sass.com/)

• Jeet (http://jeet.gs/) !

*optional but highly recommended

Tools

What you need

• A grid based design!

• Flexible images and media!

• Media queries!

• Percentage based widths

Grid based design

Flexible Images

Media queries in CSS

#content { " width: 50%; }"

@media (max-width: 768px) { " #content { " " width: 75%; " } }"

@media (max-width: 320px) { " #content { " " width: 100%; " } }

Install Breakpoint

$ gem install breakpoint

@import "breakpoint";

Create Breakpoint Variables

$breakpoint-small-width: max-width 400px;"

$breakpoint-medium-width: max-width 768px;"

$breakpoint-large-width: max-width 1111px;

Breakpoints in SASS

#content { " width: 50%; " @include breakpoint($breakpoint-medium-width) { " " width: 75%; " } " @include breakpoint($breakpoint-small-width) { " " width: 100%; " } }

Using a grid system

Install Jeet

http://jeet.gs/

@import "../jeet/index";

Assignment

https://github.com/sean3325/bullfrog_responsive

git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git

Thank You!Questions?

sean@zivtech.com