Creating Beautiful DNN Websites: DNN and Bootstrap Starter Kit

This past January, Dylan and I appeared on a DNNHangout with Will Strohl and Joe Brinkman. It was the first time that INNO has really made an appearance online, so it was an adrenaline rush to go big and talk to a couple of the brightest guys in the DNN community. (Literally the “brightest” if we’re talking solely about Will’s shirt.)

My presentation was “Creating beautiful DNN Sites.” It was the first presentation that I’ve done in front of the community so I was a little nervous and the presentation had to be rushed because of the time limit but I hope I got the general message across. You may have seen my original post that started this topic, but if not, you can find it here.

After the Hangout, I promised that I would release a starter kit – a barebones DNN theme that set the foundation for any design. I know this post is long overdue and I’m sorry for the wait. On the upside, I’ve refined my methods quite a bit so I hope this works better for you now.

I should say upfront that I think this post is for people already familiar with DNN skinning. So if you’re brand new to DNN skinning or front-end development, you may want to practice with Bootstrap first and also make sure you know how to work with DNN skins. I hope by showing you how I create skins it will bring people who are novices into a more advanced level. I want to focus on how I currently create website skins so I won’t go into great detail of the original post but here’s the TL;DR:

1. Design the website first!
2. Build your HTML/CSS/JS and perfect it in the browser locally.
3. Then move your markup and css into a DNN package.
4. Use https://tinypng.com/ and https://tinyjpg.com/ to get your images small
5. Remember to use DnnCssInclude and DnnJsInclude to load your CSS and JS files.

Before we begin, I also want to give a big shout-out to many people in the DNN community who helped make this possible. Nokiko, Timo Breumelhof, Lance Long, and other helpful people at DNN who keep the Wiki and the Answers section updated. Ralph Williams also has a pretty good primer on using DNN and Bootstrap. Without support from these people, I wouldn’t have been able to put this together.

Now that we’ve got that out of the way, let me show you I use my DNN Bootstrap Starter Kit.

Pre-requisites:

