Flex options in theme style / contextual spacing

How To
1

Hi there

I’m fairly new using bricks and I have some questions. I’m self thought so I might have gaps understanding some basic development-knowledge. :upside_down_face:
My text has gotten longer than I intended.

Flex in theme style:
I’m wondering why there is no option in the theme style to set a flex basis for boxes. I know have a variable for flex basis and assign it via class to my container. Sometimes I feel classes are a little bit hard to track (mainly because I often forget to switch back to element when editing something and there is no overview in the class editor)…
→ I know that the flex basis is individual to them element it contains - but I think it would be easier to overwrite for elements that don’t fit.

Contextual spacing:
I’m not sure how this works - I understand the concept but I feel like it only applies to text within the same text element? Usually I place a header element and then a text element - to my knowledge I can not define both in one text editor, besides giving header tags manually in the editor?
So know I added my desired spacing via spacing variables in the theme style as margin below each header - Is this a good way to do things?

General question:
Yesterday I spent much time defining various variables - I tend to systemize everything :wink:
So now I got my set with around 80 variables including colors and text sizes / spacings. I also have a css stylesheet for woo-commerce and a set of variables to pair them to my bricks variables. (So I can use this stylesheet as base and switch bricks variables in the variables editor).
I’m happy with the outcome, since I know feel like It’s a solid base that I can use for most other websites.
My question is more, since bricks 2.4 will offer more options to style woo - how much effort is worth investing in this css stylesheet for woo. Most of it is the account page.
I’m also wondering If there is no way to use bricks forms for woo? Do I really need to use woo-login form, since I like the one from bricks much more :slight_smile:

Thank you for taking your time!
In Regards
Yannis

3

Hi Yannis,

For flex-basis, I would keep this at the element/class level instead of Theme Styles. flex-basis is usually contextual to the flex item and its parent layout, so a utility class or component-level class is the more maintainable approach when you want to reuse it across layouts.

For contextual spacing, if your heading and text are separate elements, using Theme Styles or classes for heading margins is a valid approach. Another common pattern is to control spacing from the parent layout with gap, especially when the spacing belongs to the group rather than to the heading itself.

For WooCommerce styling, I would avoid over-investing in a large custom stylesheet right before Bricks 2.4 if the main goal is styling default Woo areas. Keeping your variables is fine, but for Woo-specific CSS I would focus only on what you need now and revisit once the new styling options are available.

For Woo login/account forms, use the WooCommerce account/login forms when you need WooCommerce’s native account handling. Bricks Forms are useful for custom forms, but they are not a direct replacement for WooCommerce’s built-in login/account flow without custom development.