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

Responsive Web Design with Django, Compass and the Less Framework

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

Idan Gazit

September 24, 2011
Tweet

More Decks by Idan Gazit

Other Decks in Design

Transcript

  1. 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) { … }
  2. @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";
  3. 5 3

  4. $ compass create -r less foo --using less $ mv

    foo/sass sass $ mv foo/config.rb . $ rm -f foo
  5. /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
  6. {% load compress %} {% compress css %} <link rel="stylesheet"

    href="path/to/mycompass.scss"> {% endcompress %} COMPRESS_CSS_FILTERS = [ 'compressor.filters.compass.CompassFilter', ] settings.py template.html
  7. <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>
  8. <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>
  9. <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>
  10. 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
  11. #{$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
  12. @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
  13. ?

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

    it’s the quiet future of web design