HTML5 and Drupal Theming
Scott Vandehey CSS Ninja Metal Toad Media @spaceninja Quick Survey
Raise your hands if: •You have heard of HTML5 •You have created a Drupal theme •You have used HTML5 before Image credit: Dale Stephanos Photo credit: Jacinta Lodge Photo credit: Kevin Simpson
Photo credit: Ian “Bluemoose”
USERS > AUTHORS > IMPLEMENTORS > SPECIFIERS > PURITY Photo credit: Kris Krug Video
Video
Video
New Input Types
Image credit: A List Apart Image credit: A List Apart Doctype
Character Set
Photo credit: Tylor Sherman What’s Drupal doing with HTML5? Not much: It’s coming in version 8, but for now, it’s up to us. Add the HTML5 Shim for IE Add this conditional comment to your page template
Alternately, download the script and load it in your .info file scripts[] = scripts/html5.js Add block styles for new elements Add this CSS to your stylesheet section, article, header, footer, nav, aside, hgroup { display: block; } Change Content Type Add this function to template.php function THEME_html_head_alter(&$head_elements) { $head_elements['system_meta_content_type'] 䋒 ['#attributes'] = array( 'charset' => 'utf-8' ); } Change Search Form Add this function to template.php function THEME_preprocess_search_block_form(&$vars) { $vars['search_form'] = str_replace( 'type="text"', 'type="search"', $vars['search_form'] ); } HTML.tpl.php
... ... HTML.tpl.php
... ... Page.tpl.php
Comments
Add new Comment
subject ?>
subject ?>
Follow me on Twitter: @spaceninja
!"#$%&%'()(*+',-
Comments
Add new Comment