RESPONSIVE DRUPALTHEMING MET SASS,COMPASS, SUSY EN

AURORADRUPAL TECH TALK 25 APRIL 2013

MARC VAN GEND TRIQUANTA

AGENDAHet Doel – #responsivemobilefirsthtml5buzzwordcompliantCSS preprocessing – SASSWerken met SASS – CompassDe 2e generatie CSS grid systems – SusyCombineren tot een Drupal theme – AuroraDe grote gevaarlijke onvermijdelijke live demo – or it didn't happen

HET DOEL#RESPONSIVEMOBILEFIRSTHTML5BUZZWORDCOMPLIANT

Responsive – één site voor alle schermenProgressive enhancement – functioneel » fraai » funkyMobile first – eerst simpel, dan groeienHTML5 – is beter, kan meerWerkbaar – samenwerken, onderhouden, uitbreiden

CSS PREPROCESSINGEN WAT IS SASS EIGENLIJK?

SASS: “programmeren met stylesheets”.scss syntax: superset van CSSvariablesnestingmixins

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

COMPASSZET SASS AAN HET WERK

Gereedschapskist – doet niet de afwasBibliotheek – best-practice CSSconfig.rb – om te delen met collega's

GEREEDSCHAPSKISTcompass watch – schrijft CSS terwijl u SASStcompass create – begin een nieuw projectImage sprites genereren – volautomatisch

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

CONFIG.RBcss_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"

DE 2e GENERATIE CSS GRID SYSTEMS...EN IN HET BIJZONDER SUSY

SemantischSASS & CompassFlexibel

GRID SYSTEM: WAAROM EIGENLIJK?Grafisch ontwerp – nauwkeurige implementatieSchetsen / ontwerpen in de browser – gemak & snelheidDRY – developers zijn luiOnderhouden en uitbreiden – consistentie

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

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

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

COMBINEREN TOT EEN DRUPAL THEMELEES: AURORA INSTALLEREN

“Aurora is an HTML5, Sass and Compass powered, responsiveoptimized, mobile first base theme designed for people who like

theming through code as opposed to through a GUI.”

AURORA: BASE THEMEdrush dl auroradrush en aurora -y

AURORA: RUBY GEMgem install compass-aurora

AURORA: SUB THEMEcompass create -r aurora --using aurora/corona

AURORA: DON'T CLICK!Uit de .info file:

...; Chrome Frame Optionssettings[aurora_enable_chrome_frame] = 1settings[aurora_min_ie_support] = 10

; Miscelaneous Optionssettings[aurora_remove_core_css] = 0settings[aurora_html_tags] = 1settings[aurora_typekit_id] = 0

; JavaScript Optionssettings[aurora_footer_js] = 1settings[aurora_libraries_head] = 0...

DE GROTE GEVAARLIJKE ONVERMIJDELIJKELIVE DEMO

DOET U DEZE MAAR