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

Home Forums Support Should I not use Unsemantic grid option?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1442279
    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

    #1442301
    David
    Staff
    Customer Support

    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.

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

    #1446160
    Leo
    Staff
    Customer Support

    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?

    #1446165
    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>
    #1446179
    Leo
    Staff
    Customer Support

    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.

    #1446240
    Matthew

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

    #1446299
    Leo
    Staff
    Customer Support

    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/

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