This document discusses responsive web design and the tools needed to implement it. It recommends using a grid-based design, flexible images and media, media queries, and percentage-based widths to create a responsive site. It also recommends specific tools like SASS, Compass, Breakpoint and Jeet to help with responsive design and provides code examples for how to use media queries and breakpoints.

1. Responsive
Web Design
Sean Wolfe
Creative Director, Zivtech

2. What is Responsive Design?

3. • 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

8. What you need
• A grid based design!
• Flexible images and media!
• Media queries!
• Percentage based widths

9. Grid based design

12. Flexible Images

14. Media queries in CSS
#content {
" width: 50%;
}"
@media (max-width: 768px) {
" #content {
" " width: 75%;
" }
}"
@media (max-width: 320px) {
" #content {
" " width: 100%;
" }
}

15. Install Breakpoint
$ gem install breakpoint
@import "breakpoint";

16. Create Breakpoint
Variables
$breakpoint-small-width: max-width 400px;"
$breakpoint-medium-width: max-width 768px;"
$breakpoint-large-width: max-width 1111px;

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

18. Using a grid system

19. Install Jeet
http://jeet.gs/
@import "../jeet/index";

20. Assignment
https://github.com/sean3325/
bullfrog_responsive
git remote add upstream https://github.com/
ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git

21. Thank You!
Questions?
sean@zivtech.com