RESPONSIVE DRUPALTHEMING MET SASS,COMPASS, SUSY ENAURORADRUPAL TECH TALK 25 APRIL 2013MARC VAN GEND TRIQUANTA
AGENDAHet Doel – #responsivemobilefirsthtml5buzzwordcompliantCSS preprocessing – SASSWerken met SASS – CompassDe 2e genera...
HET DOEL#RESPONSIVEMOBILEFIRSTHTML5BUZZWORDCOMPLIANTResponsive – één site voor alle schermenProgressive enhancement – func...
CSS PREPROCESSINGEN WAT IS SASS EIGENLIJK?SASS: “programmeren met stylesheets”.scss syntax: superset van CSSvariablesnesti...
SASS: VARIABLES$triquanta-blue: #00c2ff;$gutter: 16px;.quote {margin: $gutter;padding: $gutter / 2;color: $triquanta-blue;...
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...
COMPASSZET SASS AAN HET WERKGereedschapskist – doet niet de afwasBibliotheek – best-practice CSSconfig.rb – om te delen me...
GEREEDSCHAPSKISTcompass watch – schrijft CSS terwijl u SASStcompass create – begin een nieuw projectImage sprites generere...
BIBLIOTHEEKWie weet uit zn hoofd hoe je een CSS3 background gradient maakt?.gradient {background-image: -webkit-gradient(l...
CONFIG.RBcss_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"
DE 2e GENERATIE CSS GRID SYSTEMS...EN IN HET BIJZONDER SUSYSemantischSASS & CompassFlexibel
GRID SYSTEM: WAAROM EIGENLIJK?Grafisch ontwerp – nauwkeurige implementatieSchetsen / ontwerpen in de browser – gemak & sne...
NIET-SEMANTISCH GRID SYSTEM<div id="main" class="container_12"><article class="grid_8 prefix_4">Lorem ipsum, dolor sit ame...
SEMANTISCH GRID SYSTEM (SUSY)<div id="main"><article>Lorem ipsum, dolor sit amet.</article></div>#main {@include container...
SASS & COMPASS DO THE MATH$total-columns : 4;$total-columns-m : 6;$total-columns-l : 8;$column-width : 8em;$gutter-width :...
COMBINEREN TOT EEN DRUPAL THEMELEES: AURORA INSTALLEREN“Aurora is an HTML5, Sass and Compass powered, responsiveoptimized,...
AURORA: BASE THEMEdrush dl auroradrush en aurora -y
AURORA: RUBY GEMgem install compass-aurora
AURORA: SUB THEMEcompass create -r aurora --using aurora/corona
AURORA: DONT CLICK!Uit de .info file:...; Chrome Frame Optionssettings[aurora_enable_chrome_frame] = 1settings[aurora_min_...
DE GROTE GEVAARLIJKE ONVERMIJDELIJKELIVE DEMO
DOET U DEZE MAAR
Upcoming SlideShare
Loading in …5
×

Drupal theming met sass, compass, susy en aurora

960 views
856 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
960
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal theming met sass, compass, susy en aurora

  1. 1. RESPONSIVE DRUPALTHEMING MET SASS,COMPASS, SUSY ENAURORADRUPAL TECH TALK 25 APRIL 2013MARC VAN GEND TRIQUANTA
  2. 2. 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 didnt happen
  3. 3. HET DOEL#RESPONSIVEMOBILEFIRSTHTML5BUZZWORDCOMPLIANTResponsive – één site voor alle schermenProgressive enhancement – functioneel » fraai » funkyMobile first – eerst simpel, dan groeienHTML5 – is beter, kan meerWerkbaar – samenwerken, onderhouden, uitbreiden
  4. 4. CSS PREPROCESSINGEN WAT IS SASS EIGENLIJK?SASS: “programmeren met stylesheets”.scss syntax: superset van CSSvariablesnestingmixins
  5. 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. 6. SASS: NESTING.menu li {float: left;a {color: #cc0000;}}.menu li {float: left;}.menu li a {color: #cc0000;}
  7. 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. 8. COMPASSZET SASS AAN HET WERKGereedschapskist – doet niet de afwasBibliotheek – best-practice CSSconfig.rb – om te delen met collegas
  9. 9. GEREEDSCHAPSKISTcompass watch – schrijft CSS terwijl u SASStcompass create – begin een nieuw projectImage sprites genereren – volautomatisch
  10. 10. BIBLIOTHEEKWie weet uit zn hoofd hoe je een CSS3 background gradient maakt?.gradient {background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0background-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. 11. CONFIG.RBcss_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"
  12. 12. DE 2e GENERATIE CSS GRID SYSTEMS...EN IN HET BIJZONDER SUSYSemantischSASS & CompassFlexibel
  13. 13. GRID SYSTEM: WAAROM EIGENLIJK?Grafisch ontwerp – nauwkeurige implementatieSchetsen / ontwerpen in de browser – gemak & snelheidDRY – developers zijn luiOnderhouden en uitbreiden – consistentie
  14. 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. 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. 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. 17. COMBINEREN TOT EEN DRUPAL THEMELEES: AURORA INSTALLEREN“Aurora is an HTML5, Sass and Compass powered, responsiveoptimized, mobile first base theme designed for people who liketheming through code as opposed to through a GUI.”
  18. 18. AURORA: BASE THEMEdrush dl auroradrush en aurora -y
  19. 19. AURORA: RUBY GEMgem install compass-aurora
  20. 20. AURORA: SUB THEMEcompass create -r aurora --using aurora/corona
  21. 21. AURORA: DONT 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...
  22. 22. DE GROTE GEVAARLIJKE ONVERMIJDELIJKELIVE DEMO
  23. 23. DOET U DEZE MAAR

×