• +31(0)570 51 33 83

DnnConsulting Blog

Welcome to the FREE DnnMinimalist to the Dnn ecosystem

Welcome to the FREE DnnMinimalist to the Dnn ecosystem

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!

Geoff Barlow : Dnn CMS addict and Dnn MVP 2014, 2015 And 2016. Owns and runs DnnConsulting, WeHostDnn, emberWeb and cmsXpress.
Total: 0 Comment(s)

Latest posts

Intro to the DnnContra theme for Dnn
3/11/2017 2:56 PM | Geoff Barlow
Welcome to the FREE DnnMinimalist to the Dnn ecosystem
3/11/2017 2:54 PM | Geoff Barlow
The new Dnn9 Administration User Experience
11/3/2016 1:31 PM | Geoff Barlow
Intro to the DnnMDesign theme for Dnn using Bootstrap 3
5/12/2016 2:08 PM | Geoff Barlow
Using SVG files in a Dnn text/html module
4/18/2016 11:52 AM | Geoff Barlow
Placing social buttons in the DnnBootster theme
4/14/2016 4:30 PM | Geoff Barlow
Changing & creating DnnBootster color schemes
4/7/2016 2:20 PM | Geoff Barlow
Intro to the DnnBootster Skin for Dnn using Bootstrap 3
4/7/2016 2:13 PM | Geoff Barlow

Categories

.WeHostDnn : Dnn Hosting
emberWeb : Web Agency
(Avialable soon)
interschools : For schools
cmsXpress : Internet Solutions

DnnConsulting : The best choice in complete website solutions!

Contact us via email

or phone +31 (0)570 51 33 83