RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA
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
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
CSS PREPROCESSING EN WAT IS SASS EIGENLIJK? SASS: “programmeren met stylesheets” .scss syntax: superset van CSS variables nesting mixins
SASS: VARIABLES $triquanta-blue: #00c2ff; $gutter: 16px; .quote { margin: $gutter; padding: $gutter / 2; color: $triquanta-blue; }
.quote { margin: 16px; padding: 8px; color: #00c2ff; }
SASS: NESTING .menu li { float: left; a { color: #cc0000; } }
.menu li { float: left; } .menu li a { color: #cc0000; }
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; }
COMPASS ZET SASS AAN HET WERK Gereedschapskist – doet niet de afwas Bibliotheek – best-practice CSS config.rb – om te delen met collega's
GEREEDSCHAPSKIST compass watch – schrijft CSS terwijl u SASSt compass create – begin een nieuw project Image sprites genereren – volautomatisch
BIBLIOTHEEK Wie weet uit z'n hoofd hoe je een CSS3 background gradient maakt? .gradient { background-image: background-image: background-image: background-image: background-image: }
-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0 -webkit-linear-gradient(#ffffff, #aaaaaa); -moz-linear-gradient(#ffffff, #aaaaaa); -o-linear-gradient(#ffffff, #aaaaaa); linear-gradient(#ffffff, #aaaaaa);
.gradient { @include background-image(linear-gradient(#ffffff, #aaaaaa)); }
CONFIG.RB css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts"
e DE 2 GENERATIE CSS GRID SYSTEMS ...EN IN HET BIJZONDER SUSY Semantisch SASS & Compass Flexibel
GRID SYSTEM: WAAROM EIGENLIJK? Grafisch ontwerp – nauwkeurige implementatie Schetsen / ontwerpen in de browser – gemak & snelheid DRY – developers zijn lui Onderhouden en uitbreiden – consistentie
NIET-SEMANTISCH GRID SYSTEM
<article class="grid_8 prefix_4"> Lorem ipsum, dolor sit amet.
.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; }
SEMANTISCH GRID SYSTEM (SUSY)
<article> Lorem ipsum, dolor sit amet.
#main { @include container; } #main article { @include span-columns(8); @include prefix(4); }
SASS & COMPASS DO THE MATH $total-columns $total-columns-m $total-columns-l $column-width $gutter-width $grid-padding
: : : : : :
4; 6; 8; 8em; 2em; $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; } }
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.”
AURORA: BASE THEME drush dl aurora drush en aurora -y
AURORA: RUBY GEM gem install compass-aurora
AURORA: SUB THEME compass create
-r aurora --using aurora/corona
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 ...
DE GROTE GEVAARLIJKE ONVERMIJDELIJKE LIVE DEMO
DOET U DEZE MAAR
