I'm getting kinda excited about this HTML 5 thing. I'd like to create a Zen subtheme which uses HTML 5, particularly its new semantic tags like <header> and <nav> and such which I could see fitting in really well with a Drupal-powered site. It would also include CSS tweaks to make it behave more predictably in current browsers, and the JavaScript shiv trick to make IE happy.

Before I get started, though, I thought I'd put word out to see if anyone else is working with HTML 5 with Zen, or with any other Drupal theme for that matter, so we can put heads together, avoid reinventing wheels, and other clichés.

Comments

Garrett Albright’s picture

Title: HTML 5 supprot » HTML 5 support

Whoops. Correcting idiotic spelling error in the title.

ccoppen’s picture

I am currently working on implementing a html5 theme in Zen using Zenophile and the following article:

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-fro...

The following also helps:

http://html5doctor.com/html-5-boilerplates/

The key is to copy the page.tpl.php over from the zen folder.

So far so good. Validates in Firefox 3.5. Have yet to test in other browsers yet.

seutje’s picture

Priority: Minor » Normal

updated shiv: http://code.google.com/p/html5shiv/ (also fixes the print issues)

would there be any problem with already patching zen's DTD to <!DOCTYPE html> so we can get rid of these damned annoying and silly XHTML restrictions like target attribute on links (which no module developer rly respects anyway)?

I'm already doing this in all my subthemes and it's pretty much the only reason I override page.tpl.php

seriously, is there any reason we are still using an XHTML DTD?

spaceninja’s picture

We ported our Boron HTML5 theme to Zen. The goal is to change as little as possible, just upgrading the doctype and using new semantic markup. Check it out here: http://drupal.org/project/boron_zen

akalata’s picture

Status: Active » Needs review
seutje’s picture

Status: Needs review » Active

how exactly does this need review?

btw, feel free to check out https://github.com/seutje/zen/tree/7.x-4.x (work in progress, slow progress though)

akalata’s picture

I would say the boron_zen link needs review, the link you posted will need review, and just the general idea that one of the maintainers might want to know what's going on. Though I guess the active tag would mean the same thing.

JohnAlbin’s picture

Version: 6.x-2.x-dev » 7.x-3.x-dev

Moving to 7.x-3.x.

JohnAlbin’s picture

Component: CSS/HTML Markup » layout.css

Seutje, I'm shutting off my Zen github mirror now that drupal.org is on Git. Plus, all the commit SHA1s have changed.

However, I didnt' want to screw up your work, so I rebased your 7.x-4.x onto the tip of 7.x-3.x on github. And then rebased it onto the tip of the drupal.org 7.x-3.x. I've pushed the branch to drupal.org and called it seutje-html5. Everyone should consider that an experimental branch. But it represents all of Steve's work at this time. http://drupalcode.org/project/zen.git/tree/refs/heads/seutje-html5

JohnAlbin’s picture

Component: layout.css » CSS/HTML markup
seutje’s picture

heh, thanks!

as I've already told John, I've ceased development on that branch.
I used to use Zen all the time at work, but I've changed employer and here they prefer to use Tao, so I will most likely be tinkering with that instead.

thx though, see ya in Chicago :)

JohnAlbin’s picture

Version: 7.x-3.x-dev »

Talked to Jen Simmons about HTML5 in Zen. Decided to convert Zen fully to HTML5 with the 7.x-4.0 release. [Edit: see below.]

JohnAlbin’s picture

Version: » 7.x-5.x-dev

History lesson first: When I originally ported Zen to Drupal 6, I had intended to do a straight port of Zen 5.x-1.0. By the time I got to 6.x-1.0-beta3, I realized that the changes required to port Zen to Drupal 6 meant that I was actually working on a major revision and should be the 6.-2.x branch, but it was too late. :-p

Anyway, if you don't count the Zen 5.x-0.x branch (another major version), the HTML5 version of Zen is the 5th major branch. (5.x-1.x, 6.x-1.x, 6.x-2.x, 7.x-3.x, HTML5 version)

So I've decided to name the HTML5 branch 7.x-5.x. :-D

bronzehedwick’s picture

I would be interested in helping move Zen to HTML5...I've been using Drupal for several years now, but am new to developing. Would anyone be kind enough to point me in the right direction to help? Thanks!

Garrett Albright’s picture

