Some suggestions

  • rinart73

    (@rinart73)


    2 years ago

    Right now every area block has the following CSS variables defined, even if they have default values.

    --_ga-m-desktop: 0 0 0 0;
--_ga-p-desktop: 0 0 0 0;
--_ga-bg-desktop: transparent none;
--_ga-zi-desktop: auto;
--_ga-d-desktop: flex;
--_ga-mw-desktop: calc(100% - 0 - 0);
--_ga-m-tablet: 0 0 0 0;
--_ga-p-tablet: 0 0 0 0;
--_ga-bg-tablet: transparent none;
--_ga-zi-tablet: auto;
--_ga-d-tablet: flex;
--_ga-mw-tablet: calc(100% - 0 - 0);
--_ga-m-mobile: 0 0 0 0;
--_ga-p-mobile: 0 0 0 0;
--_ga-bg-mobile: transparent none;
--_ga-zi-mobile: auto;
--_ga-d-mobile: flex;
--_ga-mw-mobile: calc(100% - 0 - 0);

    I suggest omitting them if they’re default and instead setting default values in the frontend CSS file.

    –

    Also I’m trying to create 6 areas that are displayed 3 per row on desktop and tablet and 2 per row on phone. Hovewer plugin default presets are limited by 4 columns max so I use designer instead. But designer specifies areas that are fixed in certain position for all screen sizes. On top of that it’s hardcoded that < 768px grid turns into flexbox with 1 area per row.

    Would it be possible to either add a way to specify separate layout for tablet and mobile as well? Or maybe add option to specify ‘grid-template-columns: repeat(auto-fill, minmax(MIN_AREA_WIDTH, 1fr));’?

Viewing 2 replies - 1 through 2 (of 2 total)
  • amddtim

    (@amddtim)

    1 year, 11 months ago

    +1 The zeroed values make it impossible to set actual defaults in the theme, defaults with the intent to get overridden on a section-by-section basis. If there’s no value provided in the section, the inline css variable declaration should be omitted.

    Plugin Contributor Simone Maranzana

    (@simo_m)

    1 year, 11 months ago

    Hi there,
    sorry for the late reply.

    Concerning your first suggestions @rinart73 and @amddtim you are right, the default should be omitted but since we have only one CSS declaration that rely on custom properties we need to specify it in order to keep the grid functionality on nested columns intact.

    @amddtim These values are generated by the block options, so are not intended to be customized via CSS.
    Anyway, you can control the style in your stylesheet if you need it, just refer to the generic custom property, for example, if you want to customize globally the columns gap you can do it with something like this:
    .grids-section { --_gs-gap: 2em }
    The block options will save the value corresponding to the specific media query, so if in your custom theme you need to have more control you can leave empty the grid block options and style everything with CSS (without using the !important statement).

    @rinart73 concerning your last question, unfortunately there isn’t yet a way to customize the advanced grid on different media queries and the use of the auto-fill or auto-fit mode is not straightforward for a casual user. We are experimenting some advanced grid functionalities in a new plugin that basically extend the core columns block so if we found a proper and easy (for the end user) way to use these properties we will improve Grids.

    Thanks again for your suggestions!
    Let me know if you have any other questions.
    Best,
    Simone

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Some suggestions’ is closed to new replies.