Normally, I’m a big adept of not using templates for presets for pretty much anything I do. But, I must admit, there are tasks that are so trivial, so mundane and so bleedin’ boring that just scream for a template.
The Starter Pack, as I call it, is a bit different than a template. I built it with one guiding principle: scalability. As a result, you can use this to get started on your portfolio page or the next Facebook.
Of course, the coding part is all HTML5, cross-browser, of course, but I’ve also gone and included a basic Photoshop template to get you started on designing the page. Just to lure you in to it, here’s a list of a few major features of the pack:
- Cross browser (IE6 is supported as well)
- Valid HTML5 (that’s right; valid, baby!)
- Tablet/Netbook ready (via CSS media queries)
- jQuery (from the Google CDN)
- Cufón ready @font-face ready (Lobster & Raleway fonts included from FontSquirel )
- Some structural reusable classes
I’ve set up a separate project page (built with this Starter Pack itself) to showcase some of the features in the pack, so just click the link below (or the screenshot of the project page), read a bit about it and if you like it, I’d really appreciate a comment here.
UPDATE
As some of you have pointed out, I was in error by not pushing for @font-face. Thus, version 2.0 of the pack is up and running. Just click the download link and you’ll be up and running! Thanks everyone for the awesome support and huge help in making this a pretty cool little pack.
If you feel I’ve missed something in this pack, or that, perhaps, some areas can be improved, please, speak your mind in the comments area. I promise I won’t ignore you…much (just kidding!).
This is amazing, gotta love the IE6 support and netbook ready feature. Hopefully ‘m gonna experiment soon.
Glad you like it, Arjun! Let us know how your experiments turn out, maybe there’s room for some improvement in the pack
I will let you know, thank you for this sick freebie.
Awesome! I was literally sitting down today planning on making something like this for HTML5 and CSS3 to go with my current HTML skeleton.
So thanks for making one for me!
Ooopsey. I guess I beat you to it
. I hope it will turn out to be useful for you.
A great little pkg you’ve put together here Radu. Looks really sweet. Well done and Thanks
Nice kit, i’ll try it when i’ll have some time. Anyway thanks for sharing….. you’re sick but you know it right?
Nice one Radu. I will have to take a look at this.
p.s. I like the comments in this order (oldest first)
Thanks, Lee. I agree with you, the comments feel much more natural in this order.
Nice! Thanks Radu! This is SICK but you know that already
This looks pretty good. Gonna play with it a little. I will maybe use this for my existing http://html5.mattonik.sk site to make it work even in those still with IE.
Hey, Martin, that’s a very nice site you have there. Good use of HTML5. If you manage to plug some of the Starter Pack into your own site, drop a comment; I’d love to see it in action
Thanks. Hope the updated version will be up tomorrow with use of your Starter Kit.
I am definitely going to check it out, then. And thank you very much for tweeting the Starter Pack 3(!) times. :: bowing down ::
So I looked at that your starter kit and used some parts of it. It is really pretty useful when starting html5 site from ground.
Excellent and superb are the words in my mind now. Congrats¡¡¡
Thank you very much, Pablo! I hope you’ll find it useful
I would like to share the article at Twitter but I currently can’t. But when I’ll be there, you can bet I will do it.
ok, ill give it a try! seems very nice
this is great!
thank you
Great little freebie you got going there. I agree that IE6 support is awesome.
Sick stuff!
Great!! Thank you very much.
Thank you! Love your site design- it’s amazing =)
I was expecting a bit more than this when I downloaded this.
1. You sections should be surrounded by ‘s. The sections are not containers: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
So this is wrong in a semantic markup.
2. Why use your HTML js file when you can use these: http://html5shiv.googlecode.com/svn/trunk/html5.js or the modernizer: http://www.modernizr.com/ Why reinvent the wheel?
3. I am unclear why you would use Cufon when @font-face is way better? http://www.fontsquirrel.com/fontface/generator
I think this is a great start but it is about %20 of the final template you could have released. If you are looking for traffic, great, but this is not complete and lacks.
#fail
Thank you for your comment, mr. HTML5 Guy.
In response to your notes:
1. You are correct and I apologize to everyone for not documenting the section tag in full depth. As a result, I’ve updated the .zip file to include this modification. Thank you for your correction.
2. I don’t think I was reinventing the wheel, just doing my own thing. I see no difference in my approach and the HTML5 shiv, other than more flexibility with my micro-script. Modernizr is an interesting solution but one of my key focuses with this pack was that is has to be lightweight, so a full on script would’ve only been code bloat.
3.
While I appreciate and actually use @font-face on Sickdesigner, another key element of the pack is that it is cross-browser. @font-face, as you must surely know, is not supported in IE. Cufon is. And, of course, for those that feel that @font-face is sufficient, there is always the possibility of removing Cufon from the pack. It’s only a line and a file away.Ian pointed out the error of my ways regarding @font-face. Update is in the works.This pack is not all-encompassing, all-knowing or perfect. Far from it. It is exactly what it says to be: a starter pack; this means that it is not only subject to, but recommended that you fiddle around, play with it, customize it, hang some curtains on it if you please. Many people who have already downloaded it have expressed their intentions of doing just that, which is great and I hope to see many more people looking at this pack as a starting point for creating their own, personalized template.
As for the purpose of this pack, I am sad to say that traffic is not the reason for it. Traffic does not make me all giddy and as joyful as a 5 year old. Providing my fellow web designers with a resource that they deem to be useful does. Whether it is a #fail, as you so poignantly put it, is of no consequence to me, for if I have managed to help a single person, then I am satisfied and my work will have not been in vain.
Thanks for taking the time and effort to put this starter pack together. It’s definitely not a FAIL. Since I’m just learning how HTML5, I leaned a lot from your work. Your good information will certainly deserves Traffic.
Now I’m looking forward to reading what the real expert has to say—HTML5 Guy’s post of the missing 80%. But, oh no! There’s no link back to his site. I guess he’s working on it right now.
While I appreciate your defense, there’s no need to get all aggressive. HTML5 Guy spoke his mind, which I applaud and respect, especially since he believes in room for improvement for the pack. I’m sure he had his reasons for not including his full name/website. Thank you very much for your comment!
thanks for sharing that starterpack..i find it rather useful and freshly compiled…
and just felt like thanking you!
cheers from berlin, germany. snapone
Thank you very much snapone! I’m happy you find it useful. Greetings from Cluj-Napoca, Romania, Radu.
I’m fully behind anything that supports the use of HTML5, so great stuff.
One thing though, you mentioned in one of your replies to comments that @font-face doesn’t work in Internet Explorer. This is not true. I have written adventures with @font-face which includes a test page: IM FELL English which works fine, even in IE6.
By golly, you’re right. I completely forgot about .eot fonts. Which, mind you, are in plans for a W3C recommendation. A mea culpa is in order, to everyone, and HTML5 Guy in particular. Alrighty then, an update to the pack is in order, I see. I’ll get right on it!
You are awesome. I just download it and check. Like it so much. I can refer it to anyone. Thanks a lot.
Thank you Sharif, you’re far too kind. No, really.
You’re right Ian I have sites working in IE6-8 using the @font-face rule as well. The packages that are available for @font-face really have come a long way in the last little while.
Cufon is great but complicated for many, the more we use @font-face the more pressure we put on the big guys to get it widely supported.
I’ve not tried Cufon, sIFR nor Typekit yet myself, but I do think that we should push what the browser already supports (especially if IE6 supports it!). Major issue is the fonts that you’re allowed to use, but of course that’s increasing all the time.
nice one. nice site too!
Let me know when you put the updated pack out please
Updated pack is now online.
Coolness… I think without this I wouldn’t have tried as hard to get on the HTML5 train. Yay! I can finally keep up with the pack!
Considering you run the marathon (awesome, btw) I think you can keep up with most of us
Your planned revisions notwithstanding, this is nice work. I look forward to the update.
The update is online
Feel free to have a go.
This looks very useful and timely, I’m going to try it on a project soon.
Thanks bro!
Do let us know how it works out; if you encounter any problems with the pack or, on the contrary, if the pack helped you in an unexpected way. Thanks!
Hey, thanks a lot for this. I was looking forward to give HTML5 a try. Great stuff!
I really do hope my starter pack gets more people to move to HTML5. It’s not only cool, it’s the future
Awesome little pack you’ve put together, Nice work
I had started my own little framework, but it’s ditched now
This is great.
Thanks for sharing!
That’s too bad, Andrew. Maybe you could get use some of the features in the pack to add to your project. How cool would it be if you’d come up with an HTML5 framework! I say don’t give up, it might prove to be really cool.
Ah, this is So cool! What a great idea and this is extremely helpful. Thanks a ton. I always enjoy your blog too!
Thank you, Hillary. I hope the pack will prove itself useful in a real world production environment.
Thanks for doing this. I’m glad you add @font-face.
But why oh why are we still coddling people who can’t seem to upgrade a broken, many-years-old browser that is the pain in all of our sides? When we stop doing that maybe we can rid the world of it after all they see if blank screens on every website…
I agree, Chris. On the other hand, it is our duty to provide the best experience possible to users of all types. Even those that are using rust buckets for software. These being said, F* IE6!
Thanks for the excellent leg-up on the mundane, especially with the html5 twist.
As to ie6, I had to laugh at your F*IE6 comment. I took this sentiment to a robotic caricature here: http://flic.kr/p/7hRXUP
Thanks again for your share.
Hi Michael, thanks for your comment. That is one sweet tee you shared there. Speaking of tees, I can hardly wait for my F* IE6 tee to arrive in the mail – http://www.fuckie6.ca/
Amazing! I’m downloading it and I will let you know how awesome it is
Thanks, bro!
excellent job. I was curious as to why you used the HTML 5 elements set has inline instead of block? Not a bug report or anything was just curious.
A note about Internet Explorer six. On my site 90% of the people who hit me with IE 6 are spammers. I don’t worry about IE 6 at all
Well done and don’t forget the new Google font links
Thanks Brad, I’m glad you asked that about some of the HTML5 tags being inline.
You’ll notice I only inlined a few elements:
mark: defines marked text | and usually text is inline (think about spans or ems etc.)
rp, rt & ruby: ruby annotations & related, so, again, plain text
summary: defines the header of a detail element, so, again, it’s only plain text
time: defines a date/time. You guessed it: plain text
Of course, I’ve only set the default behavior and it’s not set in stone or anything. I figure it’s the most natural behavior for these elements’ semantic purpose.
That is a very interesting fact about IE6. I haven’t checked Sickdesigner for figures related to IE6 but I imagine they are in the very low numbers.
unfortunately in my CSS editor I did not see the block element at the end of the first line of elements. So I must apologize. But I do now understand why you made the ones you did into in-line.
I run every IP that hits my websites through stopforumspam. It’s very rare that someone hits my site using IE 6 and isn’t a spammer
Awesome stuff Radu, thx fo sharing it!
Gonna try it out
Hey buddy, how come you provide an html5 pack and your page looks broken in chromium? dunno how good the pack supposed to be if you cant get you page rendered well…
Thanks for pointing that out. There are a few other configuration on which the site is not exactly perfect, but I’ll get to those as soon as I can. If you could use the contact link in the footer and send me a detailed description of your configuration (OS/Browser/Js-on or off etc.) I’ll get this problem fixed. Thanks, again!
Nice starter pack Radu! Looks great! The only thing I found to further the pack along is the javascript files don’t need the
type in it. Great work!
Hi, Corey. Yeah, I somewhat agree that the comments in the .js files are not needed, but I believe they can provide useful hints, especially for beginners trying to figure out the pack.
I think you misinterpreted what I was getting at. Perhaps I’m mistaken though, but, when I have been testing out HTML5 when you include a javascript file all you need is
Talking about comments though what I’ve been doing lately is keeping the js file i’m working on with comments locally and in production using minified files.
hey, awesome pack
just one tip about the template here in this page, on you style.css line 1000 you should make children items background transparent… in my FF3 it’s cliping the root comments’ box shadow
ol.commentlist li.byuser div.comment-body {
background:transparent
Good catch Andre! My monitors definitely need some recalibrating. All fixed now, thanks!
(Speechless)
(and Happy!)
thnks for the pack… but I am just a beginnerin web designing….I think it would be very nice if I start learning with html 5. Plz guide me if I am wrong. thnks
.
.
take care
I wouldn’t recommend starting to learn HTML with 5. We’re still a long way from the final version and it’s best you familiarize yourself with the standards of today. Learning HTML4 will give you the tools to easily transition into 5.
Thanks for the starter pack, i just started learning HTML 5.
Hi Radu Chelariu,
Thank’s for your share work design HTML5 !!
Just a question : Why should it be placed before any other javascript code ?
example “good”
example “bad”
Thank your answer …
squirrel
Right, so you mean the HTML5.js file. It should be loaded as soon as possible in the page hierarchy to ensure that the new elements are already patched into the page by the time the browser gets to read the HTML code. Consider this scenario: if the HTML5.js would be loaded after jQuery, which I’ve linked to the Google CDN but, for various reasons, the jQuery library takes a long time to load. By the time the browser finishes loading the jQuery library and moving on to the HTML5.js file, the DOM tree would’ve been mostly read. And the browser wouldn’t have a clue what < wrap > or < entry > are.
Hope that answers your question.
Yes, this answer very good for me, thank and good day
squirrel
Mult prea tare pack-ul Radu multam fain treaba foarte buna si pe langa asta arata si foarte bine nice job
Ma bucur ca iti foloseste! De aratat asa si-asa, mai important e sa fie folositor. Oricum cred ca in curand va fi cazul unui update.