• +31(0)570 51 33 83

DnnConsulting Blog

Proof of concept: Dnn and Css grid working together!

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.

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!

Geoff Barlow : Dnn CMS addict and Dnn MVP 2014, 2015 And 2016. Owns and runs DnnConsulting, WeHostDnn, emberWeb and cmsXpress.
Total: 0 Comment(s)

Latest posts

Proof of concept: Dnn and Css grid working together!
1/31/2018 12:10 PM | Geoff Barlow
Setting up a Dnn theme to use Sass
6/3/2017 2:39 PM | Geoff Barlow
The DnnThemeEditor
4/7/2017 2:20 PM | Geoff Barlow
Intro to the DnnContra theme for Dnn
3/11/2017 2:56 PM | Geoff Barlow
Welcome to the FREE DnnMinimalist to the Dnn ecosystem
3/11/2017 2:54 PM | Geoff Barlow
The new Dnn9 Administration User Experience
11/3/2016 1:31 PM | Geoff Barlow
Intro to the DnnMDesign theme for Dnn using Bootstrap 3
5/12/2016 2:08 PM | Geoff Barlow
Using SVG files in a Dnn text/html module
4/18/2016 11:52 AM | Geoff Barlow
Placing social buttons in the DnnBootster theme
4/14/2016 4:30 PM | Geoff Barlow
Changing & creating DnnBootster color schemes
4/7/2016 2:20 PM | Geoff Barlow

Categories

.WeHostDnn : Dnn Hosting
emberWeb : Web Agency
(Avialable soon)
interschools : For schools
cmsXpress : Internet Solutions


DnnConsulting : The best choice in complete website solutions!

Contact us via email

or phone +31 (0)570 51 33 83