Responsive web design slides

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