1. How to Build a Basic DotNetNuke Skin with Twitter Bootstrap 3
  1. 14m 48s
    Nov 01, 2013

In this tutorial we walk through step by step how to create a responsive skin for DNN using the new Twitter Bootstrap framework version 3.

Bootstrap 3 offers several powerful tools that can be a huge advantage to a DotNetNuke skin developer. Some of these include:

  • Various layout options: Bootstrap 3 allows us to work with a variety of layout options such as the grid system, this grid system allows us to create pane layouts extremely quickly.
  • Bootstrap 3 comes with excellent typography and button styles.
  • A selection of handy javascript plugins such as popups, animated menus, and a responsive carousel.
  • Bootstrap 3 has been rebuilt from the ground up and is now a mobile-first framework, meaning it is written and coded perfectly for mobile devices from the beginning. Rather than adapting a desktop HTML/CSS framework to look good on a mobile device, this time the bootstrap framework looks perfect on a mobile device and then it is adapted and extended upon for the extra screen real estate of a tablet and then a desktop screen.

This tutorial will give you a solid template for creating your Bootstrap 3 based skins. You will also learn some techniques such as file inclusion using the client resource management features available in DNN 6 and 7.

This video contains:

  • Introduction;
  • Downloading Bootstrap 3;
  • Unzipping the Bootstrap files into the DotNetNuke file system;
  • Accessing the DotNetNuke file system with Visual Studio Express for Web;
  • Creating the default skin file;
  • Creating a 'barebones' DotNetNuke skin;
  • Introduction to Client Resource Management;
  • How to implement client resource management within a skin;
  • Registering the Bootstrap 3 CSS and Javascript files with client resource management;
  • Introduction to the viewport meta tag;
  • Implementing the viewport meta tag from within a skin;
  • How to create the Bootstrap container div;
dnn7 skin bootstrap
Andy Stephenson

About 2013 Edition

2h 47m 18s All Jan 01, 2013

DNN Video Tutorials posted during 2013

dnn5 dnn6 dnn7 3rd party module advanced beginners bootstrap email installation menu search skin
Andy Stephenson

30 days money back guaranteed