If you are developing in HTML5 or if you have researched the subject you have probably come across the HTML5 Boilerplate template. This is a robust HTML/CSS/JS file base for developing websites in HTML5 and was created by Paul Irish, Divya Manian and others - thanks guys for sharing your efforts. Please visit
www.html5boilerplate.com to find out more about the project.
Looking at the boilerplate file set I thought it would be worthwhile to rework the code so it can be applied in the DotNetNuke skinning process. As a result I came up with the file set that that I now use as standard as a starting point for all of my skins,
click here to download all in a zip format.
The package includes:
1. Optimised Default.aspx file
2. Modernizr java script file
3. Skin ascx file
4. Skin css file
5 Skin doctype file
The idea behind it is that the files include all the necessary code to make your skinning job easier and faster, making sure that your skin will display correctly across different browsers and enables you to target those browsers via CSS.
It is not a finished skin, just a collection of code that you can pick up or delete as required.
As I said before this is a rework of the code published by HTML5 boilerplate crew and all the credit for the hard work should go to them.
Do let me know your thoughts and suggestions; I am planning on updating the files if there are any changes in the future.
Lets start with Default.aspx file, please note that I am using file from DNN 5.06.01.
This file is located in the root of the site and here is the code
<%@ Page Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.Framework.DefaultPage" CodeFile="Default.aspx.vb" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Common.Controls" Assembly="DotNetNuke" %>
<%@ Register TagPrefix="dnnui" Namespace="DotNetNuke.Web.UI.WebControls" Assembly="DotNetNuke.Web" %>
<asp:literal id="skinDocType" runat="server"></asp:literal>
<html<%= HtmlAttributeList %> class="no-js">
<head id="Head" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta id="MetaRefresh" runat="Server" http-equiv="Refresh" name="Refresh" />
<meta id="MetaDescription" runat="Server" name="DESCRIPTION" />
<meta id="MetaKeywords" runat="Server" name="KEYWORDS" />
<meta id="MetaCopyright" runat="Server" name="COPYRIGHT" />
<meta id="MetaGenerator" runat="Server" name="GENERATOR" />
<meta id="MetaAuthor" runat="Server" name="AUTHOR" />
<meta id="MetaRobots" runat="server" name="ROBOTS" />
<style type="text/css" id="StylePlaceholder" runat="server"></style>
<script type="text/javascript" src="/js/libs/modernizr-1.6.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<asp:placeholder id="CSS" runat="server" />
<asp:placeholder id="SCRIPTS" runat="server" />
</head>
<body id="Body" runat="server" >
<dnn:Form id="Form" runat="server" ENCTYPE="multipart/form-data" >
<asp:Label ID="SkinError" runat="server" CssClass="NormalRed" Visible="False"></asp:Label>
<asp:PlaceHolder ID="SkinPlaceHolder" runat="server" />
<input id="ScrollTop" runat="server" name="ScrollTop" type="hidden" />
<input id="__dnnVariable" runat="server" name="__dnnVariable" type="hidden" />
<dnnui:DnnWindowManager ID="DnnWindowManager" runat="server" Visible="False">
</dnnui:DnnWindowManager>
</dnn:Form>
</body>
</html>
What has changed?
- Added class="no-js" to main html tag, this works in connection with modernizr script (below)
- Added the modernizer script link, which allows targeting of browsers without java script
For example:
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-js .multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
It also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer. To find out more please visit
www.modernizr.com - Added meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1", this forces the use of the latest IE rendering engine
- Added meta name="viewport" content="width=device-width, initial-scale=1.0", this is to set the correct size for display on mobile devices
- Removed RESOURCE-TYPE, DISTRIBUTION, REVISIT-AFTER, RATING and PAGE-ENTER meta tags as I do not feel they add any value.
There are couple of points you need to remember when changing code in Default.aspx file, if you upgrade DNN this will get over written and you will have to upload the file again and the changes (in Default.aspx) will have an effect on all portals within the DNN installation. The code above is not doctype specific so the changes should not affect any other skins you may be using.
For modenizr to work you will need to upload the javascript file included in the package to the relevant folder.
Moving onto the skin files First is the skin.doctype.xml, the sole purpose of this file is to set the doctype for the page to HTML5.
The code is very simple
<SkinDocType>
<![CDATA[<!DOCTYPE html>]]>
</SkinDocType>
Following is the
skin.ascx file which includes:
- most of the available DNN skin objects, just delete the registration and controls for the ones that are not required in your skin.
- The conditional #Body tag enabling targeting of different browsers in CSS without having to result to hacks which will stop CSS validation.
For example
#RightPane {
width:100px;
/* properties used in all browsers */
}
.ie6 #RightPane {
width:110px;
/* properties used in ie6 */
}
- and finally the HTML5 tags, please note that you can not use section with runat="server", for that you need to use divs, for example
<section>
<div id="ContentPane" class="ContentPane" runat="server">
</div><!-- eof ContentPane -->
</section>
Here is the
skin.ascx code:
<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<%@ Register TagPrefix="dnn" TagName="HOSTNAME" Src="~/Admin/Skins/hostname.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/currentdate.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SIGNIN" Src="~/Admin/Skins/signin.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TREEVIEW" Src="~/Admin/Skins/treeview.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BANNER" Src="~/Admin/Skins/banner.ascx" %>
<div id="ControlPanel" runat="server" /></div>
<!-- #Body enabling browser targeting using css .ie6 , .ie7 etc - no need for additional css files for different browsers, and used to fix the editors
background colour issue -->
<!--[if lt IE 7 ]> <div id="Body" class="ie6"> <![endif]-->
<!--[if IE 7 ]><div id="Body" class="ie7"><![endif]-->
<!--[if IE 8 ]><div id="Body" class="ie8"><![endif]-->
<!--[if IE 9 ]><div id="Body" class="ie9"><![endif]-->
<!--[if gt IE 9]><div id="Body"> <![endif]-->
<!--[if !IE]><!--> <div id="Body"> <!--<![endif]-->
<header id="HeaderGroup">
<dnn:LOGO runat="server" id="dnnLOGO" />
<dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="False" showLinks="True" />
<dnn:SEARCH runat="server" id="dnnSEARCH" CssClass="ServerSkinWidget" UseDropDownList="True" submit="Search" />
<dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE" />
<dnn:BANNER runat="server" id="dnnBANNER" />
</header>
<nav>
<!-- Any navigation control -->
<dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="False"
ControlOrientation="Horizontal" CSSNodeRoot="main_dnnmenu_rootitem" CSSNodeHoverRoot="main_dnnmenu_rootitem_hover"
CSSNodeSelectedRoot="main_dnnmenu_rootitem_selected" CSSBreadCrumbRoot="main_dnnmenu_rootitem_selected" CSSContainerSub="main_dnnmenu_submenu"
CSSNodeHoverSub="main_dnnmenu_itemhover" CSSNodeSelectedSub="main_dnnmenu_itemselected" CSSContainerRoot="main_dnnmenu_container"
CSSControl="main_dnnmenu_bar" CSSBreak="main_dnnmenu_break" />
<dnn:TREEVIEW runat="server" id="dnnTREEVIEW" />
</nav>
<section id="BreadcrumbGroup">
<dnn:TEXT runat="server" id="dnnTEXT" CssClass="breadcrumb_text" Text="You are here >" ResourceKey="Breadcrumb" /> <span>
<dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" CssClass="Breadcrumb" RootLevel="0" Separator=" > " /></span>
</section>
<section id="LoginGroup">
<dnn:USER runat="server" id="dnnUSER" CssClass="user" />
<dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="user" />
<dnn:SIGNIN runat="server" id="dnnSIGNIN" />
</section>
<section>
<div id="ContentPane" class="ContentPane" runat="server">
</div><!-- eof ContentPane -->
</section>
<section>
<div id="RightPane" class="RightPane" runat="server" visible="false">
<div><!-- eof RightPane -->
</section>
<section id="LinkGroup">
<dnn:LINKS runat="server" id="dnnLINKS" CssClass="links" Level="Root" Separator=" | " />
</section>
<footer id="FooterGroup">
<dnn:PRIVACY runat="server" id="dnnPRIVACY" CssClass="footer" />
<dnn:TERMS runat="server" id="dnnTERMS" CssClass="footer" />
<dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="footer" />
<dnn:HOSTNAME runat="server" id="dnnHOSTNAME" CssClass="footer" />
</footer>
</div><!-- eof #Body -->
Moving to skin.css file this is a copy of the styles created by html5 bolierplate crew and others. It includes reset and base styles, I did not feel that it required any changes specific for DotNetNuke implementation.
/*
HTML5 ✰ Boilerplate
style.css contains a reset, font normalization and some base styles.
credit is left where credit is due.
much inspiration was taken from these projects:
yui.yahooapis.com/2.8.1/build/base/base.css
camendesign.com/design/
praegnanz.de/weblog/htmlcssjs-kickstart
*/
/*
html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */
/* fonts.css from the YUI Library: developer.yahoo.com/yui/
Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages
There are three custom edits:
* remove arial, helvetica from explicit font stack
* we normalize monospace styles ourselves
* table font-size is reset in the HTML5 reset above so there is no need to repeat
*/
body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }
/* normalize monospace sizing
* en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
*/
pre, code, kbd, samp { font-family: monospace, sans-serif; }
/*
* minimal base styles
*/
body, select, input, textarea {
/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
color: #444;
/* set your base font here, to apply evenly */
/* font-family: Georgia, serif; */
}
/* Headers (h1,h2,etc) have no default font-size or margin,
you'll want to define those yourself. */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
/* always force a scrollbar in non-IE */
html { overflow-y: scroll; }
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }
ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {
padding: 15px;
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
/* align checkboxes, radios, text inputs with their label
by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
/* webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }
/* colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px;
-moz-box-shadow: 0px 0px 5px red;
-webkit-box-shadow: 0px 0px 5px red;
box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
/* make buttons play nice in IE:
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button { width: auto; overflow: visible; }
/* bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
/*
* Non-semantic helper classes
*/
/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
/* Hide for both screenreaders and browsers
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
content: "\0020"; display: block; height: 0; visibility: hidden;
}
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
/* Primary Styles
Author:
*/
/*
* Media queries for responsive design
* These follow after primary styles so they will successfully override.
*/
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}
/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)
Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
j.mp/textsizeadjust
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; } /* Don't show links for images */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
For full explanation of css and other code changes please see
www.html5boilerplate.com Final tip: You should add favicon.ico and apple-touch-icon.png into your "Portals/(portal id)" folder to show fav icon in browsers and mobile devices, make sure you delete the favicon in the root of the site.
Hope you will find something interesting in this post and I appreciate your comments and suggestions.