Drupal Themes should use Compass (Drupal Camp LA 2013)

462 views

Published on

This is an inspirational session for theme designers/developers. Code will be shown but this is not a how-to session on programming with Compass/Sass/CSS, for that session please visit: http://2013.drupalcampla.com/sessions/getting-sassy-css

Remember the promise of the Color module? The Color module ships with Drupal core and allows a site owner to tweak the colors of their theme through a simple UI, but the problem is not all themes support this feature and normal people pick ugly colors! This is where Compass can really help.

By leveraging the power of Compass & Sass, any contrib Drupal theme can become smarter and prettier. The result is a better experience for those who download and use contrib themes in their Drupal sites.

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

  • Be the first to like this

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

No notes for slide

Drupal Themes should use Compass (Drupal Camp LA 2013)

  1. 1. Please use Compass/Sass for Themes If I may… And other whys answered. ! ! by Chris Charlton http://xtnd.us
  2. 2. For & Against 2
  3. 3. Preaching to the choir here. Arguments For ‣ Write and maintain less code. ‣ Easily generate aesthetically pleasing color schemes. ‣ Wonderful, easy support for bitmap & vector graphics. ‣ Be dynamic and responsive (not in the mobile sense). ‣ Evolve. 3
  4. 4. You’re that guy. Arguments Against ‣ “It’s just another thing to learn.” ‣ “What’s wrong with regular CSS?” ‣ “What if the user doesn’t know Sass?” ‣ “It was trouble to get PHP running, now I need Ruby?!” ‣ “Sass has too many files. One CSS file is all I need!” 4
  5. 5. For 5
  6. 6. Even your first Sass theme will feel good. Imagine you, but 2.0 Write less code ‣ Nesting, Variables, Mixins, [stupid] Vendor prefixes, etc. ‣ Sub-themes and variants are tiny. ‣ CSS output control; scrubbed, minified, and compressed. ‣ New modular styles answer where to organize things. 6
  7. 7. 7 $white : #FFFFFF; $light : #EEEEEE; $dark : #666666;
  8. 8. 8 theme/layout/grid.scss theme/modules/buttons.scss theme/modules/callouts.scss theme/base.scss
  9. 9. Don’t let programmers choose colors. Color // Sass mix(...); // Mix two colors complement(...); // Complementary invert(...); // Invert color // Compass shade(...); // Darken tint(...); // Lighten contrasted(...); // Smart // “compass-colors” gem provides more 9
  10. 10. It’s “mind bottling.” Great bitmap & vector graphics support ‣ Auto-generate Image Sprites from image folders ‣ Leverage dynamic vector and graphic functions. ‣ Leverage CSS3 effects & graphics capabilities • shapes, masks, rounded corners, shadows, glows, gradients 10
  11. 11. 11 .element { // Find image by name background-image: image-url("icon.png"); }
  12. 12. 12 $image: url("images/example.png"); ! .element { // No need to hardcode image sizes height: image-height($image); }
  13. 13. 13 // Output green spritesheet + classes @import "images/green/*.png"; @include all-green-sprites; ! ! // Output blue spritesheet @import "images/blue/*.png"; ! .element { @include background(blue-sprite(icon)); height: blue-sprite-height(icon); width: blue-sprite-width(icon); }
  14. 14. True Sass Ninjas cuts three columns in one swipe. Be dynamic! (Responsive is in next slide) ‣ Conditional logic for dynamic column styles. ‣ Centralizing colors (and images) makes for easier, and better customization. Maintenance profit. ‣ Leverage Sass mixins & functions to reproduce graphics to eliminate shipping with resolution-limited bitmaps. ‣ CSS3 animations & transformations bring themes alive! 14
  15. 15. Mobile - BOOM! Now be RESPONSIVE ‣ This is your next frontier when done with Sass basics. ‣ Good excuse to buy that tablet or any other device. ‣ Motivation to use SVG along with PNG. 15
  16. 16. CSS3 - BOOM! Build on top of CSS3 ‣ This is the new frontier in standards compliance. ‣ Another good excuse to buy that new tablet/device. ‣ Another excuse to use SVG along with PNG. 16
  17. 17. Fin 17

×