Proof of concept: Dnn and Css grid working together!
Over 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.
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 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 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.
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!