responsive web design
Post on 27-Nov-2014
210 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related