This document discusses responsive theming in Drupal using Sass, Compass, Susy, and Aurora. It covers: - The goals of responsive, mobile-first design using HTML5 and progressive enhancement. - CSS preprocessing with Sass, including variables, nesting, and mixins. - Using Compass as a toolkit and library for Sass. - The semantic grid system Susy for flexible responsive layouts. - Combining these tools into a Drupal theme using the Aurora base theme and sub-themes.

1. RESPONSIVE DRUPAL
THEMING MET SASS,
COMPASS, SUSY EN
AURORA
DRUPAL TECH TALK 25 APRIL 2013
MARC VAN GEND TRIQUANTA

2. AGENDA
Het Doel – #responsivemobilefirsthtml5buzzwordcompliant
CSS preprocessing – SASS
Werken met SASS – Compass
De 2e generatie CSS grid systems – Susy
Combineren tot een Drupal theme – Aurora
De grote gevaarlijke onvermijdelijke live demo – or it didn't happen

3. HET DOEL
#RESPONSIVEMOBILEFIRSTHTML5BUZZWORDCOMPLIANT
Responsive – één site voor alle schermen
Progressive enhancement – functioneel » fraai » funky
Mobile first – eerst simpel, dan groeien
HTML5 – is beter, kan meer
Werkbaar – samenwerken, onderhouden, uitbreiden

4. CSS PREPROCESSING
EN WAT IS SASS EIGENLIJK?
SASS: “programmeren met stylesheets”
.scss syntax: superset van CSS
variables
nesting
mixins

5. SASS: VARIABLES
$triquanta-blue: #00c2ff;
$gutter: 16px;
.quote {
margin: $gutter;
padding: $gutter / 2;
color: $triquanta-blue;
}
.quote {
margin: 16px;
padding: 8px;
color: #00c2ff;
}

6. SASS: NESTING
.menu li {
float: left;
a {
color: #cc0000;
}
}
.menu li {
float: left;
}
.menu li a {
color: #cc0000;
}

7. SASS: MIXINS
@mixin box($color, $border:true) {
padding: 1em;
background-color: $color;
@if $border {
border: 1px solid #000000;
}
}
.node {
@include box(#006600);
}
.quote {
@include box(#333333, false);
}
.node {
padding: 1em;
background-color: #006600;
border: 1px solid #000000;
}
.quote {
padding: 1em;
background: #333333;
}

8. COMPASS
ZET SASS AAN HET WERK
Gereedschapskist – doet niet de afwas
Bibliotheek – best-practice CSS
config.rb – om te delen met collega's

9. GEREEDSCHAPSKIST
compass watch – schrijft CSS terwijl u SASSt
compass create – begin een nieuw project
Image sprites genereren – volautomatisch

10. BIBLIOTHEEK
Wie weet uit z'n hoofd hoe je een CSS3 background gradient maakt?
.gradient {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0
background-image: -webkit-linear-gradient(#ffffff, #aaaaaa);
background-image: -moz-linear-gradient(#ffffff, #aaaaaa);
background-image: -o-linear-gradient(#ffffff, #aaaaaa);
background-image: linear-gradient(#ffffff, #aaaaaa);
}
.gradient {
@include background-image(linear-gradient(#ffffff, #aaaaaa));
}

11. CONFIG.RB
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

12. DE 2e GENERATIE CSS GRID SYSTEMS
...EN IN HET BIJZONDER SUSY
Semantisch
SASS & Compass
Flexibel

13. GRID SYSTEM: WAAROM EIGENLIJK?
Grafisch ontwerp – nauwkeurige implementatie
Schetsen / ontwerpen in de browser – gemak & snelheid
DRY – developers zijn lui
Onderhouden en uitbreiden – consistentie

14. NIET-SEMANTISCH GRID SYSTEM
<div id="main" class="container_12">
<article class="grid_8 prefix_4">
Lorem ipsum, dolor sit amet.
</article>
</div>
.container_12 {
width: 960px;
}
.grid_8 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .prefix_4 {
padding-left: 320px;
}
.container_12 .grid_8 {
width: 620px;
}

15. SEMANTISCH GRID SYSTEM (SUSY)
<div id="main">
<article>
Lorem ipsum, dolor sit amet.
</article>
</div>
#main {
@include container;
}
#main article {
@include span-columns(8);
@include prefix(4);
}

16. SASS & COMPASS DO THE MATH
$total-columns : 4;
$total-columns-m : 6;
$total-columns-l : 8;
$column-width : 8em;
$gutter-width : 2em;
$grid-padding : $gutter-width / 2;
#page {
@include container($total-columns,
$total-columns-m,
$total-columns-l);
}
#page {
max-width: 40em;
padding-left: 1em;
padding-right: 1em;
margin-left: auto;
margin-right: auto;
}
#page:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 60em) {
#page {
max-width: 60em;
}
}
@media (min-width: 80em) {
#page {
max-width: 80em;
}
}

17. COMBINEREN TOT EEN DRUPAL THEME
LEES: AURORA INSTALLEREN
“Aurora is an HTML5, Sass and Compass powered, responsive
optimized, mobile first base theme designed for people who like
theming through code as opposed to through a GUI.”

18. AURORA: BASE THEME
drush dl aurora
drush en aurora -y

19. AURORA: RUBY GEM
gem install compass-aurora

20. AURORA: SUB THEME
compass create -r aurora --using aurora/corona

21. AURORA: DON'T CLICK!
Uit de .info file:
...
; Chrome Frame Options
settings[aurora_enable_chrome_frame] = 1
settings[aurora_min_ie_support] = 10
; Miscelaneous Options
settings[aurora_remove_core_css] = 0
settings[aurora_html_tags] = 1
settings[aurora_typekit_id] = 0
; JavaScript Options
settings[aurora_footer_js] = 1
settings[aurora_libraries_head] = 0
...

22. DE GROTE GEVAARLIJKE ONVERMIJDELIJKE
LIVE DEMO

23. DOET U DEZE MAAR