Nine front-end tools, techniques, and practices for Drupal themers

It is always helpful when other people share how they do things, so if you found this blog interesting then please, share some of your own tools and techniques in the comments area. Also, if you have any questions, don't be afraid to ask! 

1. Compass

Before Compass existed, we needed to know every property's browser-prefix (e.g.  -moz-linear-gradient, -webkit-gradient) by heart and rewrite them over and over again every time we wanted to do something in CSS3. Compass keeps an updated library of the latest prefixes so you don't have to do the research and updates them when you compile. Some of the main features of Compass are:

• Cross browser CSS3 mixins (stop trying to remember all those CSS3 browser prefixes!).
• Common typography patterns.
• Common styling patterns.
• Built in spriting capabilities.

Compass isn't the only player in providing browser-prefixes, the lightweight Bourbon library also handles this pretty well.

2. Breakpoint

Mason Wendell's breakpoint extension makes media queries small, so you can do browser specific CSS in clean and lean sorta way. This simple adjustment even changed the way I organize my scss files. In the Omega days, we would put our breakpoint specific code in separate css files. This was a nightmare. Now we add our mediaqueries where they belong, as controllers within the elements they are affecting. Using the breakpoint extension also facilitates the practice of using more breakpoints that are defined based on the element they are changing rather than common device dimensions.

$breakpoint-nav-small: 480px;
$breakpoint-nav-wide: 960px;

.nav {
  @include breakpoint($breakpoint-nav-small, $breakpoint-nav-wide) {
      // Do something with nav.
  }

  @media only screen and (min-width : 480px) and (max-width : 960px) {
// Do something with nav.
  }
} 

With breakpoint() you can also specify a $no-query parameter. This is very useful for replacing respond.js as a way to have your mobile-first media queries display in <=IE8. 

3. Vertical Rhythm

Rhythm is just a repeated pattern. The more consistent the pattern, the better the rhythm. In music, it’s the structure that ties all the different instruments together.
- TypeCast 

Vertical rhythm means that most of your elements start and stop predictably while scrolling down a website. Compass' vertical rhythm mixins make this complex font-nerd fettish a front-end dev's reality. Easy to use functions allow you to add a pretty accurate vertical rhythm to your site without needing to make complex calculations. Check out this snippet from Zen's _base.scss and normalize.scss to see how a reset stylesheet can implement vertical rhythm from the very beginning.

// Basically Compass' rhythm function takes the variables below and creates a rhythm down the page.
$base-font-size: 16px;
$base-line-height: 24px;

// The rhythm() mixin outputs a margin of margin: 0.85714em ... a computed EM value that will make your site line up. Obviously it is more complicated than that, but that is for another post.
p, pre {  margin: rhythm(1) 0;} 

4. Icon Fonts

Using icon webfonts ensure that your icons are vector based, which is important with new high-res devices. Once you learn how to use them, they are quite easy to use. Icomoon.io should be an essential tool in every themer's arsenal. 

Here is a great post on how to use icon fonts from Chris over at CSS-Tricks. Also, ShopTalk is a great podcast if you want to hear about CSS related topics.

Tidbit on Icon Fonts: Ligatures are available in WebKit and IE 10+ which will be great for accessibility. Also, try to avoid using fonts mapping to letters because screen readers will read them aloud, confusing the impaired user.

5. Responsive Images

There is no decided on solution in Drupal to load different files based on device/device-width. It seems like every site needs its own responsive image solution. There are some great modules that attempt to address this problem, both with under a thousand downloads. I have semi-evaluated three of them, please expand in the comments if you have more up-to-date info.

• I have been most successful in using a combination of the Picture/Breakpoints modules to create responsive images that work inside of a Flexslider. These solutions are backported from Drupal 8 core so that is appealing as it is likely to have more support.
• Borealis, the module by Snugug works great out of the box, with minimal configuration time. But it seems sliders are where I use responsive images the most and the module didn't work with the slideshow module I was using.
• Adaptive Image Styles seems to be the most stable responsive image module for Drupal, but it is only limited to one set of responsive images for now, which really limits it's usability.

6. Grid Systems

Susy, Zen Grids, Singularity and others provide a great framework for your site's responsive layouts. Whether you use these tools or build your own responsive grids, understanding the principles behind these grid systems will make more complex layouts simpler.

7. Style Guides

Style guides are not new, but there are a range of new tools that came to my attention that will replace the importance of a styleguide in front-end circles. Kalei Styleguides, StyleDocco, and Knyle Style Sheets are promising projects that offer a solution to the complexity of creating language out of a design. The Styleguide module defines many core Drupal elements on a page to be styled. Check out this DrupalCon Sydney session on Styleguides by Luke Brooker.

8. SMACSS

Smacss is an e-book written by Yahoo! lead front-end dude that defines some much-needed organizational principles for Cascading Style Sheets. A SMACSS workflow intends to make css and HTML more semantic and less specific. SMACSS neatly divides your base styles, layouts, and modules (not Drupal modules but CSS modules, I know, confusing!) into reusable parts.

9. Pseudo Sprites

You would be amazed how often I see parts of people's sprite maps that show when their containing <div>s are stretched too high or wide.

Placing a sprite in a pseudo-element with overflow:hidden and with Compass sprite height/width detectors will make sure only your targeted sprite is displayed and not unintended sprites. I made a mixin to apply a pseudo sprite on demand and place an icon next to the element of my choice. This works well with icon fonts.

/* Allows sprites to be positioned in pseudo elements. */ 

// Feed this mixin the name of the image and it will spit out a pseudo element along with a cropped background image apply.
@mixin pseudo-position($sprite-name) {  
  // This will add padding that equals the particular sprite's width to the left of the sibling element in order to make room for the sprite.
  padding-left: sprites-sprite-width($sprite-name) + $indent-amount;
    &:before {      
       position: absolute;     
       left: 0px;      
       top: 0px;
       // The following Compass mixin pulls in the sprite background then crops the element respectively.      
       @include sprites-sprite($sprite-name);     

       // Compass' sprite helper functions.
       height: sprites-sprite-height($sprite-name);     
       width: sprites-sprite-width($sprite-name);    
       overflow:hidden; 
    }   
  }
} 

These are just some of the tools were are using. Let us know what you're using in the comments!