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

1. Responsive design
Less Framework 4.0

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

3. What’s the deal with responsive
design?

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

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

8. Responsive design
= CSS3 media queries

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. 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. Supported by IE9 – yeay!
http://www.smashingmagazine.com/the-smashing-cartoons/

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

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

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

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

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. Step 2: Tablet Layout (iPad)

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. Step 3: Mobile layout
Carrier 12:00 PM
Page Title
http://www.domain.com Google

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. 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. 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. 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. Doin’ da responsive thingy
wid da Drupal thingy

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

26. NO HTML5 SHIM – sorry
<article>
<header>
<h1>Why Hello</h1>
</header>
<section>
<p></p>
</section>
<section>
<p></p>
<p></p>
<ul></ul>
</section>
</article>

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

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 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;
}

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 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;
}

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 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;
}

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 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;
}

32. Play around with it...
Drupal.org, download Steppenwolf: http://drupal.org/sandbox/
leanderlindahl/1306334