Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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. :)

Slide 3

Slide 3 text

Design & User Experience Using Sass & Compass in Drupal Theming Nathan Smith & Matt Farina

Slide 4

Slide 4 text

Hello :) We like Drupal, Sass & Compass. We hope you do too, or will soon. Let us introduce ourselves...

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

Part 1: Why Sass?

Slide 8

Slide 8 text

“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

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli CSS served to browser Neatly organized *.sass

Slide 11

Slide 11 text

“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

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

CSS Sass Compass http://sonspring.com/journal/sass-for-designers

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

Oversimplification, FTW! Compass is to Sass as jQuery is to JavaScript

Slide 17

Slide 17 text

Sass & SCSS are functionally equivalent We prefer using Sass instead of SCSS because hey, less typing!

Slide 18

Slide 18 text

Anti-pattern of nested selectors in Sass

Slide 19

Slide 19 text

Compass makes vendor prefixes easy...

Slide 20

Slide 20 text

Compass brings sanity to gradients...

Slide 21

Slide 21 text

Text editors and IDE’s that support Sass/SCSS syntax Aptana http://aptana.org BBEdit http://barebones.com/bbedit Chocolat http://chocolatapp.com Coda http://panic.com/coda E Text Editor http://e-texteditor.com Eclipse http://eclipse.org Emacs http://gnu.org/software/emacs Espresso http://macrabbit.com/espresso GEdit http://projects.gnome.org/gedit Komodo http://activestate.com/komodo-ide Netbeans http://netbeans.org PhpStorm http://jetbrains.com/phpstorm PyCharm http://jetbrains.com/pycharm RubyMine http://jetbrains.com/ruby SubEthaEdit http://codingmonkeys.de/subethaedit Sublime Text http://sublimetext.com/dev TextMate http://macromates.com Vim http://vim.org Visual Studio http://microsoft.com/visualstudio http://sass-lang.com/editors.html ^ We  recommend

Slide 22

Slide 22 text

GUI to compile Sass & Compass • Compass.app http://compass.handlino.com • Scout http://mhs.github.com/scout-app • CodeKit http://incident57.com/codekit Note: Personally, we prefer to run command-line “compass watch”

Slide 23

Slide 23 text

Impression of Sass... Great for CSS, in Ruby on Rails projects.

Slide 24

Slide 24 text

Great for CSS, in Ruby on Rails projects. Great for CSS, in Ruby projects. Impression of Sass...

Slide 25

Slide 25 text

Great for CSS, in Ruby on Rails projects. Great for CSS, in Ruby projects. Great for CSS, in any project! Impression of Sass...

Slide 26

Slide 26 text

What if I want to use Sass for something that wasn’t written in Ruby... impossible? But, wait...

Slide 27

Slide 27 text

When I think about not having Sass... http://en.wikipedia.org/wiki/The_Incredible_Hulk_(TV_series)

Slide 28

Slide 28 text

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?

Slide 29

Slide 29 text

Part 2: Whither a module?

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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)

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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”

Slide 35

Slide 35 text

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)

Slide 36

Slide 36 text

Part 3: How to use

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

Take a hybrid PHP + Ruby approach

Slide 40

Slide 40 text

Add config.rb to your theme directory

Slide 41

Slide 41 text

“cd” to your theme directory, then run “compass watch” If you just want to flush cache and compile, run “compass clean && compass compile”

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

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 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 F or  brevity,  only  CSS  files  shown Files  in  orange   are  listed  to   prevent  Drupal   from  adding  ‘em   automatically.

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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 F or  brevity,  only  CSS  files  shown Files  in  orange   are  listed  to   prevent  Drupal   from  adding  ‘em   automatically.

Slide 46

Slide 46 text

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...

Slide 47

Slide 47 text

This is still worth doing. I’ll explain why in a second.

Slide 48

Slide 48 text

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...

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

Compass output, before Drupal compression

Slide 51

Slide 51 text

Compass output, after Drupal compression

Slide 52

Slide 52 text

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...

Slide 53

Slide 53 text

Stop the presses! What  about  debugging? How do I see what styles are coming from which *_file.sass partial?

Slide 54

Slide 54 text

Part 4: Debugging & Demos

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Cryptic error messages are never helpful.

Slide 57

Slide 57 text

^ I believe debugging this way stinks.

Slide 58

Slide 58 text

When things don’t go as planned... http://autos.yahoo.com/blogs/motoramic/porsche-stuck-wet-cement-proves-karma-exists-210302568.html

Slide 59

Slide 59 text

Just a one-line change in config.rb

Slide 60

Slide 60 text

Emits *.sass “stack trace” for each style

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

Now time for some demonstrations :) Note: If you’re viewing these slides, but missed our session, we showed “compass watch” in action.

Slide 63

Slide 63 text

“Luck, be a lady...” (live demo = dice roll) http://kloucksphoto.blogspot.com/2011/06/guys-and-dolls-witty-wry-wonderful.html

Slide 64

Slide 64 text

If you want to tinker with Haml & Sass...

Slide 65

Slide 65 text

“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)

Slide 66

Slide 66 text

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!

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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!