Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Fully CSS Grids based?

Home Forums Support Fully CSS Grids based?

  • This topic has 22 replies, 6 voices, and was last updated 10 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #451749
    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.

    GeneratePress 2.0.1
    #451763
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #452088
    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";
    		}
    	}
    }
    
    #452318
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #452555
    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. πŸ™‚

    #452607
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #452618
    Chad

    Edge has caught up… oh so recently. πŸ™‚

    So glad MS implemented the auto update concept too β€” at least with Edge.

    #452629
    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";
    	}
    }
    
    #452641
    Tom
    Lead Developer
    Lead Developer

    Super interesting – thanks for that. Might have to find some time to play with this over the holidays πŸ™‚

    #452647
    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.

    πŸ™‚

    #452654
    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?

    #453137
    Tom
    Lead Developer
    Lead Developer

    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.

    #453361
    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

    #453426
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #453448
    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/

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.