Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network


Drupal & Compass

Uploaded on

Slides for my talk at DrupalCon Denver, on using Sass and Compass in Drupal themes....

Slides for my talk at DrupalCon Denver, on using Sass and Compass in Drupal themes.


More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 5

https://twitter.com 2
https://twimg0-a.akamaihd.net 1
http://www.linkedin.com 1
http://htmledit.squarefree.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Relax. Don’t fret over taking notes.Download the presentation slides here:http://j.mp/drupal-compassNote: It’s okay if you read ahead. We don’t mind. :)
  • 2. Design & User ExperienceUsing Sass & Compass in Drupal Theming Nathan Smith & Matt Farina
  • 3. Hello :)We like Drupal, Sass & Compass.We hope you do too, or will soon. Let us introduce ourselves...
  • 4. Nathan Smith isa UX designer athttp://projekt202.com yay,  books!Matt Farina is aweb developer atHP Cloud Serviceshttp://hpcloud.com Note: We co-authored these books, respectively. We’re not taking all the credit.
  • 5. Sass & Compass are made possible by... Hampton Catlin Nathan Weizenbaum Chris Eppstein created Haml & Sass Google Chrome (Dart) created Compass http://hamptoncatlin.com http://nex-3.com http://chriseppstein.github.com He is no longer active Still works on Sass, Also, member of in working on Sass. in his “20% time.” Sass core team. ...and other community contributors.
  • 6. Part 1:Why Sass?
  • 7. On -webkit vendor prefix drama“The backdrop to this debate is that CSS is absolutelythe worst, least productive part of the web platform.Apps teams at Google are fond of citing the memethat ‘CSS is good for documents, but not for apps.’I push back on this, noting the myriad of ways inwhich CSS is abysmal for documents [as well].” Alex Russell @slightlylate Google Chrome team / Dojo Toolkit co-creator http://infrequently.org/2012/02/misdirection
  • 8. So what’s to be done about CSS?The answer has actually been staring us in the facefor awhile now, but it’s only been in recent years thatCSS has become a first-class citizen. CSS is nowbeing approached with an architectural mindset.PHP is a (recursive) acronym for “PHP: HypertextPreprocessor.” So, preprocessing is a considered aGood Thing™ for HTML. How does it work for CSS?
  • 9. Neatly organized *.sass CSS served to browser http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
  • 10. “Years ago, we wrote static HTML. Now, wealmost never do. Our HTML is virtually alwayspreprocessed, be it by PHP, Python, Ruby,Perl, .NET, Java, or something else. Today, wealmost never write and serve straight HTML.” Jeff Croft @jcroft Chief “Designerd” at nGen Works http://jeffcroft.com/blog/2012/jan/31/on-css-preprocessors
  • 11. Noteworthy CSS preprocessors• LESS http://lesscss.org• Sass & Compass http://sass-lang.com http://compass-style.org• Stylus & Nib http://learnboost.github.com/stylus http://visionmedia.github.com/nibNote: Obviously, today we will only be covering Sass and Compass.
  • 12. CSS Sass Compass http://sonspring.com/journal/sass-for-designers
  • 13. Compass is essentially Sass’extra-awesome secret-sauce.Compass extends the functionality ofSass by offering a plugin architecture.It also handles vendor prefixes like achamp. Today, when you hear us say“Sass,” we may blur the lines betweenCompass and Sass. Hope that’s okay.
  • 14. Oversimplification, FTW! Compass is to Sass as jQuery is to JavaScript
  • 15. Sass & SCSS are functionally equivalentWe prefer using Sass instead ofSCSS because hey, less typing!
  • 16. Anti-pattern of nested selectors in Sass
  • 17. Compass makes vendor prefixes easy...
  • 18. Compass brings sanity to gradients...
  • 19. Text editors and IDE’s that support Sass/SCSS syntax Aptana BBEdit Chocolat Coda http://aptana.org http://barebones.com/bbedit http://chocolatapp.com http://panic.com/coda E Text Editor Eclipse Emacs Espresso http://e-texteditor.com http://eclipse.org http://gnu.org/software/emacs http://macrabbit.com/espresso GEdit Komodo Netbeans PhpStormhttp://projects.gnome.org/gedit http://activestate.com/komodo-ide http://netbeans.org http://jetbrains.com/phpstorm PyCharm RubyMine SubEthaEdit Sublime Text ^ http://jetbrains.com/pycharm http://jetbrains.com/ruby http://codingmonkeys.de/subethaedit http://sublimetext.com/dev nd We  recomme TextMate Vim Visual Studio http://macromates.com http://vim.org http://microsoft.com/visualstudio http://sass-lang.com/editors.html
  • 20. GUI to compile Sass & Compass• Compass.app http://compass.handlino.com• Scout http://mhs.github.com/scout-app• CodeKit http://incident57.com/codekitNote: Personally, we prefer to run command-line “compass watch”
  • 21. Impression of Sass...Great for CSS, in Ruby on Rails projects.
  • 22. Impression of Sass...Great for CSS, in Ruby on Rails projects.Great for CSS, in Ruby projects.
  • 23. Impression of Sass...Great for CSS, in Ruby on Rails projects.Great for CSS, in Ruby projects.Great for CSS, in any project!
  • 24. But, wait...What if I want to use Sass for somethingthat wasn’t written in Ruby... impossible?
  • 25. When I think about not having Sass... http://en.wikipedia.org/wiki/The_Incredible_Hulk_(TV_series)
  • 26. So, does Sass require Ruby?Yes, but the amount of Ruby knowledgeit takes to use Sass is basically zero.Nathan is not a hardcore programmer,but he manages to use Sass just fine.Matt explained to Nathan how to use*.sass files in Drupal. Matt is the man.
  • 27. Part 2:Whither amodule?
  • 28. Why use a Drupal Module?Possibly  Bad  Reasons...— You don’t want to install Sass/Compass gems.— You want Drupal to do everything, end-to-end.Possibly  Good  Reasons...— To use base-theme mixins/variables in sub-theme.— So that modules can supply mixins/variables.
  • 29. Sass/SCSS modulehttp://drupal.org/project/sass• Depends on “phamlp” http://code.google.com/p/phamlp Last updated in September 2010.• PHP needs code write access to theme This can lead to bad security practices.• Despite the name, only handles SCSS files #sadpanda
  • 30. Compass stylesheet tool modulehttp://drupal.org/project/compass• Ruby (Compass) does the heavy lifting This means you need Ruby and PHP on your server.• Can compile CSS using devel or cron This is similar to “compass compile” but using Drupal.• Compass location across environments Compass location set it config. Needs to be managed.• Version and permissions can be an issue• Module admin page is hidden (a bug)
  • 31. Sassy modulehttp://drupal.org/project/sassy• Several dependencies http://github.com/richthegeek/phpsass — and three other modules.• Hooks for namespaces/implementations Incomplete (PHP) implementation of Compass, Bootstrap, Foundation.• Sass & SCSS files in .info file styles[]• Stores generated files in public files
  • 32. “Best tool for the job”Jeff Croft, quoted previously, programs in Python anduses Django. He also makes use of Sass, via Ruby.We advocate trying to move beyond a “not inventedhere” mindset, and adopting a more hybrid workflow.Just as it wouldn’t make much sense to port Drupalout of PHP, we think it’s most logical to use first-partyreleases of Sass and Compass directly, if possible.TL;DR — Stick “close to the metal” if you want to stay on the cutting-edge.
  • 33. ACHIEVEMENT UNLOCKED!Presuppositions ChallengedNote: I don’t think this photo is necessarily relevant, but Ithink we can all agree that raw electricity looks awesome. https://en.wikipedia.org/wiki/The_Prestige_(film)
  • 34. Part 3:How to use
  • 35. Prerequisite: RubyFor the sake of brevity, we are going to assume inthis talk that your environment already has Ruby setup. If not, then follow the instructions here...http://sonspring.com/journal/sass-for-designers
  • 36. Setting up Compass & SassFrom the command-line (Terminal.app, iTerm, etc)... gem install compassThis will also automatically download the Sass gem,a dependency of Compass. There’s no need to installseparately. They’re typically used in tandem anyway.
  • 37. Take a hybrid PHP + Ruby approach
  • 38. Add config.rb to your theme directory
  • 39. “cd” to your theme directory, then run “compass watch”If you just want to flush cache and compile, run “compass clean && compass compile”
  • 40. application.css is compiledand (optionally) minifiedvia “compass watch” Serving as a aggregate, application.sass is built from “_file.sass” partials. I bring over what I do like from default Drupal CSS as SCSS files, to import:Sass partials begin with anunderscore, aren’t compiled _search.scssto *.css files individually. _system.base.scss _system.theme.scss Compass outputs the resulting compiled file as “application.css”
  • 41. Theme *.info file – before Sass stylesheets[all][] = assets/css/reset.css stylesheets[all][] = assets/css/override/system.base.css stylesheets[all][] = assets/css/override/system.theme.css stylesheets[all][] = assets/css/override/search.css stylesheets[all][] = assets/css/960_12_col.css stylesheets[all][] = assets/css/text.css stylesheets[all][] = assets/css/formalize.css stylesheets[all][] = assets/css/site.css ; KILL THESE DEFAULT STYLESHEETS: stylesheets[all][] = ctools.css Files  in  orange   stylesheets[all][] = field.css are  listed  to   stylesheets[all][] = node.css prevent  Drupal   stylesheets[all][] = system.messages.css from  adding  ‘em   stylesheets[all][] = system.menus.css automatically. stylesheets[all][] = user.css stylesheets[all][] = views.css For  brevity,  only  CSS  files  shown
  • 42. Theme *.info file – before Sass Minus the nonexistent files, to ward off Drupal defaults... stylesheets[all][] = assets/css/reset.css stylesheets[all][] = assets/css/override/system.base.css stylesheets[all][] = assets/css/override/system.theme.css stylesheets[all][] = assets/css/override/search.css stylesheets[all][] = assets/css/960_12_col.css stylesheets[all][] = assets/css/text.css stylesheets[all][] = assets/css/formalize.css stylesheets[all][] = assets/css/site.css This compresses down to a single CSS file, in the Performance cache setting in Drupal. For  brevity,  only  CSS  files  shown
  • 43. Theme *.info file – after Sassstylesheets[all][] = assets/css/application.css; KILL THESE DEFAULT STYLESHEETS:stylesheets[all][] = ctools.cssstylesheets[all][] = field.cssstylesheets[all][] = node.css Files  in  orange  stylesheets[all][] = search.css are  listed  to   prevent  Drupal  stylesheets[all][] = system.base.css from  adding  ‘em  stylesheets[all][] = system.theme.css automatically.stylesheets[all][] = system.menus.cssstylesheets[all][] = system.messages.cssstylesheets[all][] = user.cssstylesheets[all][] = views.css For  brevity,  only  CSS  files  shown
  • 44. Theme *.info file – after Sass Minus the nonexistent files, to ward off Drupal defaults...stylesheets[all][] = assets/css/application.css ACHIEVEMENT UNLOCKED Only one CSS HTTP request! With (or without) cached CSS compression in Performance.
  • 45. This is still worthdoing. I’ll explainwhy in a second.
  • 46. Even if using “compass watch” with:output_style = :compressedYou should still use Drupal’s CSScompression under Performance.Why? Well, let’s flip to the next slide...
  • 47. Benefits of using Drupal’s CSScompression, not just Compass:1. Cache-busting. File name is changed to... “css_VvtjvgJd9tI4sfrbHdy7Yvyc5fm9jVFoHRnrEBsJlQs.css”2. <link /> instead of <style>@import</style> (older IE versions are slower at the latter)3. Drupal replaces url(../images/file.png) with url(/full/path/to/images/file.png) — Useful if you have assets on a CDN or subdomain.
  • 48. Compass output, before Drupal compression
  • 49. Compass output, after Drupal compression
  • 50. Achievement Unlocked!You have now attained CSS bliss. Don’t forget to rate this as the best talk you’ve ever heard in your life. Or, maybe we forgot something...
  • 51. Stop the presses!What  about  debugging?How do I see what styles are coming from which *_file.sass partial?
  • 52. Part 4:Debugging & Demos
  • 53. Cryptic errormessages arenever helpful.
  • 54. ^ I believe debugging this way stinks.
  • 55. When things don’t go as planned...http://autos.yahoo.com/blogs/motoramic/porsche-stuck-wet-cement-proves-karma-exists-210302568.html
  • 56. Just a one-line change in config.rb
  • 57. Emits *.sass “stack trace” for each style
  • 58. A quick tip on source controlWhile you can track your *.css files viasource control, the ones you really careabout are your *.sass files, which are thecanonical “source of truth.” Educate peerdevelopers not to edit *.css, but insteadtweak *.sass files when making changes.
  • 59. Now time for somedemonstrations :)Note: If you’re viewing these slides, but missed oursession, we showed “compass watch” in action.
  • 60. “Luck, be a lady...” (live demo = dice roll) http://kloucksphoto.blogspot.com/2011/06/guys-and-dolls-witty-wry-wonderful.html
  • 61. If you want to tinker with Haml & Sass...
  • 62. (Nicole helped make Yahoo & Facebook more efficient) “We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. [Her] presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to re-examine those assumptions with an eye to practicality and scalability — as well as accessibility, standards, and fabulous design.” Nicole Sullivan @stubbornella CSS Ninja & Front-end Performance Engineer http://stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us
  • 63. Thanks for coming. Keep in touch! http://twitter.com/NathanSmith Personal site — http://sonspring.com http://twitter.com/MattFarina Personal site — http://mattfarina.com Feel free to say hi on Twitter, and/or check out our personal sites for more of our work.
  • 64. Questions? We (might) have answers.Download the presentation slides here:http://j.mp/drupal-compassFeel free to share the link with friends, enemies, etc.
  • 65. What did you think? Locate this session on the DrupalCon Denver websitehttp://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You!