After my first website build using Bricks, I am still at a bit of a loss for the best workflow for column layouts that can scale to large sites, using Bricks.
Specifically, how should we set up columns for desktop layouts, so they automatically format down to one column for mobile?
Let me explain the âshouldâ: I know how to format responsive columns using plain CSS, as well as using frameworks like Bootstrapâs column system. Iâve also used a handful of page building platforms. Usually, a page-builder platform will have a pre-defined system for column layouts where you choose the desktop column layout, and the platform automatically converts to 1 column at some breakpoint. The platform is still using CSS in the background, but it is highly âopinionatedâ about how those styles are applied.
Bricks, as we all know, offers much more flexibility for layout options. I would say it is close to being un-opinionated in layout workflow⊠BUT, Bricks does impose some opinions: the hover-menu to automatically create columns from a container uses certain CSS methods to achieve this. Specifically, the âwidthâ of the column element is set to a certain percentage.
Also, the .brxe-container element has default styles (which I believe) are meant to help: the container element defaults to âdisplay: flexâ and then at the 767px breakpoint, it adds âflex-wrap: wrapâ. This rule allows the columns to wrap automatically, and if youâve chosen a 50/50 layout, the columns automatically adjust to be full width. This is because the 50/50 layout does not add any width to the âcolumnâ elements.
But, any other column configuration does not work the same: the added âwidthâ values for the columns remains, and I end up with a 1 column layout where the content of most sections is a fraction of the screen width.
Another âopinionâ in Bricks default settings is that all these elements have âflex-shrink: 1â. This is not a default css setting, this is a Bricks âopinionâ.
Obviously I can override these settings for mobile breakpoints, but doing that for every section on the site is a nightmare for larger builds. I can also use a CSS framework and apply the frameworkâs column classes to achieve the layouts I need⊠but both of these methods are working somewhat âagainstâ the opinions of Bricks platform.
Am I missing something here? I want to work within the Bricks âopinionsâ if possible, but they seem half-implemented. I am also fine using my own custom workflow, but I want to make sure I am not overlooking an easier way before I carve my own path. Anyone have any insight here?
Thanks