Deze presentatie gaf Marc van Gend tijdens de Drupal Tech Talk op 25 april 2013

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