Drupal for Front-End Developers

I’ll say it bluntly: Many Drupal projects look like a real mess from the front-end point of view. The reason is simple. Front-end developers know how it should look but don’t know how to change templates. Back-end developers know how to change templates but usually are not good with the front end.

What do we get as a result?

Back-end developers usually use an incorrect structure for a bootstrap grid. For example, they might use .col-md-4 without .row and .container wrappers. On the flip side, front-end developers might write something like .node-somename .field-name-field-somename-name > .field-name-field > .some-other-wrapper span > {some magic to put it in the right place}

Customizing each element by its specific selector but not with specific classes produces much repeated and legacy code that is hardly maintainable.

Pointing to the wrong specific element may result in global layout bugs that may be difficult to test for in the context of a large web site.

So what can we do?

Actually, changing templates in Drupal is not difficult at all!

Drupal data has a concept of nodes. Each node has multiple fields. You can set a custom template for any node by overriding it. Just put a file with the correct name into sites/all/themes/your_theme/templates folder. But how do you know what should be the name of the template? It’s easy. Set  $conf['theme_debug'] = TRUE; in the settings.php file, and you should see what names are suitable for your part as comments directly on you page. Copy the content of the currently used template and change it to suit your needs. What can you do there?

1. You can set any kind of classes and wrappers.
2. You can exclude unwanted fields from rendering by
<?php hide($content['field_fieldname']); ?>
3. You can render any field at any custom place. To do it, first hide it with
<?php hide($content['field_fieldname']); ?>
and then use print
<?php render($content['field_fieldname']); ?>
to render it where you want.
4. If you don’t like the wrappers that are produced, you can render the plain content of the field using
<?php print $content['field_fieldname']['#items']['0']['value'] ?>
5. You can set conditions with the values of the fields
<?php if ($content['field_column']['#items']['0']['value'] == 'some value'): ?>Some content<?php endif; ?>
You also may use some more advanced features. For example, here is a way to set the correct bootstrap grid classes for the layout where the user may have from one to four items in a row in the theme / templates.php file:

function mythemename_field__field_myfieldname__mynodename($variables) {

   $output = '';
   // Render the label, if it's not hidden.
   if (!$variables['label_hidden']) {
      $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
   }

   // Render the items.
   $output .= '<div class="row field-items" ' . $variables['content_attributes'] . '>';
   foreach ($variables['items'] as $delta => $item) {
      $classes = 'tool-card field-item ' . ($delta % 2 ? 'odd' : 'even') . ' col-md-' . 12 / count($variables['items']);
      $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
   }
   $output .= '</div>';

   // Render the top-level DIV.
   $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '><div class="container">' . $output . '</div></div>';
   return $output;
}

In conclusion: If you are a front-end developer and want to get better at Drupal, you should read articles on drupal.org, read best practices for CSS, and have fun coding!