Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

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 .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


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 4, 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 4, 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 5, 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)
Kalen Shuck
Hi Geoff, I am interested in using Foundation on my new DNN site, and came across your article. I noticed the code hasn't been updated for quite some time, and wondering if this project has died or if there was much interest.


Thanks.
Kalen Shuck Wednesday, June 24, 2015 12:41 PM (link)
Geoff Barlow
@Kalen, I am planning to update the skin shortly when time allows.

When I get started with it it will use the most up to date version of Foundation.

I'm interested, what would you like to see added to the skin, functionality, colors or ideas? If I get some input I can then try to add the wishes of people in the update.

I am in the middle of updating ally modules and moving them over the Github and this ales a bit of time.

Thanks for taking an interest in the DnnFoundation theme, it's nice to see there is interest in something other than bootstrap 😉

Geoff
Geoff Barlow Thursday, June 25, 2015 2:01 PM (link)
Kalen Shuck
Thanks for the response Geoff,

I found a few errors in the placement of the "color" css files as well as a reference to "menu.css" and that file doesn't exist. This is the primary reason I wondered if it was dead. As for colors and features, I like the way you setup the css color files for easy switching. I'll dig into it some more and provide feedback once I get comfortable with it.

By the way, I am on DNN Evoq Content Basic 8.1.0, and it seems to work well so far.
Kalen Shuck Thursday, June 25, 2015 4:01 PM (link)
Geoff Barlow
Hi Kalen,

In the next week or 2 I'll try and update it for you and also move it over to GitHub. This all depends on time but I'll do my best.

Regards,

Geoff.
Geoff Barlow Tuesday, June 30, 2015 6:30 AM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
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 (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out