DNN Community Blog

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


September 2014 (12)
August 2014 (25)
July 2014 (17)
June 2014 (10)
May 2014 (6)
April 2014 (9)
March 2014 (3)
February 2014 (4)
January 2014 (8)
December 2013 (5)
November 2013 (2)
October 2013 (9)
September 2013 (10)
August 2013 (8)
July 2013 (4)
June 2013 (8)
May 2013 (13)
April 2013 (2)
March 2013 (7)
February 2013 (7)
January 2013 (10)
December 2012 (6)
November 2012 (20)
October 2012 (12)
September 2012 (27)
August 2012 (29)
July 2012 (22)
June 2012 (17)
May 2012 (23)
April 2012 (24)
March 2012 (27)
February 2012 (21)
January 2012 (12)
December 2011 (18)
November 2011 (20)
October 2011 (27)
September 2011 (17)
August 2011 (18)
July 2011 (45)
June 2011 (22)
May 2011 (23)
April 2011 (19)
March 2011 (36)
February 2011 (19)
January 2011 (22)
December 2010 (29)
November 2010 (37)
October 2010 (32)
September 2010 (43)
August 2010 (46)
July 2010 (37)
June 2010 (46)
May 2010 (29)
April 2010 (38)
March 2010 (27)
February 2010 (33)
January 2010 (34)
December 2009 (13)
November 2009 (20)
October 2009 (29)
September 2009 (18)
August 2009 (29)
July 2009 (19)
June 2009 (18)
May 2009 (23)
April 2009 (16)
March 2009 (13)
February 2009 (20)
January 2009 (25)
December 2008 (25)
November 2008 (29)
October 2008 (34)
September 2008 (33)
August 2008 (36)
July 2008 (31)
June 2008 (25)
May 2008 (26)
April 2008 (33)
March 2008 (31)
February 2008 (24)
January 2008 (18)
December 2007 (27)
November 2007 (51)
October 2007 (24)
September 2007 (32)
August 2007 (24)
July 2007 (20)
June 2007 (28)
May 2007 (27)
April 2007 (24)
March 2007 (47)
February 2007 (21)
January 2007 (41)
December 2006 (21)
November 2006 (16)
October 2006 (24)
September 2006 (36)
August 2006 (30)
July 2006 (31)
June 2006 (37)
May 2006 (13)
April 2006 (13)
March 2006 (18)
February 2006 (20)
January 2006 (13)
December 2005 (6)
November 2005 (15)
October 2005 (15)
September 2005 (16)
August 2005 (7)
April 2005 (1)
March 2004 (4)
February 2004 (6)
January 2004 (1)
November 2003 (4)
October 2003 (22)
September 2003 (22)
August 2003 (15)
July 2003 (14)

Copyright 2014 by DNN Corp | Terms of Use | Privacy | Design by Parker Moore Design