1. Download the Bootstrap DNN Starter Kit
2. Install http://stylehelper.codeplex.com/ on your DNN instance. (This is optional but highly recommended. If you don’t want to use it, you would have to remove the references to this inside the /includes/head.html file). I also use it because I can add a dynamic css class to the body which I often use to make adjustments to the style depending on the page.
3. Install Koala (or whatever LESS compiler that you prefer) onto your computer.
4. Review the folders and files. Here are some keys points to understand:
   1. Skins/rename-to-site/css/bootstrap-dnn-admin.css – This file is loaded by StyleHelper only for users who are administrators or SuperUsers. Most of this was created by Nokiko. It resets certain DNN-specific styles for administrators.
   2. Skins/rename-to-site/html-templates/*.html - This is where I locally develop the ‘static’ pages. I even meticulously design the modules and common components like tabs, modals, sliders, etc.
   3. Skins/rename-to-site/images/ - only put images that are related to the skin in here. Content images should go in the Portal’s image folder
   4. Skins/rename-to-site/includes/ - head, header, footer – Typically, you will have more than one .ascx for the skins. Default, home, full width, etc. I keep common sections like the header and footer as includes. I also use the head.html to put all of the directives and it’s generally where I load the CSS and JS files using DnnCssInclude and DnnJsInclude
   5. Skins/rename-to-site/js/ - I put all the JS files in here. Skin.js is where I put all of my calls.
   6. Skins/rename-to-site/less – This is where the Bootstrap LESS files resides. Because we compile locally, you don’t actually need to upload this folder.
   7. Skins/rename-to-site/nav-ul – Generally speaking, this is the only navigation template that you will need. I’ve built this so it’s reusable for a main navigation, a sidebar nav, a footer nav, etc. I keep the nav template super simple to be flexible. Any styles I want for the navs, I just create LESS files and wrap the DNN nav tag in a <nav id="main"> - for example.
   8. /Skins/rename-to-site/default.ascx – You can copy and rename this file to make your other skins like the homepage or full width. I’ve included some common controls that I use in the skin.
   9. /Skins/rename-to-site/skin.css – This will be where Bootstrap.less (and all of the imports) will compile to.

Now that you’ve got a basic understanding of the folder structure, here’s how to use the skin package:

1. In the containers and skins folders, you will find rename-to-site. Change that folder name to whatever you want. I typically name it the same as the website.
2. Download Bootstrap Source Code
3. From the Bootstrap ZIP, move all the files from the /less folder into /bootstrap-dnn-starter/skins/rename-to-site/less folder.
4. Before we compile, copy the .Normal { … } rules in the skin.css folder into the top of type.less. This fixes the .Normal typography that comes from default.css
5. Using Koala, click the + button and browse to this new /less folder. Once you do, Koala will automatically set up and compile the Bootstrap.less.
6. But for our case, we actually want to make the Bootstrap file to compile to skin.css. In Koala, select this new folder, find bootstrap.less, right click and select “Set Output Path” and then browse to and select skin.css.
   1. You can also configure other settings on the bootstrap.less file like “Output Style: Compress” and check “Source Map”. I typically have “Auto Compile” checked as well. That makes it so whenever I save any of the less files it will automatically compile skin.css.
7. Once you’ve done that, you should have Bootstrap compiling to skin.css. Great! The first thing I do is open up bootstrap.less in my IDE and comment-out the @imports that I don’t want. For example, in typical projects, I don’t use all of the Bootstrap components so I will comment those out to make the file smaller. If I ever choose that later that I need them, I can always @import them again.
8. Now that we’ve got skin.css compiling, we can build the templates. Open up html-templates/default.html and start fleshing out the markup. It’s already loading skin.css, so all you need to do is open up the LESS file that you want to change, make your edits, save and recompile, and then refresh your browser. The default.html file is also loading jQuery and skin.js so you can add in your JS.
9. Once you’ve fleshed out your HTML, CSS, and JS, all you have to do is move your markup into default.ascx, /includes/header.html, and /includes/footer.html. And then use head.html to control the resources on the page using DnnJsInclude and DnnCssInclude. Head.html, of course, will load everything for every skin. If you have a home.ascx skin that uses a specific JS file, then you should load it conditionally. This keeps things organized and fast.
10. Keep refining until it’s amazing. Then upload your skins to the website, change the Appearance settings on the site, and then start dropping in your DNN skin objects and controls. 10poundGorilla has this amazing Skinning Tool which gives you all the DNN controls.
11. When it comes down to the modules, you should research your modules and test them out to make sure you will have control over the designs. Personally, I love DNNSharp’s modules because they look great and give you that fine level of control. I also use 2SXC to create my own simple modules for laying out content the way I want it.
12. This is the step where after you’ve done everything else, you can celebrate. That’s pretty much the gist of it. I hope this barebones starter kit gives you the insight and confidence to build your websites the right way

Questions that I’m anticipating:

“My styles don’t look right. Should I edit default.css?”

No. In the starter package, we unload the default.css file for public users. You may need to use default.css for your users so you could remove the StyleHelper control that unloads it. But it depends on what you’re trying to achieve. I generally unload the file because it’s just extra weight that I don’t use. You don’t want to edit it because it gets overwritten on DNN upgrades so it makes it a hassle to manage.

“How do I achieve the full-width but centered style of content?”

Generally speaking (and depending on the design), my skin files are usually pretty simple. I only have a few divs and DNN content panes. I typically have a few containers like “section-blue”, “section-green”, “section-gray”, etc that has the Bootstrap .container class to center the content. I often also rely on C# templates in 2SXC to make the containers, rows, and columns in Bootstrap.

“How do I make Action Forms use my styles?”

Action Form, by default, loads its own versions of jQuery and Bootstrap. Under the general settings, you can uncheck the boxes to load jQuery and Bootstrap. Because the DNN theme already uses Bootstrap and jQuery, we don’t need Action Form to load it. That way, you can simply modify forms.less in the skin package, recompile, and it will use your styles for the form controls. The layout is still done through the module, however.

“You don’t have styles in the containers or the navigation template. Why is that?”

I don’t think styles should be placed in the containers or navigation templates. My DNN Themes are generally a custom theme that is very specific to a brand. Adding extra stylesheets and JS files for menus or containers makes managing the design more work. I usually have a nav.less file for the main navigation and any JS I need goes into skin.js.

“Aren’t you worried about giving away your secrets?”

Nope. Everything I know about skinning is publicly available. If there’s something that’s not documented, you can probably easily find out on the Wiki or from DNN Answers section. To create beautiful websites takes a lot of practice and experience. It’s something that I’ve been doing since 2006.

Have a question? Did I miss something? Was something overlooked? Do you know how to do something better? Contact me on Twitter @ajplopez or email me at aaron@innosoftware.net.

Launched! West Coast Pilates Relatively quick ways 2SXC could greatly improve their interface