ThemeShaper Forums » Thematic

[closed]

HTML5 Boilerplate Header with Thematic

(13 posts)
  • Started 2 years ago by ScottNix
  • Latest reply from middlesister
  • This topic is not a support question
  1. I had a project where I needed Modernizr, so I added a no-js class to the html file, but the way I was prevously doing it is I would pull in the header.php into my child theme and comment out 2 lines, it felt dirty, so I fixed it so it now works from the functions.php file only.

    HTML5 Boilerplate Style

    // creates the doctype section ( html5 boilerplate style )
    function childtheme_create_doctype() {
    	$content = "<!doctype html>" . "\n";
    	$content .= '<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->' . "\n";
    	$content .= '<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->'. "\n";
    	$content .= '<!--[if IE 8]> <html class="no-js lt-ie9 ie8" dir="' . get_bloginfo ('text_direction') . '" lang="'. get_bloginfo ('language') . '"> <![endif]-->' . "\n";
    	$content .= "<!--[if gt IE 8]><!-->" . "\n";
    	$content .= "<html class=\"no-js\"";
    	return $content;
    }
    add_filter('thematic_create_doctype', 'childtheme_create_doctype');
    
    // creates the head and meta charset tags
    function childtheme_head_profile() {
    	$content = "<!--<![endif]-->";
    	$content .= "\n" . "<head>" . "\n";
    	$content .= "\n\t" . "<meta charset=\"utf-8\">" . "\n\n";
    	return $content;
    }
    add_filter('thematic_head_profile', 'childtheme_head_profile');	
    
    // remove meta charset tag, now in the above function
    function childtheme_create_contenttype() {
    	// silence
    }
    add_filter('thematic_create_contenttype', 'childtheme_create_contenttype');

    Ouputs in the Header

    <!doctype html>
    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6" dir="ltr" lang="en-US"> <![endif]-->
    <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7" dir="ltr" lang="en-US"> <![endif]-->
    <!--[if IE 8]> <html class="no-js lt-ie9 ie8" dir="ltr" lang="en-US"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js" dir="ltr" lang="en-US">
    <!--<![endif]-->
    <head>
    
    	<meta charset="utf-8">
    
    	<title>Dev Site | Just another WordPress site</title>

    I also made another "cleaner" HTML5 header which also has the no-js class and just has 1 class of ".ie" for IE6, IE7 and IE8 and is more intended for sites that don't care about supporting IE6. If you are good at CSS and tend to never need IE specific CSS you might want to try the other version http://scottnix.com/2012/html5-header-with-thematic/

    Eventually I will get around to cleaning up some stuff and post the information on how to get Modernizr on a Thematic theme here too (which is cake) but I just have to write it up.

    Any suggestions/changes/thoughts are welcome, thanks.

    Posted 2 years ago #
  2. neat work scott. i've been playing around w/ using boilerplate w/ my own projects. i really like the IE classes, and am leaning more and more towards serving IE8 and older a single, simplified layout and server the regular layout via media query à la:

    http://jonikorpi.com/leaving-old-IE-behind/

    what is the benefit of modernizr? just wondering if i should bother w/ it, esp if i don't serve anything interesting to IE

    Posted 2 years ago #
  3. middlesister
    Member

    Well the idea is of course that you get a whole lot of html classes based on whether a browser supports a feature. So you could have

    body {
        background-image: url(first.png), url(second.png);
    }
    .no-multiplebgs body {
        background-image: url(alternative.png)
    }

    True, I guess if you don't bother with IE8 and older, a lot of the css3 is well supported anyway across the board so it might be a bit overkill. Though you could use it for something like making links or buttons bigger on touchscreens:

    #button {
        /* nice rounded corner button */
    }
    .touch #button {
        /* make button bigger - easier to hit with fingers */
    }

    Maybe the bigger use would be to have all those variable accessible via javascript:

    if (Modernizr.touch) {
      $(el).click(stuff);
      $(el).click(stuff);
    } else {
      $(el).mouseover(stuff);
      $(el).mouseover(stuff);
    }

    (see the better alternative code at http://stackoverflow.com/questions/5985430/different-methods-based-on-modernizr-click-vs-hover)

    @scott: great tip!

    Posted 2 years ago #
  4. The Man, The Myth, The Legend Paul Irish added a link to this snippet as a resource on his conditional class article. I was pretty excited about that, then I went through a phase where I was super impressed the guy keeps the info up to date on a article from 2008 which is pretty bad ass.

    Thanks for answering the basics of Modernizr middlesister, also a handy thing it does is you can load the IE shim/shiv through it and also use the media queries polyfill for IE6/7&8. It has a sick build interface so you can only include what you need, it gets compacted and you load it through one script. It is just so clean for more modern sites.

    For Thematic, I just use it for the CSS classes it adds to provide graceful fallback support for CSS (middlesister's first example).

    Posted 2 years ago #
  5. scott, any idea how well these work with the use of an aggressive caching plugin? i am guessing they'll still do fine b/c it is always in the markup and depends completely on the browser. any experience to the contrary?

    Posted 2 years ago #
  6. You are right, a caching plugin won't effect it at all because it is based on the browser. Thematic should actually use this style instead in my opinion, minus the .no-js class which is modernizr specific.

    I also tested this on the SVN version of Thematic and it works fine but it looks like there is no longer a "\n\t" needed to move the meta charset if you want it to look pretty. ;)

    Posted 2 years ago #
  7. To get the Modernizr script, go make a custom build here.

    Add this snippet to functions.php

    // script manager template for deregestering and registering scripts.
    function childtheme_script_manager() {
    
    	// wp_enqueue_script template ( $handle, $src, $deps, $ver, $in_footer );
    
    	// deregister standard jquery
    	wp_deregister_script('jquery');
    	// loads modernizr-js script, local path, no dependency, no version, loads in header
    	wp_enqueue_script('modernizr-js', get_bloginfo('stylesheet_directory') . '/js/modernizr.js');
    	// loads jqery script, from google cdn url, no dependency, yes version, loads in footer
    	wp_enqueue_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1', true);
    
    	}
    add_action('wp_enqueue_scripts', 'childtheme_script_manager');

    Put the script in a folder of /js/ in your child theme, name the script modernizr.js.

    The little snippet above will also turn off the normal jQuery that comes with WP/Thematic and instead load it from the Google CDN which will be enqueued in the footer. Modernizr however will be loaded in the head as required in the docs. For more info/links, check my post.

    Posted 2 years ago #
  8. middlesister
    Member

    Scott, you seem to have done some work on making thematic child themes using HTML5. I have an idea and I wonder what you think about it.

    We are working right now on getting a new version of Thematic ready. After that, there is the move to the new site and I don't know when new 'features' like moving to HTML5 can be discussed or integrated. I know some have expressed wishes for Thematic to go HTML5, but that would not only be a major undertaking but also make a decision for the child themes that would best be left to the theme developers. Plus, HTML5 is still a moving target so the exact specifics would probably change over time

    My idea is to gather some filters and snippets like this into a plugin that would make Thematic use HTML5 with the flip of a switch. Currently I am inclined to wrap everything in current_theme_supports calls so that if someone activates the plugin on a site with a "normal" thematic child theme, nothing would happen. But a child theme that wants to only need to use

    add_theme_support( 'thematic_html5' );

    in their functions file and BOOM your site will be transformed.

    The idea in the long run would be that if/when we get the plugin to a stable state and are happy with it, we could ask to get it included in the thematic core in a html5-extensions.php or something like that.

    What do you think? Would people be interested in a plugin like that? Would *you* be interested in a plugin like that?

    Posted 2 years ago #
  9. I wouldn't even know what to think about merging HTML5 structure with the old Thematic. Most of the things I do to themes are all along the lines of faking things to look cleaner or modern. I just don't know enough PHP and Thematics core files to even be able to grasp a plugin like that.

    IMHO, I would make a completely new Thematic platform off of HTML5 and let the old one slowly die off. If it were on something like Github, I know tons of people would contribute. To me it just seems like it would almost be as much work to branch it and make an HTML5 version as it would to make the old version compatible with HTML5.

    It may be best to even use the old version as a starter framework for developers who feel more comfortable with standard layouts and have the HTML5 version as the choice to more experienced/seasoned veterans. The main reason I would even want a HTML5 version is to build Responsive sites, it is soon going to be the new "Web 2.0" buzzword and there is almost a moral responsibility to let people know, hey Thematic is literally getting a little out dated. Now don't get me wrong, it is super awesome, but the whole HTML5/Responsive thing will keep it from truly standing out.

    One tiny example, the HTML5 shiv/shim scripts which just allow old IE's to render the new elements. This would most likely be packaged in the code of ThematicFive, but I would always be removing that and adding Modernizr to instead load the shim, also the polyfill for media queries in old IE's and the feature detection. Modernizr would load that all in one nice minified script, but newer people, or someone who is primarily a developer/designer may have a steep learning curve with all the CSS3/Media Queries/HTML5 structure. Normalize.css, New Clear-fixes, sooo much to think about for someone new or set in their old ways and to make the old Thematic do that stuff, I couldn't even wrap my head around it.

    I certainly wouldn't know best, but I think two completely different versions would be best, need Github! I will think about this more, I will be gone for a few days and didn't want to not respond, otherwise I would have thought about it a little more. ;P

    Side note, a few days ago I finally started really using the Sublime 2 text editor, and it is ridiculously awesome.

    http://www.sublimetext.com/2
    http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/

    Posted 2 years ago #
  10. middlesister
    Member

    Thanks for you input.

    I had no intention of trying to coax thematic into using the whole boilerplate, just making the markup HTML5. I wonder if you are not mixing things up a bit. You don't need HTML5 in order to make you site responsive, you can do that just fine already the way it is now. I think Helga already started an approach with https://github.com/helgatheviking/Thematic-Adaptive. Also, the use of HTML5 shiv/shim is only necessary if you want to support older versions, other people have made other decisions. I also think it would be a bad idea to bundle modernizr with thematic as each project would be better off to make their own custom build.

    An argument could be made for switching to normalize.css instead of today's reset, but in general I think a lot of people are more comfortable with adding css to their child themes. Not so much with changing markup with php, and that is where this plugin could come in handy.

    I think you are both right and wrong in calling thematic outdated. It has been quite some time since the last release and a lot has happened since then, especially regarding wordpress and it's theme requirements. The code is in need of a refreshment, and the last couple of weeks have shown a great deal of progress at googlecode in that respect. But not using HTML5 right now is not making it completely outdated per se - not just yet.

    Like I said, it is a moving target and specs are still changing. Heck, for a short while last year we didn't even have the time element! A lot of things and best practices are still being figured out (in projects such as the boilerplate), and for a theme framework like thematic it's impossible to keep up with the latest and the greatest when it is not clear exactly what the latest and greatest is. Now don't get me wrong - HTML5 *is* the future - but the future is still a bit muddy, and I understand why some would prefer to wait until the smoke settles a bit and use the pieces that have stood the test of time.

    But I think it would be foolish to just sit and wait until the spec is finished since that will be a looong way off. Much better to use what we can today and be part of the development of the future. My idea with the plugin would be to enable us that like to follow along with the bleeding edge to do so, while still having a framework we are familiar with. And also facilitate a discussion of how and where to use these new elements in the thematic context. Like what should be an aside and what should be a section, that sort of thing. A beginning might be taking a sneaky peek at twentyeleven.

    The additions of scripts and styles would still be up to the child theme. Just a bit less of filtering to think about.

    Posted 2 years ago #
  11. both very good points. thematic will eventually need to go html5 to stay 'competitive'. it doesn't have to go html5 to become responsive. i'm not really sure where i fall on the idea of plugin versus fork.

    thematic actually is mirrored at github, but the problem w/ git is you can only have 1 contributor on a free account.

    Posted 2 years ago #
  12. middlesister
    Member

    There is already a kind of fork on github: https://github.com/sams/Thematic-html5boilerplate
    I haven't had the chance to look into it but it seems very ambitious to me, incorporating custom header and background, OOCSS. It is not merely a "simple" boilerplate port, more like a custom framework based on Thematic.

    I think Bitbucket supports git too, their free plan includes 5 users.

    I started sketching a plugin to show what I mean, will just have to fix a github account first and I'll put it up.

    Posted 2 years ago #
  13. middlesister
    Member

    There we go, a rough start: https://github.com/middlesister/thematic-html5

    I'll start a new thread for discussing it.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.