Clean your Drupal html code with Fences

Drupal fences

When I use Drupal, I always try to delete all the unnecessary divs and classes of panels, views and more. I understand that Drupal provides much code to simplify our work: lots of classes give us more opportunity to theme easily. When your are an advanced Drupal user, you want your Drupal code as clean as possible. Fences helps us to do it.

Installing Fences
I recommend to install Fences before you start a project. It's possible that you are using some of the classes or ids that Fences will remove. So, be careful with that.

  • Download or install in the Install new module section of your Drupal dashboard: Fences

Then, you have a new section in admin/config/content/fences. Here you can configure the default markup and classes used on your site.
As I said, I recommend to use all the override options for new sites.

For new fields, in the configuration of it, you have a new option to customize its markup.

The results
The html content of your body in any content type is displayed like this:

<div class="field field-name-body field-type-text-with-summary field-label-hidden">
  <div class="field-items">
    <div class="field-item even">
      <p>Your body content</p>
    </div>
  </div>
</div>

If you override the body markup of your content type with Fences, the results will be:

<div class="field-body">
  <p>Body text goes here!</p>
</div>

It's really nice, the results are very clear.