[Support request] Fully CSS Grids based?

[Chad]

Hi GP team,

I know… you just got done rewriting things. And now I come along and give more ideas. 🙂

What if GeneratePress used CSS Grids top to bottom?

Of course make the standard stylesheet look like GP does now. But if GP were fully implemented using css grids… oh how cool would it be for designers. 🙂

We could make the site do anything we wanted.

[Leo]

Hi there,

Couple people have sort of mentioned this before.

See Tom’s replies here:
https://generatepress.com/forums/topic/gutenberg-prep/#post-446571
https://generatepress.com/forums/topic/any-plans-of-replacing-unsemantic-grid/#post-442648

Hope this answers your question 🙂

[Chad]

Hmm… I wasn’t referring to bits and pieces of the theme, but rather the entire theme overall.

Something along the lines of this: https://github.com/mor10/kuhn

I wonder if I could create a child theme off of GP, then drop in css like this:

@supports (grid-area: auto) {
	@media screen and (min-width: 61.875em) {
		.site {
			display: grid;
			grid-template-columns: 16.5em 1fr;
			grid-template-rows: 1fr minmax(1em, auto);
			grid-template-areas: "header main" "header sidebar" "header footer";
		}
		.site-header {
			grid-area: header;
		}
		.site-main {
			grid-area: main;
		}
		.widget-area {
			grid-area: sidebar;
		}
		.site-footer {
			grid-area: footer;
		}
	}
	@media screen and (min-width: 1800px) {
		body:not(.archive-view) .site {
			grid-template-columns: 16.5em 1fr 16.5em;
			grid-template-rows: 1fr minmax(1em, auto);
			grid-template-areas: "header main sidebar" "header footer footer";
		}
	}
}

[Tom]

I would love to do this one day. Currently though, CSS Grid just isn’t supported widely enough.

There would also be the issue with backward-compatibility – many people are using the current CSS classes in their content.

One day, this will likely become an option you can toggle within the Customizer to switch to 100% CSS Grid 🙂

[Chad]

Fair answer Tom. I hadn’t done the research to learn how widely supported CSS Grids are… and it turns out it’s almost universally supported across modern browsers (which update themselves automatically). It’s even up to 76% of all active browsers supporting it — and growing each day. Yay!

https://caniuse.com/#feat=css-grid

I’d be more than willing to help you test this capability. I’d LOVE the ability to add a few CSS class overrides and completely change the layout of client sites on a whim — without any need to dig into the theme files. 🙂

[Tom]

I wonder if Edge has caught up yet – last I checked it was still a mess.

I’ll definitely do some research – I think it will require removing some markup etc.. which may be hard, but it’s something I’ll definitely be adding an option for at some point 🙂

[Chad]

Edge has caught up… oh so recently. 🙂

So glad MS implemented the auto update concept too — at least with Edge.

[Chad]

I started testing some drop in classes… by creating a child theme off of GP.

It’s definitely a work in progress but looks like this so far.

Using only this in the stylesheet:

@media screen and (min-width: 61.875em) {
	body {
		display: grid;
		grid-template-columns: 16.5em 1fr;
		grid-template-rows: 1fr minmax(1em, auto);
		grid-template-areas: "header main" "header sidebar" "header footer";
	}
	.site-header {
		grid-area: header;
	}
	.site-main {
		grid-area: main;
	}
	.widget-area {
		grid-area: sidebar;
	}
	.site-footer {
		grid-area: footer;
	}
}
@media screen and (min-width: 1800px) {
	body {
		grid-template-columns: 16.5em 1fr 16.5em;
		grid-template-rows: 1fr minmax(1em, auto);
		grid-template-areas: "header main sidebar" "header footer footer";
	}
}

[Tom]

Super interesting – thanks for that. Might have to find some time to play with this over the holidays 🙂

[Chad]

Awesome! Yea, if you look at the test site, I suspect there are some styles causing spacing/layout issues with the grids, but you’re the superhero here… I bet you could whip this grid support up no problem.

🙂

[Chad]

Sorry to keep adding to this…

I’m just picturing things… GP is already super customizable. The plugin adding lots of capabilities to the customizer, the page headers, and the disable elements stuff in each post.

Adding in CSS Grids will basically make this theme capable of doing just about everything — especially for people who understand css.

I wonder if there would be some way to add css grid settings to the customizer without making it too limited?

[Tom]

Turning the page into a grid would have lots of benefits when it comes to the Customizer. For example the navigation location would only require GP to tweak some CSS instead of actually moving the navigation around in the markup.

[Burt]

Just my 2-cents, I like the unsemantic grid being used now – very lightweight and simple to work with. From what I can see as pointed out, grid isn’t supported well yet. But flex box seems to be and you can do some fun things with it ( even the current menu system in GP ) by adding custom css. Not difficult to master and supported- Here is a primary menu using flexbox – needs a bit of work still

[Tom]

Flexbox is awesome as well, but usually does require some sort of javascript pollyfil to support older versions of IE.

Love the equal width menu items 🙂

[Chad]

CSS grids are supported across every modern browser now. The only real concern is IE 11… but given 76.6% of active browsing supports CSS grids right now, I don’t believe compatibility will be a problem.

A combination of css grid and flex grid is probably best.

Something that can take you away from relying on a framework at all. No matter how light it is, it is still adding bulk.

I brought this up because I like the GP premium customizer stuff, and with css grids becoming supported, it’s almost as if it’s the final piece of the puzzle to make the theme truly customizable.

This is a great CSS grids talk: https://mor10.com/wceu2017/

[Author]

Posts