Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design with Django, Compass and the Less Framework

0d877f80c535471ede57c7a4c0f487de?s=47 Idan Gazit
September 24, 2011

Responsive Web Design with Django, Compass and the Less Framework

Slides from my talk at DjangoCon Europe 2011. Video and other coverage online at http://lanyrd.com/2011/djangocon-europe/sfmzd/#link-dgmx

0d877f80c535471ede57c7a4c0f487de?s=128

Idan Gazit

September 24, 2011
Tweet

Transcript

  1. RESPONSIVE WEB DESIGN S M L XL with Django, Compass,

    and the Less Famework
  2. None
  3. http://ic.kr/p/dwY5M RAISE YOUR HANDS IF…

  4. the WHY the HOW

  5. http://j.mp/responsive-ALA

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

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

  8. NOW YOU HAVE TWO PROBLEMS.

  9. NOW YOU HAVE THREE PROBLEMS.

  10. NOW YOU HAVE FIVE PROBLEMS?

  11. NOW YOU HAVE MORE TARGETS.

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

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

  14. BEST VIEWED AT…

  15. FIXED LAYOUTS 960px 1024px 1600px 960px

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

  17. LARGE Screen Size SMALL

  18. FIXED PARTIAL CONTENT FIXED OR FLUID

  19. OK OK FAIL FAIL WHY?

  20. CONTINUOUS SPECTRUM LARGE Screen Size SMALL

  21. CONTINUOUS SPECTRUM

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

  23. 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) { … }
  24. WELL, IE9 IS OK

  25. None
  26. PROGRESSIVE ENHANCEMENT DEFAULT CSS @MEDIA @MEDIA @MEDIA IE <9.0

  27. None
  28. None
  29. WHAT RESPONDS? Typogaphy (typeface, size, leading) Layout (margins, padding, loats)

    Paint (background images, colors) … basically, style.
  30. None
  31. None
  32. None
  33. None
  34. http://mediaqueri.es iPhone iPad desktop w idescreen

  35. WHAT DOESN’T?

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

  37. RESPONSIVE* * not a utopia

  38. “RESPONSIVE” DOES NOT SOLVE CONTENT ISSUES

  39. “RESPONSIVE” DOES NOT SOLVE USABILITY ISSUES

  40. “RESPONSIVE” DOES NOT SOLVE CREATES NEW ISSUES

  41. “RESPONSIVE” IS JUST MODERN WEB DESIGN

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

  43. YOU ROLL YOUR OWN For science. You masochist.

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

  45. @impot "compass/reset"; @impot "compass/css3/tansition"; @impot "compass/utilities/geneal/cleafix"; @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";
  46. from css impot reset, shotcuts from thirdpaty_app impot some_utilities from

    my_app impot desktop, tablet, mobile
  47. I WILL NEVER (wilingly) DEVELOP WITHOUT COMPASS AGAIN YES, IT’S

    THAT GOOD , EVER
  48. 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.
  49. $ gem install compass

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

  51. 10 8

  52. 5 3

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

  54. COMPILED CSS How does I manage it? → GHETTO STUPID

    WAY → SHINY FUTURE WAY
  55. PROJECT /app1 /app2 settings.py /static ← in STATICFILES_DIRS /img /js

    /css /static_root ← STATIC_ROOT
  56. $ compass create -r less foo --using less $ mv

    foo/sass sass $ mv foo/config.rb . $ rm -f foo
  57. /app1 /app2 settings.py config.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
  58. SHINY FUTURE WAY? django-compressor

  59. {% load compress %} {% compress css %} <link rel="stylesheet"

    href="path/to/mycompass.scss"> {% endcompress %} COMPRESS_CSS_FILTERS = [ 'compressor.filters.compass.CompassFilter', ] settings.py template.html
  60. high-px-atio wide-mobile mobile tablet default global

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

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

  63. <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>
  64. <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>
  65. <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>
  66. 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
  67. #{$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
  68. @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
  69. 3 5 8 8 mobile wide mobile tablet desktop https://github.com/idangazit/wd_example

  70. RESPONSIVE* * It’s a cool technique

  71. None
  72. ?

  73. MOBILE RESPONSIVE

  74. IGNORE THE HYPE Be aware of this technique I think

    it’s the quiet future of web design
  75. KTHXBAI! Idan Gazit → @idangazit ig