A couple of weeks ago I had a bit of time on my hands so I decided to create a new open source skin for the Dnn community. The first thing I did was to ask, via social channels what framework people would like to see the skin using, the choices were as follows:dnn
- Zurb Foundation 6 : this would be an upgraded version of the DnnFoundation skin from version 5 to 6
- MaterializeCss : a framework that is based on the Material design pattern.
- Bootstrap : version 3.3.6, at the time of writing Bootstrap v4 is still alpha.
I really wanted to do something different than Bootstrap, either MaterializeCss or an upgrade to the DnnFoundation skin I created a couple of years back, but it was obvious from the reactions I received that the community wanted another Bootstrap skin so I began to create the new skin for the community with Bootstrap and the outcome was the DnnBootster skin!
The goals for creating an open source skin for the community
- Create a skin that can be used as a base to build upon.
- The skin should be easy to understand how Dnn skins work.
- The skin should be easily customizable.
- The skin should be able to be used on virtually any kind of Dnn site.
- The skin can be used as learning tool to create skins using the Bootstrap framework.
- To get people inspired to create their own skin and also launch it to the community.
Hello DnnBootster skin!
A demo of the DnnBootster skin can be found here : www.dnnbootster.com
The DnnBootster skin can be downloaded here for free, and the source code can be found here.
The DnnBootster skin was created from scratch, and the skin files are split up into sections:
- The top bar
- The menu bar
- The Page header
- The Content area
- The Footer
- The legal footer
Each section points to an include file for that specific section, why?, this way you can remove, add or change the layout and look to your needs. It also helps for the user to look into the html and understand what individual sections are using.
For example: In the ‘Content area section’ there are over 20 rows with different layouts, the chances are that the user would only need 3 or 4 of these rows, the user could then delete the rows that are not needed, leaving only the desired rows. If something goes wrong with the layout he/she would be able to look at a small section of code and correct the problem quicker and easier. The user could even create their own rows.
Another reason is that most of the time you have more than 1 skin layout, ‘home page’ and an ‘inner page’ for example, if you change the top bar include file the changes will be automatically shown on all layouts.
Splitting the skin into sections also helps the DnnBootster skin as a learning tool, because the skin is split into sections it is easier to understand for people wanting to learn how to create a Dnn skin of their own.
I also used this technic on the DnnFoundation skin a couple of years ago.
If people don’t want to use the include technic they can just copy the contents of the include files and paste it directly in the main skin file.
What’s included in the DnnBootster skin?
At the time of writing:
- 5 skin layouts
- A home page skin
- An inner page skin
- A 404 page skin for ‘page not found’
- An admin skin for admin pages
- A Modal skin for popups like login and edit popups so that the popups display correctly on a mobile device.
- 27 containers
- 18 color schemes
- All Bootstrap css, fonts and components which includes dropdowns, thumbnails and carousel etc., for more info, click here.
- Font Awesome icons, to view a list of fonts and to find out how to use them, click here
Resources for the DnnBootster skin
In the next couple of days I plan to write another blog or 2 about how to change the color scheme of the DnnBootster skin as well as using Bootstraps many components.
Enjoy the DnnBootster skin and I hope this helps you to create your own open source skin for the community to use!