DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact community@dnnsoftware.com.

 


Dnn responsive skin frameworks

One of DNN’s strong points is that the architecture allows for flexibility to extend the platform using the developers preferred tools and methodology. This means that you can program a module or SkinObject in C# or Visual Basic  for example.

So here’s my question: Why do most DNN Skin developers use Bootstrap?

Creating a skin for DNN follows the same principles as creating a module, you can use whatever responsive framework you like, that’s if you want to use a framework You could develop a grid system yourself if you wanted to.

This is why I created the DnnFoundation Skin ( found here in the Forge ) to show the community just this. The skin uses ZURB Foundation, a responsive framework other than Bootstrap which is a very powerful framework.

Why did I choose Foundation as a responsive framework?

  • The framework is Semantic, because of this I was able to create the DnnFoundation skin in no time and learn quickly how to setup the grid for all devices.
  • The Foundation framework is built on “mobile first” principle, therefore the site will look great on all devices from smartphone to desktop.
  • I found out very quickly that it is very clean to use and customize, this is why there are 21 color variations available in the DnnFoundation skin. Compared to Bootstrap it was extremely easy to change the menu item colors for example.
  • The grid system is very flexible to setup, allowing you to align sections easily for different devices

The list goes on.

Basically, for me, it was a breath of fresh air to use something other than Bootstrap.

Another reason for using Foundation is the ever changing web. The web has changes rapidly over the last several years and there is a change for native app’s as well. The native app’s to web app has now begun. The ZURB Foundation framework caters for this change. So if you start now and you’ll be ready for the change. Kill 2 birds with 1 stone!

So what is the best responsive framework?

The simple answer is: there is no best! All frameworks have their good points and bad points. Some people like BootStrap because of the huge community and popularity, others like Foundation because it’s easy to learn and easy to customize. It’s a question of taste.

What I say is don’t be scared to try something different. The DNN CMS offers the opportunity to use whatever you like for skinning so try another framework, you might be surprised!

So what other frameworks are available?

To find out just how many responsive frameworks there are just Google ‘responsive frameworks’ and you will see that there is not only Bootstrap.

Below I have compiled a small list of only some of the frameworks that I have found. Every solution has its good points and bad, but they all can be adapted to create DNN skins. So why not have a look, try some of them and see if one of them suits your needs.

An even better idea would be to create a skin for the Forge with a chosen framework and share with the community your findings.

BootStrap, used for the HammerFlex skin (http://getbootstrap.com)

Foundation from ZURB, used for the DnnFoundation skin (http://foundation.zurb.com)

Skeleton (http://www.getskeleton.com)

Gumby (http://gumbyframework.com)

Golden Grid system (http://goldengridsystem.com)

Comments

Jay Mathis
Great discussion Geoff!
For me, the selling point for BootStrap is the large user base and wealth of examples and extensions out there. There may be some out there that are easier to use or even technically better, but the community (outside of DNN) seems to be behind BootStrap for the time being.

I'd actually like to see DNN adopt BootStrap (or another framework) as the basis for skinning and admin modules, rather than trying to roll their own - ie., default.css :( . Let a group that is focused on maintaining the CSS framework do what they do best and let DNN focus on what they do best.
Jay Mathis Monday, August 04, 2014 12:31 PM (link)
Geoff Barlow
Hi Jay,
Thanks for the comments, much appreciated!

Everybody has their favorites when it comes to using a responsive framework and skinning for DNN or any other CMS's so I can understand why people use Bootstrap because of the large community base and example components etc. The thing is every framework is different, offering other types of components, some more than others and some better than others.

For example, Bootstrap has an off-canvas solution but is not used by many people ( the reason being that it is not well documented and there are very few examples, its always the drop-down menu for mobile devices, Foundation on the other hand has an off-canvas out-of-the box that really works seamlessly, looks great and is well documented. The point is, if the skin developers were to use other frameworks skins would not look the same, using the same principles like the drop-down menu, therefore giving the user a wider choice and variation when looking for a skin to use on their own DNN site.

The whole point behind this post is to make the DNN Community aware that there are more frameworks out there other than Bootstrap. The DNN CMS allows you to use whatever you want to for skinning.

I do understand completely what you are saying about the admin pages etc in DNN and I do believe that the admin/host modules should be responsive, starting with the control bar, but I don't believe that DNN should adopt 1 framework. As you've said this should be left to the skin developer to do, a cut down and clean default.css and the skin dev can build upon this. Saying that, I think that might be for another discussion ;-)

Thanks Jay!
Geoff Barlow Monday, August 04, 2014 1:57 PM (link)
Eoghan O'Neill
Thanks Geoff for this skin framework you've added in the Forge. Did you choose just on of the HTML templates (http://foundation.zurb.com/templates.html) of the ZURB framework for the skin on the Forge? I am seeing some issues with this when installed. But I will post those issues over on the skin's Codeplex page... Nice work!
Eoghan O'Neill Tuesday, August 05, 2014 6:06 AM (link)
Daniel Mettler
Awesome contribution, thanks!
We were one of the strongest promoters of CSS frameworks and started about 5 years ago. At that time, YAML was the best option. Today I agree that various frameworks are very good and that different frameworks serve different purposes. We believe that using a very common framework reduces development time, simplifies debugging and it's "cheaper" because more tools are available.
So we are now slowly migrating to Bootstrap, not because it's better than YAML (it's actually missing some features we love like css-namespaces), but because it's much more common helping us reduce cost for our customers.
Daniel Mettler Tuesday, August 12, 2014 11:25 AM (link)
Jordan
Great Article. I agree that using a css framework is great but also that there are many choices right now. That is why I don't want to see any one framework preferred or "built in" over another. I personally use the foundation framework because I feel it allows for more variety in site design. What would be nice is if the DNN platform simplified its mark-up for containers/modules etc to reduce the number of DOM objects and leave the majority of the styling to the skin.
Jordan Tuesday, August 12, 2014 12:22 PM (link)
Geoff Barlow
@Daniel : I agree that using a framework does reduce development time and costs as well as tackling the responsive side of things. I have just started to dabble into Sass which does have namespacing, (Foundation uses Sass). The DnnFoundation skin that I created was a test case for us to see the differences in frameworks from Bootstrap and I would strongly urge you to look into that framework before making any decisions on a framework to use. Bootstrap uses Less which should also use namespacing.

With Sass or Less you can quickly create a solid framework for your Dnn skins.

@Jordan : I am in total agreement that NO framework should be a "built in" framework for Dnn for the skinning engine, this was the purpose of this post, to let people know that there is more than just Bootstrap! Also, as you have said, the markup for skins/containers should be cut down and left to the designer of the skin to implement.
Geoff Barlow Wednesday, August 13, 2014 3:30 AM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (3)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (13)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (6)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (1)
Brice Snow (1)
Bruce Chapman (9)
Bryan Andrews (1)
cathal connolly (52)
Charles Nurse (157)
Chris Hammond (197)
Chris Paterra (55)
Clinton Patterson (26)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (34)
Dave Buckner (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (67)
Geoff Barlow (2)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (235)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (1)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Patrick Santry (3)
Peter Donker (50)
Philip Beadle (135)
Philipp Becker (2)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (1)
Scott Willhite (97)
Sebastian Leupold (78)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Torsten Weggen (1)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (36)
Will Strohl (145)
William Severance (5)

Copyright 2014 by DNN Corp Terms of Use Privacy
Request
a Demo
See Evoq Live
Latest Blog
How to Make Advocate Marketing Work for You
Read It
Watch the Replay
Top 5 Reasons to Consider a Branded Online Community
Watch