DNN Theming Tips and Tricks

Skinning Responsively with Bootstrap - Part 2 (Building your Skin)

By Ralph Williams, Jr. on 6/10/2013

Creating a responsive DNN skin requires some upfront planning. Based on the complexity of your site’s design, this could be just a simple wireframe, or full design comps for mobile, tablet portrait and tablet landscape. As a matter of fact, if you are starting with a fresh design, it would be a good idea to think about designing your site with a mobile first design approach. If this doesn’t sound like fun to your graphic designer, I don’t think starting in Photoshop with mobile is required. I would start the wireframe process with mobile first, then start moving up in device size. This way the important content is thought of at the beginning and the mobile user won’t be treated like a 2nd class citizen.

Once you have your design, it’s time to start skinning!

Scaffolding with Bootstrap

After setting up Bootstrap in your DotNetNuke skin, you are now ready to begin building out the skin itself.

Bootstrap’s site offers some great documentation on how to create your site’s layout with their structure. And, it’s really quite simple. I won’t to into depth for how Bootstrap itself works as they do a good job of explaining that here: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

To create a basic layout with a Header, main content section, aside content section and a footer we can use this simple structure. We will cover implementing the menu in a later post.

<div id="pageWrap" class="container"> <div id="header" class="row"> <div id="login" class="span3 offset9"> <dnn:USER ID="dnnUser" runat="server" /> | <dnn:LOGIN ID="dnnLogin" CssClass="LoginLink" runat="server" /> </div><!-- /login --> </div><!-- /header --> <div id="nav" class="row"> Menu and Logo will go here </div><!-- /nav --> <div id="content" class="row"> <div id="asidePane" class="span4 pull-right" runat="server" /> <div id="contentPane" class="span8" runat="server" /> </div><!-- /content --> <div id="mobileContent" class="row visible-phone"> <div id="mobileContentPane" class="span12" runat="server" /> </div><!-- /mobileContent --> <div id="footer" class="row"> <div id="footerPane" class="span5" runat="server" /> <div id="footerInfo" class="span3 offset4"> <dnn:COPYRIGHT ID="dnnCopyright" runat="server" /><br /> <dnn:TERMS ID="dnnTerms" runat="server" /> | <dnn:PRIVACY ID="dnnPrivacy" runat="server" /> </div><!-- /footerInfo --> </div><!-- /footer --> </div><!-- /pageWrap -->

To walk through what we have done here:

  1. We wrapped the entire page with a class of “container”. This sets a specific width to the site and centers it on the page based on the size of the browser.
  2. Next, for each row, or vertical section, we add a class of “row”
  3. Within each row, we create our horizontal sections. Specify the desired width by using the class of “span#” where “#” is the number of columns you want that section to take up. All of the elements that are within the row should add up to a total width of span12. For example, “span3” + “span4” + span5” = “span12”. Or, “span3” + “span4 offset5” = “span12” where the “offset#” class pushes the last span over by the value of “span5”.
  4. On the content panes, I did a little CSS magic so that when I am on a phone sized device, the Aside Pane will actually be presented above the main Content Pane and floated to the right of the content pane on tablet and desktop. This is because there is often a side menu within the aside pane that you will want to be presented above the main content. Obviously, there are many approaches that you could take here which is why the planning phase for a responsive site is so important. I am just showing a little trick I use for this scenario.
  5. Also, I created a content pane that is viewable to phone sized devices only. This would be useful if you have a section of quick links that you would like to provide to a mobile user only, such as a link to your app in the apps store or quick links for phone number or directions.

That’s really all there is to creating the skin. Also, nothing special really needs to be done to the containers as long as you are not specifying any widths in their CSS.

To see how to add the menu, check out the next post on Skinning the DDR Menu for Bootstrap.