Sep 21, 2010
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:
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
- 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