Post on 22-Oct-2014
description
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. :)
Design & User Experience
Using Sass & Compassin Drupal Theming
Nathan Smith & Matt Farina
Hello :)We like Drupal, Sass & Compass.We hope you do too, or will soon.
Let us introduce ourselves...
Nathan Smith isa UX designer at
Matt Farina is aweb developer atHP 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 activein working on Sass.
http://nex-3.com
Still works on Sass,in his “20% time.”
http://chriseppstein.github.com
Also, member ofSass core team.
Nathan WeizenbaumGoogle Chrome (Dart)
Hampton Catlincreated Haml & Sass
Chris Eppsteincreated Compass
...and other community contributors.
So, that just happened:
(anyways...)
Part 1:Why Sass?
“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].”
On -webkit vendor prefix drama
http://infrequently.org/2012/02/misdirection
Alex Russell @slightlylateGoogle Chrome team / Dojo Toolkit co-creator
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?
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
CSS served to browserNeatly organized *.sass
“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,we almost never write and serve straightHTML.”
Jeff Croft @jcroftChief “Designerd” at nGen Works
http://jeffcroft.com/blog/2012/jan/31/on-css-preprocessors
Noteworthy CSS preprocessors
LESShttp://lesscss.org
Sass & Compasshttp://sass-lang.comhttp://compass-style.org
Stylus & Nibhttp://learnboost.github.com/stylushttp://visionmedia.github.com/nib
Note: Obviously, today we will only be covering Sass and Compass.
•
•
•
CSS Sass Compasshttp://sonspring.com/journal/sass-for-designers
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.
Compass is essentially Sass’extra-awesome secret-sauce.
Oversimplification, FTW!
Compass is to Sassas
jQuery is to JavaScript
Sass & SCSS are functionally equivalent
We prefer using Sass instead ofSCSS because hey, less typing!
Anti-pattern of nested selectors in Sass
Compass makes vendor prefixes easy...
Compass brings sanity to gradients...
Text editors and IDE’s that support Sass/SCSS syntax
Aptanahttp://aptana.org
BBEdithttp://barebones.com/bbedit
Chocolathttp://chocolatapp.com
Codahttp://panic.com/coda
E Text Editorhttp://e-texteditor.com
Eclipsehttp://eclipse.org
Emacshttp://gnu.org/software/emacs
Espressohttp://macrabbit.com/espresso
GEdithttp://projects.gnome.org/gedit
Komodohttp://activestate.com/komodo-ide
Netbeanshttp://netbeans.org
PhpStormhttp://jetbrains.com/phpstorm
PyCharmhttp://jetbrains.com/pycharm
RubyMinehttp://jetbrains.com/ruby
SubEthaEdithttp://codingmonkeys.de/subethaedit
Sublime Texthttp://sublimetext.com/dev
TextMatehttp://macromates.com
Vimhttp://vim.org
Visual Studiohttp://microsoft.com/visualstudio
http://sass-lang.com/editors.html
^We recommend
GUI to compile Sass & Compass
Compass.apphttp://compass.handlino.com
Scouthttp://mhs.github.com/scout-app
CodeKithttp://incident57.com/codekit
Note: Personally, we prefer to run command-line “compass watch”
•
•
•
Impression of Sass...
Great for CSS, in Ruby on Rails projects.
Great for CSS, in Ruby on Rails projects.
Great for CSS, in Ruby projects.
Impression of Sass...
Great for CSS, in Ruby on Rails projects.
Great for CSS, in Ruby projects.
Great for CSS, in any project!
Impression of Sass...
What if I want to use Sass for somethingthat wasn’t written in Ruby... impossible?
But, wait...
When I think about not having Sass...
http://en.wikipedia.org/wiki/The_Incredible_Hulk_(TV_series)
Yes, but the amount of Rubyknowledge it takes to use Sass isbasically 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?
Part 2:Whither amodule?
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 modulehttp://drupal.org/project/sass
Depends on “phamlp”http://code.google.com/p/phamlpLast updated in September 2010.
PHP needs code write access to themeThis can lead to bad security practices.
Despite the name, only handles SCSS files#sadpanda
•
•
•
Compass stylesheet tool modulehttp://drupal.org/project/compass
Ruby (Compass) does the heavy liftingThis means you need Ruby and PHP on your server.
Can compile CSS using devel or cronThis is similar to “compass compile” but using Drupal.
Compass location across environmentsCompass location set it config. Needs to be managed.
Version and permissions can be an issue
Module admin page is hidden (a bug)
•
•
•
••
Sassy modulehttp://drupal.org/project/sassy
Several dependencies http://github.com/richthegeek/phpsass — and three other modules.
Hooks for namespaces/implementationsIncomplete (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 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.
“Best tool for the job”
ACHIEVEMENT UNLOCKED!Presuppositions Challenged
Note: 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)
Part 3:How to use
For 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
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, adependency of Compass. There’s no need to installseparately. They’re typically used in tandem anyway.
Take a hybrid PHP + Ruby approach
Add config.rb to your theme directory
“cd” to your theme directory,then run “compass watch”
If you just want to flush cache and compile, run“compass clean && compass compile”
application.css is compiledand (optionally) minifiedvia “compass watch”
Serving as a aggregate,application.sass is builtfrom “_file.sass” partials.
I bring over what I do likefrom default Drupal CSSas SCSS files, to import:
_search.scss_system.base.scss_system.theme.scss
Compass outputs theresulting compiled fileas “application.css”
Sass partials begin with anunderscore, aren’t compiledto *.css files individually.
Theme *.info file – before Sassstylesheets[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
stylesheets[all][] = field.css
stylesheets[all][] = node.css
stylesheets[all][] = system.messages.css
stylesheets[all][] = system.menus.css
stylesheets[all][] = user.css
stylesheets[all][] = views.css
For brevity, only CSS files shown
Files in orange arelisted to prevent
Drupal from adding‘em automatically.
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
For 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
; KILL THESE DEFAULT STYLESHEETS:
stylesheets[all][] = ctools.css
stylesheets[all][] = field.css
stylesheets[all][] = node.css
stylesheets[all][] = search.css
stylesheets[all][] = system.base.css
stylesheets[all][] = system.theme.css
stylesheets[all][] = system.menus.css
stylesheets[all][] = system.messages.css
stylesheets[all][] = user.css
stylesheets[all][] = views.css
Theme *.info file – after Sass
For brevity, only CSS files shown
Files in orange arelisted to prevent
Drupal from adding‘em automatically.
stylesheets[all][] = assets/css/application.css
Theme *.info file – after Sass
ACHIEVEMENT UNLOCKEDOnly one CSS HTTP request!
With (or without) cached CSScompression in Performance.
Minus the nonexistent files, to ward off Drupal defaults...
This is still worthdoing. I’ll explainwhy in a second.
Even if using “compass watch” with:
output_style = :compressed
You should still use Drupal’s CSScompression under Performance.
Why? Well, let’s flip to the next slide...
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.
Compass output, before Drupal compression
Compass output, after Drupal compression
Achievement Unlocked!You have now attained CSS
bliss.
Don’t forget to rate this as the besttalk you’ve ever heard in your life.
Or, maybe we forgot something...
Stop the presses!What about debugging?
How do I see what stylesare coming from which
*_file.sass partial?
Part 4:Debugging& Demos
Cryptic errormessages arenever helpful.
^ I believe debugging this way stinks.
When things don’t go as planned...
http://autos.yahoo.com/blogs/motoramic/porsche-stuck-wet-cement-proves-karma-exists-210302568.html
Just a one-line change in config.rb
Emits *.sass “stack trace” for each style
A quick tip on source control
While 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.
Now time for somedemonstrations :)
Note: If you’re viewing these slides, but missed oursession, we showed “compass watch” in action.
“Luck, be a lady...” (live demo = dice roll)
http://kloucksphoto.blogspot.com/2011/06/guys-and-dolls-witty-wry-wonderful.html
If you want to tinker with Haml & Sass...
“We keep thinking we can write better CSS if we justtry harder, that the next site will be clean and staythat way. [Her] presentation shows that in fact, messyCSS is the direct result of our worst best-practices.We need to re-examine those assumptions with aneye to practicality and scalability — as well asaccessibility, standards, and fabulous design.”
Nicole Sullivan @stubbornellaCSS 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/NathanSmithPersonal site — http://sonspring.com
http://twitter.com/MattFarinaPersonal 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 theDrupalCon Denver website
http://denver2012.drupal.org/program
Click the “Take the Survey” link.
Thank You!