Must-knows and common mistakes in theming

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.

Must-knows and common mistakes in theming 1

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 a 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 the 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 web font 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).

Must-knows and common mistakes in theming2
Must-knows and common mistakes in theming3

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.

Must-knows and common mistakes in theming4

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.
 

Must-knows and common mistakes in theming 5

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

Must-knows and common mistakes in theming 6

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 the semicolon in declarations.
4. Use lowercase in your CSS file.
5. Use a hexadecimal (hex) notation when you define colors (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 information about versions of browsers. Try to find a cross-browser solution first.

Must-knows and common mistakes in theming 7

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 a 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. About adaptive layout testing.

You might also like