(1) The document discusses responsive design using CSS3 media queries and the Less Framework 4.0. (2) It provides an overview of how to use Less Framework to create responsive designs for different screen sizes like desktop, tablet, mobile, and wide mobile. (3) The document also shows how to implement responsive design principles in Drupal by using Less Framework CSS styles and adjusting the theme template.

1. Responsive design
Less Framework 4.0

2. Leander Lindahl
designer | Popolo
e-mail: leander@popolo.se
drupal-name: leanderl
Designer, Accademia Italiana,
Florence, Italy
Bachelor in Business Administration, Lund
University, Sweden

3. LESS IS NOT LESS

7. Scope of the session
Responsive design in terms of CSS3
media queries
Basic concept of using Less Framework
in CSS
Putting it into Drupal

8. What’s the deal with
responsive design?

11. ”It’s what some of us were going for with
“liquid” web design back in the 1990s, only
it doesn’t suck.”
Jeffrey Zeldman

12. Responsive design
= CSS3 media queries
image: www.lessframework.com

13. Responsive design
= CSS3 media queries

14. 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 }
}

15. 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/

16. Supported by IE9 – yeay!
http://www.smashingmagazine.com/the-smashing-cartoons/

17. Browsers without support for CSS3
and media queries get served the
default version of the site, just as they did
before implementing the framework.

18. Gettin’ down with
LESS Framework 4.0
how it works…

19. Templates available for
Fireworks, Photoshop, OmniGraffle
OmniGraffle: http://uprootinc.com/blog/less-framework-grid-omnigraffle-stencil
Fireworks, Photoshop, Illustrator: http://www.aripalo.fi/lessguides4/
Wireframing PDF: http://richardmetzler.posterous.com/less-framework-4-grid-pdfs-to-wireframe-and-s

20. Step 1: default design (desktop)
Default version

21. 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 */

22. Step 2: Tablet Layout (iPad)

23. 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 */

24. Step 3: Mobile layout
Carrier 12:00 PM
Page Title
http://www.domain.com Google

25. 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 */

26. 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

27. 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 */

28. 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

29. Doin’ da responsive thingy
wid da Drupal thingy

30. steppenwolf.info
name = Steppenwolf
description = Steppenwolf Less Framwork 4.0 Demo Theme by Popolo
version = VERSION
core = 7.x
; Stylesheets
stylesheets[all][] = css/less-framework.css The LESS framework
stylesheets[screen][] = css/style.css The default style
stylesheets[screen][] = css/responsive.css The ”responsiveness” goes here
; Regions
regions[header] = Header
regions[searchbar] = Search bar
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar] = Sidebar
regions[footer_left] = Footer left
regions[footer_right] = Footer right

31. 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>

32. Steppenwolf page.tpl.php
Structure of page.tpl.php
header-wrapper
unimited width header – fixed width
main – fixed width
main-wrapper content sidebar
unlimited width
footer-wrapper
footer – fixed width
unlimited width
fixed width for unlimited width
LESS FRAMEWORK for background color

33. 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 width
cols 1 2 3 4 5 6 7 8 9 10 unlimited width
px 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;
}

34. 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 width
cols 1 2 3 4 5 6 7 8 unlimited width
px 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;
}

35. 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 width
cols 1 2 unlimited width
px 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;
}

36. 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 width
cols 1 2 3 4 5
px 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;
}

37. Play around with it...
Drupal.org, download Steppenwolf: http://drupal.org/sandbox/
leanderlindahl/1306334
Slideshare: slideshare.net/leanderlindahl

38. Thank you!
Drupal.org, download Steppenwolf: http://drupal.org/sandbox/
leanderlindahl/1306334
Slideshare: slideshare.net/leanderlindahl