[Support request] Should I not use Unsemantic grid option?

[Matthew]

Hi

I am creating a new site and recently learned about the GP unsemantic CSS I can use and started using this, super useful since LGC has stopped development.

However, I have just read the GP 3.0 updates and noticed it sounds like you are moving away from this? Whilst I know you will support backwards compatibility, should I be using Flexbox instead?

How do I use Flexbox? I couldn’t find any documentation on GP about it?

Obviously, I understand I need to install the Alpha to be able to use Flexbox?

Matt

[David]

Hi there,

in 3.0 you will have the option to choose Floats, which loads Unsemantic grid, or Flexbox which does not load it.

Flexbox doesn’t require any library like unsemantic, as its a native CSS property of all modern browsers. To use it in your own development requires some Custom CSS. You can see it in this example here:

https://docs.generatepress.com/article/split-header-three-sections/

Personally we recommend using GenerateBlocks which has a Grid Block. No sweating over shortcodes or HTML/CSS:

https://wordpress.org/plugins/generateblocks/

Its all visual editing, full responsive controls and all the CSS is dynamic ie. its super lightweight.

[Matthew]

Hey David,

Thanks for the reply. I am actually using GenerateBlocks but can’t use this when designing templates in Toolset.

So I am using the code editor and designing grids using Unsemantic, actually only just started doing this with websites – it works well and seems easy.

However, before I start using it a lot I wondered if I should wait till GP 3.0 is out, does Flexbox work in the same way with simple CSS classes to use? Or I am completely misunderstanding this.

[Leo]

does Flexbox work in the same way with simple CSS classes to use?

Not exactly sure what you are asking. With Flexbox, we don’t need classes like grid-30 grid-parent etc.

Does that help?

[Matthew]

Sorry I guess I didn’t explain to well.

Basically I have some like the following, which uses the Unsemantic CSS. With GP 3.0 should I continue to do this or is there a better way?

	<div class="grid-container">
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="grid-25 tablet-grid-50 mobile-grid-50 countryLPNetworksGrid">
				[wpv-post-body view_template="loop-item-in-country-lp-networks-list"]
      </div>
		[wpv-item index=other]
	<div class="grid-25 tablet-grid-50 mobile-grid-50 countryLPNetworksGrid">
				[wpv-post-body view_template="loop-item-in-country-lp-networks-list"]
      </div>
		[wpv-item index=4]
			<div class="grid-25 tablet-grid-50 mobile-grid-50 countryLPNetworksGrid">
				[wpv-post-body view_template="loop-item-in-country-lp-networks-list"]
      </div>
		[wpv-item index=pad]
      <div class="grid-25 tablet-grid-50 mobile-grid-50 countryLPNetworksGrid">
				
      </div>
		[wpv-item index=pad-last]
		 <div class="grid-25 tablet-grid-50 mobile-grid-50 countryLPNetworksGrid">
				
      </div>
	</wpv-loop>
</div>

[Leo]

This would still work in 3.0 as long as you don’t switch it to flexbox.

In the flexbox version, the grid-xxx classes won’t exist anymore so your markup won’t work.

[Matthew]

Ah ok I see and there won’t be an equivalent with Flexbox just with different classes then?

[Leo]

Yes exactly. That’s what David was trying to explain here:

Flexbox doesn’t require any library like unsemantic, as its a native CSS property of all modern browsers. To use it in your own development requires some Custom CSS

This page is a pretty good starting point:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Author]

Posts