Upload
triquanta
View
674
Download
5
Embed Size (px)
DESCRIPTION
Deze presentatie gaf Marc van Gend tijdens de Drupal Tech Talk op 25 april 2013
Citation preview
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