Wouldn’t you know it, you set a free Meetup for Tuesday March 15th all about WordPress CSS Tips and Tricks – and then two major WordPress software developers, Elementor and Brainstorm Force, annouce that theyare shifting to flexbox framework for all of their basic layout routines. So much a commitment that Elementor has decided to make its Section DOM framework legacy and will even have an automatic conversion from Section DOM to the new Flexbox framework. Here is the over view:
There is a problem with the Flexbox framework – it is complex.as you can see in this CSS review & code sample below:
Perhaps flexbox complexity is the reason that only two PageBuilders, Bricks Builder and Oxygen Builder , have used Flexbox for their foundation layout tools. So this leads to the question what are the pro and cons for using flexbox,
Pros for Flexbox
– simplifies the code for multi-block page layouts
– therefore improves performance flex pages
– allows for multi-embedded containers
– more flexibility in sizing and moving items in a flex container
– as Caniuse shows flexbox is supported all mdern browsers[of course IE is the exception]
Cons For Flexbox
– added learning curve for most PageBuilders
– disruptive change in developing page layout
– flexbox elements wiggle into place, lowering ARIA and Web Core Vitals scores
So with the move by Elementor and Brainstorm Force nad what that brings Gutenberg, there is clearly momentum in favor of using Flexbox in WordPress PageBuilders.
But some savvy WordPress and CSS users may ask “what about CSS Grid?” Now Bricks Builder, which already supplies a solid Flexbox framework, is working on adding CSS Grid to its Bricks Builder layout tools.This is a major task as CSS Grid has even more rues and variants than Flexbox and CanIuse shows how beyond CSS Grid basic, most modern browsers are behind in implmenting full CSS Grid. Nonetheless there is a vibrant community of developers providing CSS Grid Generator tools[raw HTML & CSS] as seen here.
WPMUDev provides a good perspective on FlexBox vs CSS Grid use in WordPress – “you don’t need to choose between the two – use grids for general layouts and flexbox for content within that layout.“. This advice seems to underline changes in WordPress page layout, major changes are on tap.
So the upcoming CSS Tips meetup will be packed with useful CSS info & insights.