Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Less Framework, Stockholm-nov-2011

1,563 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Less Framework, Stockholm-nov-2011

  1. 1. Responsive designLess Framework 4.0
  2. 2. Leander Lindahldesigner | Popoloe-mail: leander@popolo.sedrupal-name: leanderlDesigner, Accademia Italiana,Florence, ItalyBachelor in Business Administration, LundUniversity, Sweden
  3. 3. LESS IS NOT LESS
  4. 4. Scope of the session Responsive design in terms of CSS3 media queries Basic concept of using Less Framework in CSS Putting it into Drupal
  5. 5. What’s the deal withresponsive design?
  6. 6. ”It’s what some of us were going for with“liquid” web design back in the 1990s, onlyit doesn’t suck.”Jeffrey Zeldman
  7. 7. Responsive design= CSS3 media queriesimage: www.lessframework.com
  8. 8. Responsive design= CSS3 media queries
  9. 9. 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 } }
  10. 10. 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/
  11. 11. Supported by IE9 – yeay!http://www.smashingmagazine.com/the-smashing-cartoons/
  12. 12. Browsers without support for CSS3and media queries get served thedefault version of the site, just as they didbefore implementing the framework.
  13. 13. Gettin’ down withLESS Framework 4.0how it works…
  14. 14. 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
  15. 15. Step 1: default design (desktop)Default version
  16. 16. 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 */
  17. 17. Step 2: Tablet Layout (iPad)
  18. 18. 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 */
  19. 19. Step 3: Mobile layout Carrier 12:00 PM Page Title http://www.domain.com Google
  20. 20. 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 */
  21. 21. 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
  22. 22. 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 */
  23. 23. 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
  24. 24. Doin’ da responsive thingywid da Drupal thingy
  25. 25. 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
  26. 26. NO HTML5 in this example – sorry<article> <header> <h1>Why Hello</h1> </header> <section> <p></p> </section> <section> <p></p> <p></p> <ul></ul> </section></article>
  27. 27. 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
  28. 28. 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;}
  29. 29. 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;}
  30. 30. 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;}
  31. 31. 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;}
  32. 32. Play around with it...Drupal.org, download Steppenwolf: http://drupal.org/sandbox/leanderlindahl/1306334Slideshare: slideshare.net/leanderlindahl
  33. 33. Thank you!Drupal.org, download Steppenwolf: http://drupal.org/sandbox/leanderlindahl/1306334Slideshare: slideshare.net/leanderlindahl

×