February 12, 2014

Theming is a thing no project can be done without. Though it is not difficult, it has many peculiarities. I would like to share some basic knowledge about theming and describe most common mistakes and the ways to avoid them.

First, let’s consider what you should think of before you begin theming:

  1. Read project requirements carefully to figure out what resolutions/devices/browsers versions should be supported.
  2. Attentively look through the design. Usually the theme consists of a set of similar elements and blocks. Your aim is to find all the repeated elements. It will let you apply styles to a bunch of elements or blocks and reduce CSS files length.
  3. If you work in a team create or join a repository of the project.

When you are done with the list above, you can start theming:

1. Choose basic theme and create your subtheme

A starter or "base" theme is one that typically has very little style and is designed to give you a head start building your own unique theme, usually using Drupal's subtheming.

clone_theme.png
Fixed width layout themes:

Boron - a base theme for Drupal which converts the core template files to HTML5 markup. Like other minimal base themes, such as Zen and Stark, it includes only a few lines of layout-driven CSS, and markup that is search engine optimized.

Stark - The Stark theme was recently added to Drupal 7. This is an exact copy backported to Drupal 6. The Stark theme is provided for demonstration purposes; it uses Drupal’s default HTML markup and CSS styles.

Responsive layout themes:

AdaptiveTheme - A powerful theme framework designed from the ground up to power modern, cross browser/cross device websites using responsive design techniques.

Omega - The Omega theme is an advanced 960.gs base theme that utilizes functionality from several major themes, and incorporates the core Ninesixty functionality for grid management, but has an advanced theme settings interface to allow for grid management without editing code.

Zen - A powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Stark. This theme has fantastic online documentation and tons of helpful code comments in its PHP, HTML, CSS and Sass.

2. Add fonts using one of the following methods:

a. Google font
Adding google fonts is quite easy. Find the font you need, then choose the styles and character sets you want for this font, and add the following code to your website (choose the way):
Standard way:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Css import:
@import url (http://fonts.googleapis.com/css?family=Open+Sans);

The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

font-family: 'Open Sans', sans-serif;
b. Font-face

If you need a specific font which is not presented in google font collection, create @font-faces and add them to your site. All you need is to upload a .ttf file of the font to one of webfont generators which transform these files to @font-faces. Here’s a list of the most popular and reliable services:

  • http://www.fontsquirrel.com/
  • http://www.font-face-generator.com/
  • http://convertfonts.com/
After uploading you’ll get a webfont kit which includes .ttf, .eot, .woff, and .svg files and a CSS file:

@font-face {
font-family: 'latoblack';
   src: url('lato-black-webfont.eot');
   src: url('lato-black-webfont.eot?#iefix') format('embedded-opentype'),
        url('lato-black-webfont.woff') format('woff'),
        url('lato-black-webfont.ttf') format('truetype'),
        url('lato-black-webfont.svg#latoblack') format('svg');
   font-weight: normal;
   font-style: normal;
}

Add this to your CSS and then add the font name to your CSS styles. For example:

font-family: 'latoblack', sans-serif;

3. Keep on adding styles and make sure that you follow these rules to prevent the mistakes:

a) All basic elements should be included in your CSS.
It often happens that the design doesn’t include all the elements, but you should think of the customer and be confident that their content will look good no matter what they add. Remember to add styles to: body, titles, links, tables, and lists.
b) Choose the selectors accurately.
Always think wide when you add styles. Some elements and blocks might have similar styles and you can unite them to reduce your stylesheet size.
Here you'll find a great tutorial about CSS selectors.
c) Never add line-height in px to the body.
Even if you override the headers line-heights, there’s a possibility to encounter the text which is half-cut. So either use em or set line heights for the certain elements.
d) Make sure that the links include the nearest images and whole buttons (not only text inside).

 

right_wrong_1.png
right_wrong_2.png
 

If possible, try to use inline elements inside links.

e) Use sprites for hover effects.
An image sprite is a collection of images put into a single image. Use a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it.
 
sprite.png
A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
 
sprite_2.jpg
 
f) Be careful with ‘overflow: hidden.
When all elements inside their parent element are floated, it happens that the parent element does not automatically force the parent element’s height adjust to the floated element, it collapses. When an element is floated, its parent no longer contains it because the float is removed from the flow.
 
collapsed_parent.png
There are three common ways to solve it.

1. Add ‘clear: both;’ to the full-width element inside the parent element. It doesn’t work when there’s no such full-width element.
2. Add ‘overflow: hidden;’ to the parent element. Before using this method make sure that you have no absolute elements or lists which are partly out of the parent element. It might cut them.
3. Use clearfix. If nothing else helps, it will.

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
    display: inline-block;
    *zoom: 1;
}

Our company loves clean code. Follow our basic rules and clean up your CSS:

1. To make the CSS more readable, put one selector on each line.
2. Use indent with 2 spaces.
3. Use an indent after semicolon in declarations.
4. Use lowercase in your CSS file.
5. Use a hexadecimal (hex) notation when you define colours (i.e.: #000000).
6. Use comments. They are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/".
7. Try to avoid using hacks or informations about versions of browsers. Try to find a cross-browser solution first.
 
compare.png
 
A very important part of theming is a cross-browser quality assurance.

Check your site in all browsers and devices which are enumerated in the guidelines.

Never forget to check the site as a logged-in and not logged-in user. Some elements might be hidden or styled in a wrong way. Sometimes there also are differences in the layout for different users. Mind this! To make your QA more comfortable, use a testing table.

Was this article helpful? Click to rate: 
Average: 4.4 (7 votes)

You may also like

The last time when we had a talk on Drupal modules we offered you a...
Introduction An implementation of an effective search is one of the...
Introduction Headless Drupal is one of the most exciting topics that...