Intro to the DnnMDesign theme for Dnn using Bootstrap 3
To follow up the FREE DnnBootster theme I decided to take it 1 step further with the new FREE, Open Source theme ‘DnnMDesign’.
So what is different with the DnnMDesign theme I hear you ask, well the DnnMDesign theme uses Bootstrap v3.3.6 just like the DnnBootster them but this time I have added an extra css framework so that you have the look and feel of ‘Material Design’.
What is ‘Material Design’?
It’s quite simple, Google created a set of design rules so that there is continuity through all types of devices and platforms. Here is a link to Google’s introduction to ‘Material Design’.
From these design rules, some individuals and communities have created Css frameworks (like Bootstrap). There are also css frameworks that extend Bootstrap and one of which I have used to create the DnnMDesign theme which is called ‘Material Design for Bootstrap’. MDB allows you to still have all the goodness of Bootstrap but have the look and feel of Material Design, the best of both worlds!.
The aims for creating DnnMDesign theme
- To create a theme that can be used as a base to build upon.
- To create a theme that can be easy to understand how Dnn themes work.
- To create a theme that is easily to customize and build upon.
- To create a theme that can be used on virtually any kind of Dnn site.
- A Dnn theme that can be used as learning tool to create themes using the Bootstrap framework.
- To get people inspired to create their own Dnn theme and also launch it to the community.
- Create a Dnn theme that adopts the 'Material Design' look and feel.
Say hello to the DnnMDesign Theme!
A demo of the DnnMDesign theme can be found here : www.dnnmdesign.com
The DnnMDesign theme can be downloaded here for free, and the source code can be found here.
The DnnMDesign theme was created from scratch, and the theme 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 theme 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 theme into sections also helps the DnnMDesign theme as a learning tool, because the them is split into sections it is easier to understand for people wanting to learn how to create a Dnn theme of their own.
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 theme file.
What’s included in the DnnMDesign Theme?
At the time of writing:
- 5 theme layouts
- 23 containers
- Multiple color variations
- All Bootstrap css, fonts and components which includes dropdowns, thumbnails and carousel etc.
- Font Awesome icons.
- The Material Design Icons.
Resources for the DnnMDesign theme
Enjoy the DnnMDesign theme and I hope this helps you to create your own open source theme for the community to use!