Responsive Web Design with Django, Compass and the Less Framework

RESPONSIVE WEB DESIGN S M L XL with Django, Compass,
and the Less Famework

http://ic.kr/p/dwY5M RAISE YOUR HANDS IF…

the WHY the HOW

http://j.mp/responsive-ALA

http://ic.kr/p/89Utsr

http://ic.kr/p/8w5ULb

NOW YOU HAVE TWO PROBLEMS.

NOW YOU HAVE THREE PROBLEMS.

NOW YOU HAVE FIVE PROBLEMS?

NOW YOU HAVE MORE TARGETS.

http://ic.kr/p/6iLEF DESKTOP?

BEST VIEWED AT…

FIXED LAYOUTS 960px 1024px 1600px 960px

FLUID LAYOUTS 90% 920px 1024px 90% 1440px 1600px

LARGE Screen Size SMALL

FIXED PARTIAL CONTENT FIXED OR FLUID

OK OK FAIL FAIL WHY?

CONTINUOUS SPECTRUM LARGE Screen Size SMALL

CONTINUOUS SPECTRUM

CSS3 MEDIA QUERIES http://www.w3.org/TR/css3-mediaqueries/

IPHONE @media only screen and (max-width: 767px) { … }
LANDSCAPE IPHONE @media only screen and (min-width: 480px) and (max-width: 767px) { … } IPAD @media only screen and (min-width: 768px) and (max-width: 1023px) { … }

WELL, IE9 IS OK

PROGRESSIVE ENHANCEMENT DEFAULT CSS @MEDIA @MEDIA @MEDIA IE <9.0

WHAT RESPONDS? Typogaphy (typeface, size, leading) Layout (margins, padding, loats)
Paint (background images, colors) … basically, style.

http://mediaqueri.es iPhone iPad desktop w idescreen

WHAT DOESN’T?

LARGE <IMG> DATA http://ic.kr/p/354RJ2

RESPONSIVE* * not a utopia

“RESPONSIVE” DOES NOT SOLVE CONTENT ISSUES

“RESPONSIVE” DOES NOT SOLVE USABILITY ISSUES

“RESPONSIVE” DOES NOT SOLVE CREATES NEW ISSUES

“RESPONSIVE” IS JUST MODERN WEB DESIGN

http://ic.kr/p/FNeQW

YOU ROLL YOUR OWN For science. You masochist.

http://compass-style.org http://sass-lang.com Sass.

@impot "compass/reset"; @impot "compass/css3/tansition"; @impot "compass/utilities/geneal/cleaﬁx"; @impot "compass/layout/grid-background"; @impot "compass/utilities/color/contast";
@impot "compass/css3/border-adius"; @impot "compass/css3/images"; @impot "patials/base"; @impot "less/famework"; @impot "patials/more"; @impot "patials/exams/pygmentstheme"; @impot "patials/exams/global"; @impot "patials/exams/default"; @impot "patials/exams/tablet"; @impot "patials/exams/mobile"; @impot "patials/exams/wide-mobile";

from css impot reset, shotcuts from thirdpaty_app impot some_utilities from
my_app impot desktop, tablet, mobile

I WILL NEVER (wilingly) DEVELOP WITHOUT COMPASS AGAIN YES, IT’S
THAT GOOD , EVER

SIGH, RUBY. expot GEM_HOME="$VIRTUAL_ENV/gems" expot GEM_PATH="" Stick this in vitualenv’s
postactivate script. Now go PayPal @carljm some beer money.

$ gem install compass

$ gem install compass-less-plugin http://lessfamework.com https://github.com/wilhw/compass-less-plugin

MORE IS LESS https://gist.github.com/1009952 Inspired by 960 and Susy

COMPILED CSS How does I manage it? → GHETTO STUPID
WAY → SHINY FUTURE WAY

PROJECT /app1 /app2 settings.py /static ← in STATICFILES_DIRS /img /js
/css /static_root ← STATIC_ROOT

$ compass create -r less foo --using less $ mv
foo/sass sass $ mv foo/conﬁg.rb . $ rm -f foo

/app1 /app2 settings.py conﬁg.rb /sass screen.scss ← @impots the patias
/patials _base.scss _global.scss _default.scss _mobile.scss /static /img /js /css screen.css ← geneated by compass

SHINY FUTURE WAY? django-compressor

{% load compress %} {% compress css %} <link rel="stylesheet"
href="path/to/mycompass.scss"> {% endcompress %} COMPRESS_CSS_FILTERS = [ 'compressor.ﬁlters.compass.CompassFilter', ] settings.py template.html

high-px-atio wide-mobile mobile tablet default global

3 5 8 10 mobile wide mobile tablet desktop https://github.com/idangazit/wd_example

<body> <div id="wap"> <header> <h1>How are you gentlemen?</h1> </header> <div
class="odd" id="foo">...</div> <div class="even" id="bar">...</div> <div class="odd" id="baz">...</div> <div class="even" id="spam">...</div> </div> </body>

header>h1 { // global masthead styling } .even, .odd {
font-family: Georgia, Times, serif; margin-bottom: 4.0em; h1 { padding: 10px; font-size: 1.75em; color: #FBED64; } p { padding: 10px; line-height: 1.3em; color: rgba(255,255,255,0.75); } } _global.scss

#{$less-grid-element} { @include grid(10); @include less-grid-background(10); } header>h1 { font-size:
6.0em; margin-bottom: 0.5em; margin-top: 0.5em; } .even, .odd { @include columns(5); } .even { @include omega; } _default.scss

@media only screen and (max-width: 767px) { #{$less-grid-element} { @include
grid(3); @include less-grid-background(3); } header>h1 { font-size: 4.0em; margin-bottom: 0.3em; margin-top: 0.3em; } .even, .odd { @include columns(3); margin-bottom: 1.0em; @include omega; } } _mobile.scss

3 5 8 8 mobile wide mobile tablet desktop https://github.com/idangazit/wd_example

RESPONSIVE* * It’s a cool technique

MOBILE RESPONSIVE

IGNORE THE HYPE Be aware of this technique I think
it’s the quiet future of web design

KTHXBAI! Idan Gazit → @idangazit ig

Responsive Web Design with Django, Compass and ...

Responsive Web Design with Django, Compass and the Less Framework

More Decks by Idan Gazit

Other Decks in Design

Featured

Transcript