Responsive Web Design With Django, Compass, and The Less Framework

RESPONSIVE WEB DESIGN
with Django, Compass, and the Less Famework
XL
HA UR YO SE AI
F SI ND
http://ic.kr/p/dwY5M
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 THREE PROBLEMS.
NOW YOU HAVE FIVE PROBLEMS?
NOW YOU HAVE FIVE PROBLEMS?
NOW YOU HAVE MORE TARGETS.
DESKTOP?
http://ic.kr/p/6iLEF
DESKTOP?
http://ic.kr/p/6iLEF
BEST VIEWED AT
FIXED LAYOUTS
1024px 960px 1600px 960px
FLUID LAYOUTS
1024px 1600px
90%
920px
90%
1440px
SMALL
LARGE
Screen Size
FIXED PARTIAL CONTENT
FIXED OR FLUID
OK
FAIL
OK
FAIL
WHY?
OK FAIL OK FAIL
CONTINUOUS SPECTRUM
SMALL
Screen Size
LARGE
CONTINUOUS SPECTRUM
SMALL
Screen Size
LARGE
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
@MEDIA
@MEDIA
DEFAULT CSS IE <9.0
@MEDIA
WHAT RESPONDS?
Typogaphy (typeface, size, leading) Layout (margins, padding, loats) Paint (background images, colors) basically, style.
iP ho ne iP ad
http://mediaqueri.es
de sk
to p
id es c
re e
WHAT DOESNT?
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
Sass.
http://sass-lang.com
@impot "compass/reset"; @impot "compass/css3/tansition"; @impot "compass/utilities/geneal/cleax"; @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";
from css impot reset, shotcuts from thirdpaty_app impot some_utilities from my_app impot desktop, tablet, mobile
I WILL NEVER, EVER

(wilingly)
DEVELOP WITHOUT COMPASS AGAIN
I WILL NEVER, EVER

(wilingly)
DEVELOP WITHOUT COMPASS AGAIN

YES, ITS THAT GOOD
SIGH, RUBY.
expot GEM_HOME="$VIRTUAL_ENV/gems" expot GEM_PATH="" Stick this in vitualenvs postactivate script.
SIGH, RUBY.
expot GEM_HOME="$VIRTUAL_ENV/gems" expot GEM_PATH="" Stick this in vitualenvs postactivate script. Now go PayPal @carljm some beer money.
$ gem install compass
$ gem install compass-less-plugin

http://lessfamework.com https://github.com/wilhw/compass-less-plugin
10
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/cong.rb . $ rm -f foo
/app1 /app2 settings.py cong.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
settings.py
COMPRESS_CSS_FILTERS = [ 'compressor.lters.compass.CompassFilter', ]
template.html
{% load compress %} {% compress css %} <link rel="stylesheet" href="path/to/mycompass.scss"> {% endcompress %}
high-px-atio wide-mobile mobile tablet default global
high-px-atio wide-mobile mobile tablet default global
3
mobile
5
wide mobile
8
tablet
10
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>
_global.scss 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); } }
_default.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; }
_mobile.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; } }
3
mobile
5
wide mobile
8
tablet
8
desktop
https://github.com/idangazit/wd_example
RESPONSIVE*
* Its a cool technique
MOBILE
RESPONSIVE
IGNORE THE HYPE

Be aware of this technique I think its the quiet future of web design
ig
KTHXBAI!
Idan Gazit @idangazit

Responsive Web Design With Django, Compass, and The Less Framework

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Responsive Web Design With Django, Compass, and The Less Framework

Cargado por

Copyright:

Formatos disponibles

RESPONSIVE WEB DESIGN

with Django, Compass, and the Less Famework

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.

FIXED PARTIAL CONTENT

CSS3 MEDIA QUERIES

@media only screen and (max-width: 767px) { }

@media only screen and (min-width: 480px) and (max-width: 767px) { }

@media only screen and (min-width: 768px) and (max-width: 1023px) { }

DEFAULT CSS IE <9.0

LARGE <IMG> DATA

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 OWN

I WILL NEVER, EVER

DEVELOP WITHOUT COMPASS AGAIN

I WILL NEVER, EVER

DEVELOP WITHOUT COMPASS AGAIN

$ gem install compass

$ gem install compass-less-plugin

SHINY FUTURE WAY?

{% load compress %} {% compress css %} <link rel="stylesheet" href="path/to/mycompass.scss"> {% endcompress %}

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

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

IGNORE THE HYPE

También podría gustarte