bronzehedwick, Drupal's official guide on contributing code starts here, though it may be a bit tl;dr. But the general process goes like this;

  1. Check out the project using Git
  2. Make the changes you'd like or fix the bug that, er, bugs you
  3. Create a patch using Git for your changes (A "patch" is a special file which represents the changes you've made in a file or group of files from one version to another.)
  4. Submit your patch in the issue queue, in a new issue or in a currently-existing one as may be appropriate
  5. If the project lead(s), JohnAlbin in this case, approve(s) of the patch, they'll accept it into the project.

It might be confusing at first, but once you go through the process a couple times, it becomes second nature. The Git part in particular may be confusing if you're not familiar with distributed version control systems, but there's lots of documentation, both online for free or in book form, to help you get started.

Thanks for your dedication to the Drupal project! :D

bronzehedwick’s picture

Thanks Garrett! I'm excited to dive into this. Git here I come!

adellefrank’s picture

subscribing

Zachmo’s picture

subscribing

chichiMi5’s picture

sub

wilgrace’s picture

subscribe

KrisBulman’s picture

Lin Clark's blog post on RDFa & HTML5 is a good drupal related resource

http://lin-clark.com/blog/theming-html5-and-rdfa-drupal-7

John posted a tweet a while ago about adding html5shiv to Zen, although I'm not sure if it made it in?

Rock! The html5shiv (r17) is now dual-licensed under the GPL! Adding this to #drupal Zen right now. #html5.
http://twitter.com/JohnAlbin/status/75068175577907200

Hanpersand’s picture

Subscribe!

jensimmons’s picture

I have all kinds of ideas about this, so subscribing.

KrisBulman’s picture

care to share the ideas Jen? it'd be nice to get cracking on this even for my own zen subthemes, just not sure of the right approach.

jensimmons’s picture

Kris — well, I've been putting my ideas into HTML5 Base http://drupal.org/project/html5_base — you are welcome to open up the .tpl files from it and copy stuff over to a Zen child theme. Base is still very rough; I haven't put everything in it yet, and I haven't fixed up the bugs.

There are sadly also many many things in Drupal that prevent quality HTML5 semantic markup. We need Views to allow us output more elements. #1083690: Custom HTML element for wrappers We need core to stop stripping them out. #732992: Allow filter_xss_admin() to accept HTML5 tags We need an easy way to specify the element on each block and node field without having to create a custom .tpl file for each one. (HTML5 Tools plans to do this.)... I hope to write about all this on my website later this year.

Meanwhile, just go for it! Every site is different. Semantic HTML is about the content, so not every site will need the same kinds of theme stuff.

JohnAlbin’s picture

This issue has stalled a bit, but that's because I've been trying to tackle the biggest, messiest HTML5 problem in Drupal: what to do with Drupal fields. I started talking about this with people at Drupalcon London. I liked the idea of using theme hook suggestions to use different markup depending on the context. However…

While a theme can know the semantics of core-provided fields, fields that are added by a site builder are problematic. I came to realize that it is impossible for the theme to determine or specify the semantics of all the fields on a real site. A site builder needs to specify the semantics of each field. While you theoretically could create a form in the theme settings for every field, it would be unwieldy and confusing from a UX perspective.

Jen Simmons, Greg Leroux, Nate Striedinger, Pat Teglia and I discussed these issues in September and came up with these conclusions.

We need a module to provide a configuration that is:

  1. simple
  2. at the field level, not the "view mode" level.

Semantic fields and field wrapper module both add complex configuration options to each view mode on the "manage display" tab. Asking for 3 separate tags to wrap the field is overkill. It should ask for one HTML element and that's it.

Having to re-configure the HTML for each view mode is also overkill; the semantics of the field are almost always static once you've added a field to a entity (node/user/etc.) which is why the HTML configuration should be on the field's edit settings form.

We also needed to tweak Views' default options so that newly created Views default to using core's field templates (so that our module would continue to set the markup for the field).

We started work on that and now have a module with a 7.x-1.0-beta1 release: Fences

JohnAlbin’s picture

JohnAlbin’s picture

Missed something in the html.tpl.php: http://drupalcode.org/project/zen.git/commitdiff/9d465d7

JohnAlbin’s picture

Just opened #1347236: Convert page markup to HTML5 because I want that complete before #1246540: Add aria landmark roles to Zen lands.

I haven't started it yet. Going to spend the day with the family. Love to see some patches for that issue before I get back. ;-)

JohnAlbin’s picture

Not directly related to HTML5, but there's: #1361592: Remove div.content from block.tpl and #1348258: Add box-sizing: border-box to the Zen Columns layout method

That means all of Zen's markup has been converted to HTML5!

Are there additional pieces of Drupal's default markup that we should convert?

seutje’s picture

sweet!

you, sir, are a hero!
and you'll be glad to know I'm probably going to switch back to Zen as my default starter theme, so don't be surprised to see some incoherent issues and anal ranting :P

does this mean we can set this to fixed?

JohnAlbin’s picture

Component: CSS/HTML markup » CSS/SASS/HTML markup
Status: Active » Fixed

Yeah, I think this is fixed. Thanks everyone!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.