HTML5 Boilerplate, Conditional Comments, and things to come

HTML5 Boilerplate, Conditional Comments, and things to come

The boiler room

If you haven’t at least heard of the HTML5 Boilerplate template, then you live in a dark cave as a hermit and are still using Photoshop 3. If you have, but haven’t checked it out, then you 100% need to. I downloaded the files (it comes with a few) and looked through it. Thank the gods it is commented so well, because there are a few things that I didn’t know going on.

It is an HTML 5 starting template loaded to the teeth with everything you could need…and then some. Just some of the things in it are: script tags to jQuery 1.4.2 (hosted on Google), Modernizer 1.5 js (see comment below by Paul Irish clearing things up for me on this), Google analytics code, Meyer’s reset CSS, conditional comments…this thing is PACKED with awesome.


Personally I’m going to remove some things, because I don’t need them, which is perfectly fine because this file is delete friendly. What I am going to add is CSS PIE. But that is the brilliance of it. It’s a great starting point, and you can do what you want with it. So go download it!

Conditional Commenting Genius

Forget about using conditional stylesheets now. Use this:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if gt IE 9]>  <body>             <![endif]-->
<!--[if !IE]><!--> <body>         <!--<![endif]-->

This is great, because now you don’t need the extra CSS files for IE problems, and you don’t need to use hacks. For example, let’s say you have margin or something that is going bad in IE6. If the browser detected is IE6, then it puts the class “ie6″ onto the body. You would then write the CSS like this:

#myContainer {
margin: 20px 20px 0 10px;
}
.ie6 #myContainer {
margin: 20px 10px 0 5px;
}

Easy? YES. And awesome. Not much else to say about it other than start using this instead of whatever else you were doing, because this was better.

Things to come at The Web Machine

Well, as you may know from previous posts, I’m starting to learn how to theme Magento, which will come in handy, because I will be selling HTML/WordPress templates. Unique, not templates. Meaning only 1 of each will be sold. If you buy it, no one else will have it. Along with that I plan on writing more on Magento, maybe my own tutorial on how to theme it, or whatever strikes my fancy. Plus I am starting to FINALLY learn PHP, so I plan on throwing some articles on that here as well. More things to write about, so stay tuned folks!

What are you guys learning? Let me know!

Coupon Code: webmachine

Tags: ,

2 Responses to “HTML5 Boilerplate, Conditional Comments, and things to come”

  1. Paul Irish says:

    The entirety of the html5shim is included inside Modernizr which is in there by default. :)

    • jcDesigns says:

      OOOOhhhh….i went to its site, but I took it that it just detected if things were supported, and then you built around that, not that it actually had the shim built in and made them style-able. Thank you for that! Ignore my idiocy then.

Leave a Reply