How to Create a Responsive HTML5 Skin for DotNetNuke

• Subscribe to the magazine

By Andy Stephenson

October 2012

In this tutorial we walk you through step by step how to create a responsive HTML5 skin for DotNetNuke 6.x

This is an intermediate level tutorial and you will be required to have some skinning experience working with skin ascx files directly.

A responsive skin will adapt itself to any screen resolution, this means we only have to create one skin to cater for all the different devices and screen sizes being used to access our dotnetnuke site.

This tutorial will give you an excellent template to begin creating your own HTML5 responsive skins.

Now is the time to learn how to use the new HTML5 tags within your skin designs. Unfortunately some older browsers are not equipped to handle most of these new HTML5 elements.

To create HTML5 layouts that will work in all browsers requires a lot of work but fortunately there is a fully featured HTML5 framework available called the HTML5 Boilerplate. The HTML 5 boilerplate isn't just to help us safely use the new HTML5 elements, it will also provide us with a safety net when we'd like to take advantage of other modern web technologies such as CSS3.

Html5 Boilerplate comes prepacked with the modernizr script, this script is a clever piece of javascript code that will basically ask each browser that visits your site, which css3 features the browser can interpret. The script then compiles a list of these css3 features and will add them as css classes to the main HTML element. This will allow us to use any css3 features within our css file but we will be safe in the knowledge that they will only be used by browsers that can actually interpret them.

Video Contents:

Video 1 - Introduction and Initial File Setup

• Introduction
• Creating a custom build of HTML5 Boilerplate
• Creating the skin folder
• Adapting file names and locations for DotNetNuke

Video 2 - Setting the Doctype and the Conditional HTML CSS Classes

• Setting the skin doctype for HTML 5
• Adding the DotNetNuke skin directives
• Understanding the conditional HTML element
• Intoduction to the 40Fingers style helper skin token
• How to register the skin token
• How to create the conditional HTML element css classes
• About the Modernizr script and the no-js / js css class

Video 3 - Meta Tags Removing Unnecessary Tags and Creating Content Panes

• Description of the necessary meta tags
• How to add scripts and CSS files to the page head using the style helper skin token
• How to add the X UA Compatible meta tag to the very top of the document using the doctype file
• Instructing dotnetnuke where to find our scripts using the skinpath token
• About the IE6 Conditional alert
• Adding the content panes to the skin

Video 4 - Adding a Simple DDR Menu Template

• How to add a simple menu to our skin
• How to edit the menu CSS to allow more than three menu items
• Detailed walkthrough of the responsive features of our skin.css file
• About media queries
• How to change font-size based on the width of the browser viewport

Video 5 - How to Create HTML5 Containers

• Creating a basic HTML5 container
• How to reset the DotNetNuke default set font sizes
• Setting default DNN styles to use variable font sizes
• Splitting our HTML5 elements into three different containers
• Creating our header, section and footer containers