responsive web design with django, compass, and the less framework
DESCRIPTION
My talk from DjangoCon Europe 2011TRANSCRIPT
RESPONSIVEWEBDESIGN
S M L XL
with Django, Compass, and the Less Famework
http://ic.kr/p/dwY5M
RAISE YOUR HANDS IF…
S M L XL
the
WHYthe
HOW
NOW YOU HAVE TWO PROBLEMS.
NOW YOU HAVE THREE PROBLEMS.
NOW YOU HAVE THREE PROBLEMS.
NOW YOU HAVE FIVE PROBLEMS?
NOW YOU HAVE FIVE PROBLEMS?
NOW YOU HAVE MORE TARGETS.
BEST VIEWED AT…
FIXED LAYOUTS
960px
1024px 1600px
960px
FLUID LAYOUTS
90%920px
1024px
90%1440px
1600px
LARGE
Screen Size
SMALL
FIXEDPARTIAL
CONTENT
FIXED OR FLUID
OK OKFAIL FAIL
OK OKFAIL FAIL
WHY?
CONTINUOUSSPECTRUM
LARGEScreen SizeSMALL
CONTINUOUSSPECTRUM
LARGEScreen SizeSMALL
CONTINUOUSSPECTRUM
CSS3 MEDIA QUERIEShttp://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
PROGRESSIVEENHANCEMENT
DEFAULT CSS @MEDIA@MEDIA@MEDIAIE <9.0
WHAT RESPONDS?Typogaphy (typeface, size, leading)
Layout (margins, padding, loats)
Paint (background images, colors)
… basically, style.
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
YOU ROLL YOUR OWNFor science. You masochist.
@impot "compass/reset";@impot "compass/css3/tansition";@impot "compass/utilities/geneal/cleafix";@impot "compass/layout/grid-background";@impot "compass/utilities/color/contast";@impot "compass/css3/border-adius";@impot "compass/css3/images";
@impot "patials/base";@impot "less/famework";@impot "patials/more";
@impot "patials/exams/pygmentstheme";@impot "patials/exams/global";@impot "patials/exams/default";@impot "patials/exams/tablet";@impot "patials/exams/mobile";@impot "patials/exams/wide-mobile";//@impot "patials/high-px-atio";
from css impot reset, shotcuts
from thirdpaty_app impot some_utilities
from my_app impot desktop, tablet, mobile
I WILL NEVER(wilingly)
DEVELOP WITHOUT COMPASS AGAIN
, EVER
I WILL NEVER(wilingly)
DEVELOP WITHOUT COMPASS AGAINYES, IT’S THAT GOOD
, EVER
SIGH, RUBY.expot GEM_HOME="$VIRTUAL_ENV/gems"expot GEM_PATH=""
Stick this in vitualenv’s postactivate script.
SIGH, RUBY.expot GEM_HOME="$VIRTUAL_ENV/gems"expot GEM_PATH=""
Stick this in vitualenv’s postactivate script.
Now go PayPal @carljm some beer money.
$ gem install compass
$ gem install compass-less-plugin
http://lessfamework.comhttps://github.com/wilhw/compass-less-plugin
10
8
5
3
MORE IS LESShttps://gist.github.com/1009952
Inspired by 960 and Susy
COMPILED CSSHow does I manage it?
→ GHETTO STUPID WAY → SHINY FUTURE WAY
PROJECT/app1/app2settings.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/config.rb .$ rm -f foo
/app1/app2settings.pyconfig.rb/sass screen.scss ← @impots the patias /patials _base.scss _global.scss _default.scss _mobile.scss/static /img /js /css screen.css ← geneated by compass
SHINY FUTURE WAY?django-compressor
{% load compress %}{% compress css %}<link rel="stylesheet" href="path/to/mycompass.scss">{% endcompress %}
COMPRESS_CSS_FILTERS = [ 'compressor.filters.compass.CompassFilter',]
settings.py
template.html
high-px-atiowide-mobilemobiletabletdefaultglobal
high-px-atiowide-mobilemobiletabletdefaultglobal
3 5 8 10mobile wide mobile tablet desktop
https://github.com/idangazit/wd_example
<body> <div id="wap"> <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>
<body> <div id="wap"> <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>
<body> <div id="wap"> <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 8mobile wide mobile tablet desktop
https://github.com/idangazit/wd_example
RESPONSIVE** It’s a cool technique
?
MOBILE RESPONSIVE
IGNORE THE HYPEBe aware of this technique
I think it’s the quiet future of web design
KTHXBAI!Idan Gazit → @idangazit
ig