Relax. Don’t fret over taking notes. Download the presentation slides here: http://j.mp/drupal-compass Note: It’s okay if you read ahead. We don’t mind. :)
Nathan Smith is a UX designer at Matt Farina is a web developer at HP Cloud Services http://projekt202.com http://hpcloud.com yay, books! Note: We co-authored these books, respectively. We’re not taking all the credit.
Sass & Compass are made possible by... http://hamptoncatlin.com He is no longer active in working on Sass. http://nex-3.com Still works on Sass, in his “20% time.” http://chriseppstein.github.com Also, member of Sass core team. Nathan Weizenbaum Google Chrome (Dart) Hampton Catlin created Haml & Sass Chris Eppstein created Compass ...and other community contributors.
“The backdrop to this debate is that CSS is absolutely the worst, least productive part of the web platform. Apps teams at Google are fond of citing the meme that ‘CSS is good for documents, but not for apps.’ I push back on this, noting the myriad of ways in which CSS is abysmal for documents [as well].” On -webkit vendor prefix drama http://infrequently.org/2012/02/misdirection Alex Russell @slightlylate Google Chrome team / Dojo Toolkit co-creator
So what’s to be done about CSS? The answer has actually been staring us in the face for awhile now, but it’s only been in recent years that CSS has become a first-class citizen. CSS is now being approached with an architectural mindset. PHP is a (recursive) acronym for “PHP: Hypertext Preprocessor.” So, preprocessing is a considered a Good Thing™ for HTML. How does it work for CSS?
“Years ago, we wrote static HTML. Now, we almost never do. Our HTML is virtually always preprocessed, be it by PHP, Python, Ruby, Perl, .NET, Java, or something else. Today, we almost never write and serve straight HTML.” Jeff Croft @jcroft Chief “Designerd” at nGen Works http://jeffcroft.com/blog/2012/jan/31/on-css-preprocessors
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/nib Note: Obviously, today we will only be covering Sass and Compass.
Compass extends the functionality of Sass by offering a plugin architecture. It also handles vendor prefixes like a champ. Today, when you hear us say “Sass,” we may blur the lines between Compass and Sass. Hope that’s okay. Compass is essentially Sass’ extra-awesome secret-sauce.
Yes, but the amount of Ruby knowledge it 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. So, does Sass require Ruby?
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.
Sass/SCSS module http://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
Compass stylesheet tool module http://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)
Sassy module http://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
Jeff Croft, quoted previously, programs in Python and uses Django. He also makes use of Sass, via Ruby. We advocate trying to move beyond a “not invented here” mindset, and adopting a more hybrid workflow. Just as it wouldn’t make much sense to port Drupal out of PHP, we think it’s most logical to use first-party releases of Sass and Compass directly, if possible. TL;DR — Stick “close to the metal” if you want to stay on the cutting-edge. “Best tool for the job”
ACHIEVEMENT UNLOCKED! Presuppositions Challenged Note: I don’t think this photo is necessarily relevant, but I think we can all agree that raw electricity looks awesome. https://en.wikipedia.org/wiki/The_Prestige_(film)
For the sake of brevity, we are going to assume in this talk that your environment already has Ruby set up. If not, then follow the instructions here... http://sonspring.com/journal/sass-for-designers Prerequisite: Ruby
Setting up Compass & Sass gem install compass From the command-line (Terminal.app, iTerm, etc)... This will also automatically download the Sass gem, a dependency of Compass. There’s no need to install separately. They’re typically used in tandem anyway.
application.css is compiled and (optionally) minified via “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: _search.scss _system.base.scss _system.theme.scss Compass outputs the resulting compiled file as “application.css” Sass partials begin with an underscore, aren’t compiled to *.css files individually.
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 F or brevity, only CSS files shown Minus the nonexistent files, to ward off Drupal defaults... This compresses down to a single CSS file, in the Performance cache setting in Drupal.
stylesheets[all][] = assets/css/application.css Theme *.info file – after Sass ACHIEVEMENT UNLOCKED Only one CSS HTTP request! With (or without) cached CSS compression in Performance. Minus the nonexistent files, to ward off Drupal defaults...
Even if using “compass watch” with: output_style = :compressed You should still use Drupal’s CSS compression under Performance. Why? Well, let’s flip to the next slide...
Benefits of using Drupal’s CSS compression, not just Compass: 1. Cache-busting. File name is changed to... “css_VvtjvgJd9tI4sfrbHdy7Yvyc5fm9jVFoHRnrEBsJlQs.css” 2. instead of @import (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.
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...
A quick tip on source control While you can track your *.css files via source control, the ones you really care about are your *.sass files, which are the canonical “source of truth.” Educate peer developers not to edit *.css, but instead tweak *.sass files when making changes.
“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 (Nicole helped make Yahoo & Facebook more efficient)
Feel free to say hi on Twitter, and/or check out our personal sites for more of our work. http://twitter.com/NathanSmith Personal site — http://sonspring.com http://twitter.com/MattFarina Personal site — http://mattfarina.com Thanks for coming. Keep in touch!
Questions? We (might) have answers. Feel free to share the link with friends, enemies, etc. Download the presentation slides here: http://j.mp/drupal-compass
What did you think? Locate this session on the DrupalCon Denver website http://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You!
nathansmith
mewmo
norinity1103
romanshamin
abokadotyann
morganepeng
achafetz
uxaustralia
ashapiro
nextbeat
magi1125
ikuhotamura
narizuka
chriscoyier
pauljervisheath
rmw
mclloyd
ddemaree
holman
notwaldorf
maggiecrowley
cassininazir
jakevdp
tammielis
chrislema