Less

1,689 views
1,590 views

Published on

Responsive Design with Less Framework 4.0 and Drupal. Steppenwolf example Theme.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,689
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • This is me. I’m Leander Lindahl from Malmö. I’m a designer and I have a history of working both with traditional print design and web. And I’ve been into the whole Drupal thingy for about two years, and let me tell you... it can be frightening at first for a designer. But it is well worth the effort...\n
  • So what is Responsive Design all about? \n
  • The ”legendary” article by Ethan Marcotte that coined the expression. The ”thing” with responsive design is that now with CSS3 and media queries you can style your content according to the view port the user is accessing the content with.\n
  • This is not a new idea. But this time around it doesn’t suck.\nAs far as fixed-width goes, I prefer it. Look at A List Apart – a site done by pros for other web designers. They use fixed width. It just makes sense to me, as you wouldn’t encounter a physical newspaper made out of spandex.\nPeople are used to reading their text at a set width. It wasn’t until the advent of the web browser that this became an issue. And, let’s not forget that the original measurement of the web was pixels, and not percentage. Nathan Smith\nOctober 5, 2005\nhttp://www.churchmarketingsucks.com/2005/10/top-10-web-design-mistakes/\n
  • In reality Responsive design is about media queries (CSS3). These allow you to control which layout (CSS) get’s used by which view port.\n
  • This is what media queries are...\n
  • IE wohoo!\n
  • IE9 shaped up\n
  • \n
  • \n
  • \n
  • The ”full width” defautl layout with 10 columns. I slightly deviated from the grid for the ”image gallery”, because I wanted three equal columns for image gallery and blog. \n
  • The tablet 8 column ”grid”\n
  • Mobile layout, only two columns\n
  • Wide mobile laoyt with 5 columns\n
  • So these are the various layouts, all CSS-based variations\n
  • So how can we use this with drupal\n
  • Activate/ deactivate responsive.css\n
  • In most examples of LESS you’ll find that they are neatly based on the new HTML5 structure, we won’t quite get there today. We’re using basic drupal templates...\n
  • This is the basic structure. The wrappers are simply to make a continuous ”unlimited width” horisontal background. The header, main and footer are the divs that we apply the different view ports fixed width to.\n
  • The basic layout is done like this. We assign the grid width of 896 plus padding (48px) to the #header, #main and #footer. We subdivide the ”columns” of #content area and #sidebar following the suggested column widths from the grid template\n
  • The tablet layout is done much in the same way as the default layout, but with encapsuled in a media query condition min-width:712px, max-width: 991px;\nWe adjust the columns #content and #sidebar in the #main div\n
  • The mobile layout, yet again, follows the same pattern. They main effort is really deciding in the design process, how to use the varying view ports. If you prepare your thinking about the visual design and interaction well, then the coding shouldn’t be all too hard. \nThis time media queri condition is max-width: 767px;\nWe adjust the columns #content and #sidebar in the #main div\n
  • The wide mobile layout… \nThis time media query condition is min-width: 480px, max-width: 767px; That means that below 480 px width we get \nWe adjust the columns #content and #sidebar in the #main div\n
  • Try it out for yourself! Drupal can be difficult to create example themes for because to creat anything at all you generally need some vews and som blocks. Hence I included the database with the theme. Install, try it, throw it away and apply the concept to your own designs...\n
  • Less

    1. 1. Responsive designLess Framework 4.0
    2. 2. Leander Lindahldesigner | Popolo Designe-mail: leander@popolo.sedrupal-name: leanderlDesigner, Accademia Italiana,Florence, ItalyBachelor in Business Administration,Lund University, Sweden
    3. 3. What’s the deal with responsivedesign?
    4. 4. ”It’s what some of us were going for with“liquid” web design back in the 1990s, onlyit doesn’t suck.”Jeffrey Zeldman
    5. 5. Responsive design= CSS3 media queriesimage: www.lessframework.com
    6. 6. Responsive design= CSS3 media queries
    7. 7. Responsive design= CSS3 media queries /* Default CSS */ #page { width:1060px; } @media only screen and (min-width: 480px) and (max-width: 767px) { /* CSS for this particular view-port */ #page { width:436px } }
    8. 8. No support in IE6, IE7, IE8 (as usual)http://www.smashingmagazine.com/2010/02/11/the-life-times-and-death-of-internet-explorer-6-comic-strip/
    9. 9. Supported by IE9 – yeay!http://www.smashingmagazine.com/the-smashing-cartoons/
    10. 10. Browsers without support for CSS3and media queries get served thedefault version of the site, just as they didbefore implementing the framework.
    11. 11. Gettin’ down withLESS Framework 4.0how it works…
    12. 12. Templates available forFireworks, Photoshop, OmniGraffleOmniGraffle: http://uprootinc.com/blog/less-framework-grid-omnigraffle-stencilFireworks, Photoshop, Illustrator: http://www.aripalo.fi/lessguides4/Wireframing PDF: http://richardmetzler.posterous.com/less-framework-4-grid-pdfs-to-wireframe-and-s
    13. 13. Step 1: default design (desktop)Default version
    14. 14. Step 1: default design (desktop)Default version /* Default Layout: 992px. Gutters: 24px. Outer margins: 48px. Leftover space for scrollbars @1024px: 32px. ------------------------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 9 10 px 68 160 252 344 436 528 620 712 804 896 */
    15. 15. Step 2: Tablet Layout (iPad)
    16. 16. Step 2: Tablet Layout (iPad) /* Tablet Layout: 768px. Gutters: 24px. Outer margins: 28px. Inherits styles from: Default Layout. ----------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 px 68 160 252 344 436 528 620 712 */
    17. 17. Step 3: Mobile layout Carrier 12:00 PM Page Title http://www.domain.com Google
    18. 18. Step 3: Mobile layout Carrier 12:00 PM Page Title http://www.domain.com Google /* Mobile Layout: 320px. Gutters: 24px. Outer margins: 34px. Inherits styles from: Default Layout. --------------------------------------------- cols 1 2 px 114 252 */
    19. 19. Step 4: Wide mobile Carrier 12:00 PM Page Title http://www.domain.com Google Google Page Title 12:00 PM http://www.domain.com Carrier
    20. 20. Step 4: Wide mobile Carrier 12:00 PM Page Title http://www.domain.com Google Google Page Title 12:00 PM http://www.domain.com Carrier /* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout. ------------------------------------------------------------ cols 1 2 3 4 5 px 68 160 252 344 436 */
    21. 21. Step 5: All together now… Carrier 12:00 PM Page Title http://www.domain.com Google Google Page Title 12:00 PM http://www.domain.com Carrier
    22. 22. Doin’ da responsive thingywid da Drupal thingy
    23. 23. steppenwolf.infoname = Steppenwolfdescription = Steppenwolf Less Framwork 4.0 Demo Theme by Popoloversion = VERSIONcore = 7.x; Stylesheetsstylesheets[all][] = css/less-framework.css The LESS frameworkstylesheets[screen][] = css/style.css The default stylestylesheets[screen][] = css/responsive.css The ”responsiveness” goes here; Regionsregions[header] = Headerregions[searchbar] = Search barregions[highlighted] = Highlightedregions[help] = Helpregions[content] = Contentregions[sidebar] = Sidebarregions[footer_left] = Footer leftregions[footer_right] = Footer right
    24. 24. NO HTML5 SHIM – sorry<article> <header> <h1>Why Hello</h1> </header> <section> <p></p> </section> <section> <p></p> <p></p> <ul></ul> </section></article>
    25. 25. Steppenwolf page.tpl.phpStructure of page.tpl.phpheader-wrapperunimited width header – fixed width main – fixed widthmain-wrapper content sidebarunlimited widthfooter-wrapper footer – fixed widthunlimited width fixed width for unlimited width LESS FRAMEWORK for background color
    26. 26. CSS default layout Structure of page.tpl.php header-wrapper/* Default Layout: 992px. unimited width header – fixed width Gutters: 24px. main – fixed width Outer margins: 48px. main-wrapper content sidebar unlimited width Leftover space for scrollbars @1024px: 32px.------------------------------------------------------------------------------- footer-wrapper footer – fixed widthcols 1 2 3 4 5 6 7 8 9 10 unlimited widthpx 68 160 252 344 436 528 620 712 804 896 */#header, #main, #footer { width:896px; padding: 24px 48px 0; margin:0 auto;}#content { width:620px; margin-right:24px;}#sidebar { width:252px;}
    27. 27. CSS tablet layout Structure of page.tpl.php header-wrapper/* Tablet Layout: 768px. unimited width header – fixed width Gutters: 24px. main – fixed width Outer margins: 28px. main-wrapper content sidebar unlimited width Inherits styles from: Default Layout.----------------------------------------------------------------- footer-wrapper footer – fixed widthcols 1 2 3 4 5 6 7 8 unlimited widthpx 68 160 252 344 436 528 620 712 */@media only screen and (min-width: 768px) and (max-width: 991px) {#header, #main, #footer { width:712px; padding: 24px 28px 0; margin:0 auto;}#content { width:436px; margin-right:24px;}#sidebar { width:252px;}
    28. 28. CSS mobile layout Structure of page.tpl.php header-wrapper/* Mobile Layout: 320px. unimited width header – fixed width Gutters: 24px. main – fixed width Outer margins: 34px. main-wrapper content sidebar unlimited width Inherits styles from: Default Layout.--------------------------------------------- footer-wrapper footer – fixed widthcols 1 2 unlimited widthpx 114 252 */@media only screen and (max-width: 767px) {#header, #main, #footer { width:252px; padding: 24px 34px 0; margin:0 auto;}#content { width:252px;}#sidebar { width:252px;}
    29. 29. CSS wide mobile layout Structure of page.tpl.php header-wrapper unimited width header – fixed width/* Wide Mobile Layout: 480px. Gutters: 24px. main – fixed width main-wrapper content sidebar Outer margins: 22px. unlimited width Inherits styles from: Default Layout, Mobile Layout.------------------------------------------------------------ footer-wrapper footer – fixed width unlimited widthcols 1 2 3 4 5px 68 160 252 344 436 */@media only screen and (min-width: 480px) and (max-width: 767px) { #header, #main, #footer { width:436px; padding: 24px 22px 0; margin:0 auto;}#content { width:436px;}#sidebar { width:436px;}
    30. 30. Play around with it...Drupal.org, download Steppenwolf: http://drupal.org/sandbox/leanderlindahl/1306334

    ×