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 .

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


Proof of concept: Dnn and Css grid working together!

DnnConsulting, Dnn and Css Grid working togetherOver the past week I thought I’d play about with Css Grid (a new Css layout system). When I started to use Css Grid I started to think of ways the Css Grid would work well with Dnn and I came up with an idea.

This idea not only solves a problem for the Theme creator but also allows the user of the theme to create the layout they want and not what the theme allows them to do!

Basically, a theme creator will create ‘101 rows’ of Dnn panes to try to make sure that they cover every possible layout. This can take some time and make it hard for uses of the theme to get the right pane in the right order to get the layout that they want.

You’ve probably been there, you want to place a module in a pane but can’t remember what the pane was called and what row it was on, so you place it on the page and it completely knocks out your layout of the page.

The idea:

To use Css Grid for layout using only one Dnn pane and allow the users to create their own layout!

A bit about Flexbox and Css Grid….

I’m not going into depth about the 2 systems but what are they?

Flexbox

Flexbox is a 1-dimensional layout system and is used by css frameworks Bootstrap for responsive website design. Flexbox has been around now for around for 4 years now and has been adopted by most frameworks and frontend developers to cater for responsive websites and apps etc.

Css Grid

Css Grid is a 2-dimensional layout system which allows you to build grid layouts using columns and rows. Css Grid was released for product last March (2017) and there is a bit of a buzz about it. It’s not perfect but it does solve allot of layout problems. It also improves on common responsiveness problems as well.

Which one should I use?

Why make that choice, go for best of both worlds, they are both good solutions and work well together. When I was playing about with the systems I quickly came to the decision that I would use Css Grid for layout and Flexbox for components and content.

So what impact does Css Grid have with Dnn and my idea?

It allowed us to create a small Dnn SkinObject that allowed the theme users to create their own layout in 1 Dnn Pane, not only that, it allows the theme users to create different layouts for different devices….

When we create a commerce site we nearly always place the category menu on the right side and the product list on the left, why?, simple, you want to sell the products so that’s the most important part, the product list. On mobile devices, if you have category menu is on the left, that would show first when the panes are stacked and some category list can be long, so it would take allot of scrolling before you reached the product list. The same situation would happen with a blog and blog categories for example.

With Css Grid and the solution we have created, I can have 1 layout for large screens, and a completely different layout for mobile devices!

Think about it, no more showing and hiding modules for different devices, just create a different layout for different sizes!

For a demo, please check out the video I have created to see the potential of Dnn, Css Grid and the SkinObject we have created.

Summary:

The combination of Dnn, Css Grid and the SkinObject we’ve created gives the user the power to create a custom layout for each device size that they want and not what the Theme creator gives them!

The SkinObject created, at the moment, is a proof of concept!

If you have any questions, please do not hesitate to contact me or add your comment below!

Comments

Sacha Trauwaen
Nice demo Geoff. Your skinobject is awesome, it open a lot of perspectives !
Sacha Trauwaen Wednesday, January 31, 2018 1:39 PM (link)
Geoff Barlow
Thanks Sacha, already planning the 'MagicContainer' ;-)
Geoff Barlow Wednesday, January 31, 2018 3:31 PM (link)
Joseph Craig
Geoff,

This is absolutely fantastic! I can't wait until this is released.

Having said that, do you have thoughts about being able to save page "layouts" or is this tied to heavily to modules and containers? If this is tied to containers, might it be possible to combine the skin object with some container "settings" or configuration parameters?

I'm hoping that other will feel encouraged to unload their thoughts, feature requests, etc. Looking forward to talking about it in Ireland!
Joseph Craig Thursday, February 1, 2018 4:37 AM (link)
Geoff Barlow
Hi Joseph,
Thanks for your comments!

At the moment I have it tied to the containers.

I inject a css class which then turns the pane into a css grid, from that point, any modules that are placed on that specific pane are seen as a css grid item (they are direct children of the css grid), from there, via the small SkinObject you are able to specify which column/row you want to display the module.

So, to answer your questions, it would be possible to create a module that allows you to create page layouts, I to think of an easy way to do this.

To combine the SkinObject with other container settings, I don't see why not, just depends on what and I'm sure it would be possible.

The potential for this type of SkinObject is vast, the demo only shows the use for 'Single Pane layout' but if you think about what else you can do, it gives allot of freedom to the end user and I'd also love to hear from other people to contribute their thoughts and ideas.

Great to hear you are going to DnnConnect this year! Looking forward to finally meeting you!
Geoff Barlow Thursday, February 1, 2018 10:29 AM (link)
Clinton Patterson
Geoff, this is awesome stuff! Is there an option for not displaying on "small" (mobile) devices? Would we say span 0 columns? Just wondering if there were modules or content that one would not want to display on mobile... for example ,the Blog Roll or Tags... could there be a check box of "Do not Display" so the user could opt to turn it off in mobile? Again, great work and thinking outside of the box. Very impressive!
Clinton Patterson Friday, February 2, 2018 1:53 PM (link)
Geoff Barlow
Hey Clint, thanks for the nice words! I'm in the middle of adding/improving some stuff and creating another demo video. I'll make sure that this option is incorporated as well. The potential of this sort of skinobjects and the use of Css Grid has no limits, it can potentially give the user freedom to do nearly anything with the style and layout WITHOUT hacking at the code!
Geoff Barlow Saturday, February 3, 2018 9:27 AM (link)
Clinton Patterson
Awesome... thanks for being open to and incorporating feedback. Good stuff... community FTW!
Clinton Patterson Tuesday, February 6, 2018 4:12 PM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
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 (211)
Chris Paterra (55)
Clinton Patterson (47)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (154)
Dave Buckner (2)
David Poindexter (6)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (12)
George Alatrash (11)
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)
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 (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
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)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (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)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2018 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out