Drupal 7 HTML5 Boilerplate Starter Kit

Drupal 7 renders a lot of HTML markup that you need to override in order to implement something like HTML5 Boilerplate. Personally I think it’s the wrong approach when Drupal renders build-in HTML which you then have to overwrite in order to slim down the resulting HTML markup – but that’s just my personal opinion.

After several Drupal projects I decided to create a Drupal 7 HTML5 Boilerplate Starter Kit, the goal is to have a starter kit so clean that it’s no sweat to implement any HTML theme without having to overwrite too many existing theming functions.

Your theme folder structure should look something like this:

theme-folder/
 - css/
   - bootstrap-responsive.min.css
   - bootstrap.min.css
 - style.css
 - js/
   - libs/
   - plugins.js
   - scripts.js
 - html.tpl.php
 - page.tpl.php
 - region.tpl.php
 - block.tpl.php
 - node.tpl.php

In order to make use of twitters bootstrap framework which I downloaded as part of the HTML5 Boilterplate you need to adhere to a simple convention:

Drupal regions = bootstrap rows
Drupal blocks = bootstrap spans

Drupal 7 block render array

When creating an old fashion block in Drupal 7 you should try to use the new render() function in Drupal 7. It takes a bit getting used to, especially when it comes to passing variables to a theming function.

This is probably how your current block content would look inside a hook_block_view() function:

$block['content'] = '<p>some HTML</p>';

This will work as expected, but if you want to use the render function it should look like this:

$block['content'] = array(     '#markup' => '<p>some HTML</p>', );

Pretty basic stuff. Now once you start using some of the build in theming functions in Drupal 7 it gets a bit more complicated.

In a project I am currently working on I wanted to use the theme_image_formatter function build into Drupal 7 in order to output an image coming from facebook’s graph API.

This is how the code looks inside the hook_block_view()

$block['content'] = array(     '#theme' => 'image_formatter',     '#item' => array(         'uri' => 'hello.png',         'alt' => 'hello',          'title' => 'some title',     ), );

drupal 7 theme tutorial

I’m helping a friend of mine whip a Drupal 7 site together, and part of the work is to create a responsive HTML5 based design for the site.

Building a Drupal 7 theme from the grounds up isn’t difficult, all you have to do is follow these simple steps and then your ready to rock n roll.

1) create a folder for your theme in sites/all/themes/ in my case the theme will be called “badning”, so Ill create the folder sites/all/themes/badning

2) place a name-of-your-theme.info file in sites/all/themes/name-of-your-theme, in my case it will be badning.info

Add the following to your name-of-your-theme.info file:

  1 name = Badning theme
  2 description = Badning.dk responsive theme
  3 core = 7.x
  4 engine = phptemplate
  5 regions[header] = Header
  6 regions[content] = Content
  7 regions[footer] = Footer
  8 stylesheets[all][] = badning.css
  9 scripts[] = badning.js

I have only added the bare minimum of regions that I will use. Now your ready to building your actual theme.