Creating a responsive skin can seem like a large task to take on when you think about the fact that there are several views to create using the same content. Now, I typically have not been a big fan of using HTML grid systems as I have felt I am able to write a much more lean skin on my own. However, with the new requirements of having flexible skins for multiple devices, I have felt that it is better to use a tool that helps me to be able to achieve great skins with only a bit of overhead.
Bootstrap is a grid system that is technically a 960 grid with views for devices with smaller screens such as tablets and mobile phones as well as a view for larger screens. Bootstrap allows for true responsive (fluid) layout as well as adaptive (what I call step-down) layouts. I tend to like to use the adaptive layout as I feel it still gives me a bit of control on my layout for each targeted screen size.
Why did I choose Bootstrap?
Implementing Bootstrap into DotNetNuke
Before we can actually begin skinning our design, we must build our Bootstrap package. The Bootstrap website has a great tool for customizing your Bootstrap package for whatever configuration you have. As I mentioned previously, there are quite a few components in Bootstrap and including the whole mess can really provide some overhead that you just don’t really need. You can go through the Customize page and un-check all of the components that you feel you will not be using. Also, on this Customize page, are quite a few variables that can be adjusted to fit your project. For example, column and gutter widths for each step in screen size and colors for the components that you included in your package.
Once you have customized your package, click the download button at the bottom (it’s ridiculously large and blue). This zip file will include 3 folders for CSS, JS and images.
I typically create a “js” folder within my skin folder and extract the zip file in there so that the path is (relative to root) /Portals/[PORTALID]/Skins/[SKINNAME]/js/bootstrap/(js/css/img), where [PORTALID] is either _default or your portal name and [SKINNAME] is the name of your skin folder.
References and Dependencies in the Skin
Now that we have our Bootstrap in place, we can start getting into the actual skin. Create a new skin file (ex. Default-Layout.ascx) and insert the required declarations for your skin and skin objects.
Below are the common ones that I use:
<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.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="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="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="JQUERY" Src="~/Admin/Skins/jQuery.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<dnn:DnnJsInclude ID="bootstrapInclude" runat="server" FilePath="js/bootstrap/js/bootstrap.min.js" PathNameAlias="SkinPath" />
<%@ Register TagPrefix="fortyfingers" TagName="StyleHelper" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>
<fortyfingers:StyleHelper ID="bootstrapInclude" Doctype="HTML 5" runat="server" AddJsFile="js/bootstrap/js/bootstrap.min.js" />
See what I did there? Using the 40Fingers skin object, I was able to set the Doctype to HTML5, a requirement for Bootstrap, right there in the skin object for the Bootstrap include.
<dnn:DnnCssInclude ID="bootstrapCSS" runat="server" FilePath="js/bootstrap/css/bootstrap.min.css" PathNameAlias="SkinPath" Priority="14" />
<fortyfingers:StyleHelper ID="bootstrapCssInclude" runat="server" AddCssFile="js/bootstrap/css/bootstrap.min.css" />
The next step is to add some META information the the head of our HTML document. Being a skin, we do not have direct access to the head of the document as everything that we create in our skin is within the body of the document. Here again, we have the option to use 40Fingers or some DNN core secret skin object, dnn:META, to insert the code. In order for the browser to adjust to our various screen sizes, we need to set the zoom level of the browser to 1.
Below is the DNN META tag that needs to be insert to the head:
<dnn:META runat="server" Name="viewport" Content="width=device-width,initial-scale=1" />
<fortyfingers:StyleHelper ID="META" AddMetaTags="viewport:width=device-width, initial-scale=1.0" runat="server" />