Best approach for a minimal HTML5 theme for Drupal

Question

Feel like I'm stuck between a rock and a hardplace, I've decide to post.

I'm looking for answers/opinions on getting going on custom Responsive Drupal v7 theme dev using ONLY HTML5/CSS/Less/Responsive with a primary focus on mobile then desktop with a view to it being a MINIMAL design set. I'm not an IT newbie having been in IT since '86 and then earlydays webdev HTML usage since '97, but due to a health/career change I've recently had to 'upskill' again and hence back in IT and focused now purely on D7 by choice. A lot has changed since '97 and early HTML and now I'm wreaking my brains looking at the best approach to contemporary webdev trends (ie Less/HTML5/CSS/SCSS). I don't really want to use 'off the shelf' free D7 themes as I want to be able to theme myself again using the above. I most definately like the idea of HTML5 Boilerplate/360 and the mobile future.

Numerous hours researching online has left me confused (LOL) with all the available Responsive frameworks (CSS: 360 and up, 1140, inuit/Less etc etc).

So my query here is:

• best approach starting grid for webdev on the above technologies at this entry level of learning. (I like building things so I'm keen as an all rounder, as I think I have way long mised the boat on becoming a 'themer' so my interests lay in 'lego' building in Drupal so to speak).

• should I skip early CSS theory and go straight into Less/SCSS? (html5 will be easy to pick up on me thinks).

• which single Responsive model should I pick to start out with then?

FYI, I'm now on a Linux Ubuntu 11.04 LAMP DEVBOX using a range of tools such as Aptana (and comfortable on a pure text editor) having moved over from M$ but I still have 3 other M$ comps due to other multi-media/pro-music interests.

I've been 'hacking' some D7 themes, but feel I can't see to 'wood for trees' when it comes to hacking to vast amount of data in the css files and feel I'm over whelmed in simply wants to create simple, minimal css so much taht it may be just easier starting from scratch.

Any advice to get me going immediately in the right direction would be most helpful. Thanks in advance. Paul, UK

Answer 1

Less or SCSS are not that dissimilar to CSS (since they compile down to CSS anyway), they just have some additional features (such as mixins) and have in some cases a nicer layout. I personally have used scss and Compass to compile my scss, and also for the ability to include resets and things automatically without having to add in your own reset.css file.

In terms of learning Drupal themes, you have a choice, either use something like the omega base theme and subtheme that, or alternatively start from scratch with a clean, empty folder with the following in it:

exampletheme/
    css/
    templates/
    js/
    exampletheme.info
    template.php

And build up from there. The existing themes, whilst good for some information, are very content-heavy (by virtue of being mature, complex themes). Use a browser such as chrome/firefox with firebug in order to find out what elements are tagged or classed as. The drupal.org theme guide and the specific section on d6 & d7 is quite a good place to start.

As far as grid frameworks, I started using 960 grid as that was something which conceptually struck a chord with me. They all have similar features, though the way they work in practice is different.

Answer 2

Few links for inspiration :

• Best theme for understanding the themeing stuff : zen
  • html5 is in the 7.5 dev version
• Best HTML5 support and a huge effort to "unclutter" the markup : mothership
  • will leave you with a "tabula rasa" - it won't look nice out of box, but the markup will feel better :)
• another interesting approach in the same direction : pony

Answer 3

OK, the thing is that all of that CSS is there for a reason. Drupal has a lot of features, and there is a lot of markup and styles to go along with to work in a generic sense.

If you are new to Drupal, then I think that starting the HTML and CSS from scratch will be a losing battle. You really need to know how Drupal works in order to do this well.

My recommendation is to start out with the Omega basetheme, which is grid based, media-query aware, and has an HTML5 starterkit for subthemes. Subtheme this, and use it as your starting point. Build up your site to have the features you want, and work on theming it. Then once you have a good grasp of things, spend time eliminating the markup from the templates that you find superflous, and then work on the CSS.

Answer 4

I would just add that it might be helpful to build a couple different sites, each with a different subtheme. When you're still in the early stages of learning it's impossible to pick the subtheme that best matches your style because you're still in the process of figuring out what you like. I suppose you could call this the "date around a bit before you settle down" theory.

Since my goal was also a responsive theme, I tried Adaptivetheme and Omega before settling on Adaptivetheme since it has Panels support which I definitely didn't want to write myself.

Also, to experience Drupal in its purest state, you can use Stark (built-in to core, but the core version lacks a responsive design; the contrib version is patched to be responsive).

Answer 5

You might enjoy reading this article (and checking Planet Drupal regularly for articles from many excellent Drupalists): http://www.zivtech.com/blog/responsive-drupal-theme-50-lines-code-or-less

The author describes something very similar to your request. Mobile first, responsive, etc. as a beginning, and has a sandbox project you can check out for details. Bare bones, on which you can add the design you want.