Now that I work at Microsoft, I’m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it’s pretty barebones. Since I’m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag.
Today, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create “Item Templates” in Visual Stuido.
The gist of it is that you can take any page that you create and turn it into a re-usable template via the “File->Export Template…” wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template.
Adding a Page Template
So here’s the basic HTML5 template I wanted to include:
[code language=”html”]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!– !CSS –>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!– !Modernizr – All other JS at bottom
<script src="js/modernizr-1.5.min.js"></script> –>
<!– Grab Microsoft’s or Google’s CDN’d jQuery. fall back to local if necessary –>
<!– <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> –>
<!– <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> –>
<script> !window.jQuery && document.write(‘<script src="js/jquery-1.4.2.min.js"><\/script>’)</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
[/code]
After I created and saved this page, I went to “File->Export Template…” and followed these steps:
Now, when I select “File->New File…” to add a new item, my template is available:
Adding a Web Site Template
Creating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn’t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:
- My HTML5 basic page template
- jQuery
- Modernizr
- HTML5 Reset CSS file
- An empty CSS file called style.css
- A consistent folder structure for all of these
The first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:
So now when I select “File=>New Web Site” I see my new template:
and when I choose that, here’s what gets loaded for my new site:
Download the Templates
Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. Check it out here.
This is a huge time-saver for me and I want to share this. I’ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:
Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder
Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder
Why do you have a closing html tag, but no opening one. Why do you sometimes explicitly close meta-tags and sometimes not. Two years ago we called this bad coding style, now we simply have to call it HTML5 :-). But you know, that the W3C Validator already validates polyglott HTML5, if you put a xmlns-attribute at your missing html-element.
@Alex: Actually those are called “typos” and have nothing to do with HTML5 or the fact that it’s much more lenient in terms of validation than XHTML. Thanks for catching that. I need to fix that in my downloads.
@Alex: Added per your suggestion.
I am curious as to why you would use the section “!– Grab Microsoft’s or Google’s CDN’d jQuery. fall back to local if necessary –“? Why try and grab it from someone else’s site when you have no control over what is there or weather or not it will be available? I see so many people doing this with JS files now. If their servers are down or busy your site just gets slower because it now has to wait for their site to timeout on the request before if fails over to your local copy.
@Stanley: The reason is because using a CDN version increases the odds that the version will have been cached prior to a user visiting your site and minimizes HTTP requests. It’s considered best practice based on the findings by Steve Souders while at Yahoo! and now at Google.
What’s the purpose/benefit of including xmlns=”http://www.w3.org/1999/xhtml” in the html tag for an html5 document?
Wondering if I’m missing something or if it’s just a holdover from a Ctrl+C/Ctrl+V operation…
From what I’ve read and from the recommendation of Stanley (in the above comments), it helps the page validate. Remy Sharp also mentioned that it helped resolve a problem with Firefox 2 but that’s a lesser issue:
http://remysharp.com/2009/04/14/html5-and-firefox2/
Guess I ought to read the previous comments more closely… Still strikes me as odd, though.
Yeah I’m not 100% convinced either. I need to run it by Bruce, Remy or Robert Nyman. Just haven’t gotten around to it today.
I would imagine Mr. Boilerplate (http://html5boilerplate.com) would have an opinion as well?
HTML 5 has been the only exciting thing to look forward to for the past 2 years! Now that its here the push is on to make sure everybody upgrades their browser so they can take full advantage. Google, FF, IE, Safari – fix all your damn bugs and lets let pages look the same in all 3 browsers. Follow the standards PLEASE!
Too bad HTML5 isn’t a standard yet.
Follow the “standards” and implement a non-standard language? HTML 5 is a draft. Keep in mind, if it weren’t for browsers innovating (that is, *not* following the so-called standards), we might as well be stuck in 1999, because that is the last time any new HTML “standards”, which are actually recommendations, came from the W3C.
Hey Lee. Honestly, I’m not sure what your rant is about. I looked at the blog post and still didn’t get the context of your comment.
Rey, it was not meant to be a rant. I replied to a comment. Michael Fever ended his comment with “Follow the standards PLEASE!”, as if that would automagically make the world a better place. I felt obligated to point out that not following the so-called standards has done much good for the world of the Web and Web dev, and that not including HTML5 in current browsers *is* following the “standards”. I appreciate your honesty and your blog.
@Lee: Ah ok. Thank you for coming back and clarifying it. Every so often I just get people blurting out comments which leave me scratching my head & I unfortunately though that was the case.
I’m glad people are concerned about standards-based features and I’m hoping eventually we’ll all have solid browsers that make development easier. It’s coming but it’s going to take a bit. Thanks for commenting.
Good stuff, although I will probably use the html5boilerplate for my actual VS2010 templates. :o)
Question, since you’re a Microsoftie now – next time you talk with any VS2010 people, ask them when HTML5 is going to start validating in VS2010, or is there a way to get it to do so now? Right now when using the plain HTML5 it complains about every element, like this:
Validation (): Element ‘html’ is not supported.
Annoying!
BTW, on my install of VS2010 Ultimate the only way I could get the project templates to show up is to copy them to a 1033 folder under each language, and even doing that I still can’t get the item templates to work.
this is great! i just started using vs 2010 and currently working on mvc 2 for a bulk SMS portal looking at how i can practise the project template
Hello really enjoy your explanation about project template
i will try that and get back to you.
Thanks for the great tip! Awesome time saver to have everything included in the new site template.
Hi Ray Bango, Excellent knowledge sharing. Thanks!
After a long time i want to start again with programming and add html websites too (learned it in vs2003).
I found out there is an option to add a html-website to youre project.
I dont understand what this templates will do. can you explain this in more simple words?
second question: where can i find this folders? searched my computer and looked in vs2010.
– HTML5 Page Template –> Drop this into “Visual Studio 2010 > Templates > ItemTemplates†folder
– HTML5 Web Site Template –> Drop this into “Visual Studio 2010 > Templates > ProjectTemplates†folder
thanks in advanced.
(could you also sent a copy to my email?)
Bouke, user defined templates are installed in you documents folder. IE: ..My Documents\Visual Studio 2010\Templates
Hope this helps…
templates location:
it’s here “\My Documents\Visual Studio 2010\Templates\ItemTemplates”
Rey Bango
Hi Rey Bango i need the
HTML 4 website template how to do that from your code
Looks promising but I don’t use Visual Studio. I use Quanta Plus under Linux. Do you foresee any problems with using it instead?
@Jon: Not at all. The pages included are just HTML, CSS & JavaScript. You should be able to take the pages and use them as needed. In terms of having them integrate into Quanta, I couldn’t tell you if that would work since I’ve not used it.
Hey everyone, I’ve updated the Visual Studio HTML5 templates to support jQuery 1.5.1 & Modernizr 1.7. Be sure to get them here:
Link: My Visual Studio 2010 HTML5 Templates are Updated for jQuery 1.5.1 and Modernizr 1.7
Hi Rey,
Cool article. I’m about to make the jump from ASP.NET Web Forms to MVC. Any advice on the best approach to take?
Glad you liked it. Don’t really have great advice to give you going from Web Forms to MVC since ASP.NET isn’t my forte but I would recommend Scott Hanselman’s and John Galloway’s blogs as a must read for that type of content.
Hi
I’ve placed it under My docs\vs2010\templates\visual C#\, still it doesnt appear under C# projects. anything else needs to be done..?
Regards
jinishans
Are you going to File->New Website…?
I don’t understand from where you started. You said you were using VS2010 as your editor, so when you say you “created and saved this page”, did you start with a new website and add an HTML Page and delete the default aspx page? If not, where did you save the html form, under Item Templates? Can you provide more information about how you started this in VS2010? Thanks.
Hey Fred,
Yes I created a new website and a new web page. I based the code inside of the new web page on an HTML5 boilerplate and just saved the page as a normal HTML page. No aspx page was involved.
This is the MSDN page I used to create my templates: http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx
If you edit inside mytemlpate.vstemplate (in the zip) line from c# to VisualBasic
And in ProjectName.webproj remove the first lien with C# ….
It can become a VB web project template
Thanks!!!!!!!!11
Great stuff! What if I want to update one item from my project template, for example the jquery or modenizr to get the latest version, how will I do that? Do I need to delete the template? How will I do that?