Taking Control of CSS

Taking Control of CSS

Throughout your Drupal theming, it's best to make the most of the tools available to you; especially when writing or modifying CSS for the design of your website. Making changes to style sheets greatly impacts the usability and aesthetic of webpages.

Sass and Compass

Sass and Compass provide you with additional tools to write CSS for your Drupal site. Whereas normal CSS is limited as a coding language, Sass implements a lot of other useful language aspects into your files, including variables, mix-ins, and arithmetic. Compass, which is built on Sass, offers an additional library of mix-ins and pre-defined variables.

By taking advantage of variables, Sass prevents the need to create many classes just to hold color or border information. Variables also make maintaining and changing style sheets significantly easier by changing the variable value.

The mix-ins are also exceedingly useful. These are blocks of code that exist in the Sass or Compass library. It takes only one line of code to add them into your files. You can define your own, but there are a few key mix-ins, such as a box shadow or border radius. Mix-ins such as these contain code specific to each browser. As such, utilizing them removes the need to worry your CSS is not compatible across browsers.

Another part of Sass and Compass that makes coding faster is the ability to nest CSS rules. While nesting, you can refer to a parent with an ampersand. For example, if you are within an ‘a’ rule, you can type ‘&:hover {…}’ to include a mouseover link effect. Nesting rules makes writing complicated or repetitive CSS unnecessary, speeding the process of your theming.

Two small inconveniences are associated with using Sass and Compass. You must have Sass/Compass style sheets and CSS style sheets. However, Sass can convert its style sheets to CSS automatically if you tell it to. You can set Sass to ‘watch’ for any changes to the Sass style sheets and it will automatically convert them to CSS. You must also install Ruby, as Sass is built on it.

Sass and Compass may also be used independent of Drupal; but many themes, including Zen, take advantage of them. Though Zen allows for the use of ordinary CSS as well, users of the theme are encouraged to install Sass and Compass to more easily and effectively affect the style of Zen sub-themes created. In your own theming, no matter the theme that you are using, you should consider using this tool to save you time and effort.

Drupal Modules

Many helpful Drupal modules exist to aid you with your theming. However, there are a few unique to CSS manipulation that can be very useful.

The CSS Injector module provides you with a UI to make CSS rules. In doing so, you merely have to provide some CSS code and decide what pages you want this rule to be applied to. Using the Drupal API’s drupal_add_css(), the tool is simple and allows for quick fixes. I wouldn’t recommend using this tool for a significant amount of coding or for any critical CSS. It does, however, give you the option of making some changes very easily. If you don’t want to constantly go into your CSS code while developing, you can use this tool to make changes as you go. That said, you should standardize the rules you intend to keep at regular intervals. It is generally good practice to keep your code in your theme CSS files.

Live CSS is a fantastic module to keep enabled while you are theming. When not in use, it is shown as a small tab on your Drupal page. When you click on it, the module displays a panel with your CSS code. It gives you the choice to view and edit any CSS document that is rendered on your site. Any changes you make are instantly shown on your page and you can save changes if you are pleased with your edits.

Another useful module is @font-your-face, which gives you the ability to easily search for and install fonts for you Drupal site. With a simple UI, you can search through various font providers to find a font or use your own local fonts. Using @font-your-face saves you time downloading and importing fonts in your CSS code.

Firefox Extensions

In-browser tools are also available to help you. Firefox in particular has readily available add-ons that you can download from their extensions page. These tools are not specific to Drupal.

Firebug is a classic extension that displays the HTML, CSS, and scripts on a given page. With this add-on installed, you can easily find CSS rules that are applied to an element and which document they come from. You can also view the layout of the element, which shows the size, padding, border, and margin. This information can change as you resize the page. Firebug is useful if you want to know which part of the page an element or node is in and what CSS is consequently applied to it.

If you are using Sass on your Drupal page, you might also want to get FireSass, an extension for Firebug. This add-on allows you to view the Sass file name and line number a rule originates from rather than the generated CSS file. Seeing Sass line numbers is much more helpful than CSS line numbers when you are coding in Sass.

Another critical tool to use is the Web Developer toolbar. This allows you to do much more than modify CSS – you can resize the window, outline elements, disable or clear your cache, and manipulate images. Even if you are just using it for CSS, you can display the CSS for an element, view or add a style sheet, and disable certain styles, among other tools. The toolbar is also available for Chrome.

CSS Code Editors

If you code on a Mac OS platform and are looking for an editor, you may want to look into using Coda 2 for your CSS development. Coda has a great UI for adding CSS without even coding. If you want to code, though, it is tremendously fast and easy with autocompletion and suggestions. Coda will manage all of your project files and it is easy to navigate between them. A Sass mode also exists in Coda, so you can use this program if you do choose to use Sass as well.

If you use Windows, there are a number of text editors that all do a decent job. You could tryStylizer 5. Although it is not as comprehensive as Coda, it does allow you to preview your code in the application according to any browser’s CSS specifications. It also has a UI for adding CSS like Coda. Komodo is another favorite in the web development community that you may like to try.