Root Margin & Padding Settings Removed in 1.5b Needs To Be Added Back?

Feature Requests / Improvements
1

Wow-what a difference a 3 week holiday makes haha.

Not sure where this topic should go but feel free to move it @timmse.

I have just had a chance to have a quick play with 1.5 and I am not overly sure why the root margin and padding settings have been removed from theme styles as it now adds unnecessary clicks and moves it backwards IMO, perhaps I am overlooking something or not seeing the new logic.

Example basic structure comparison

Full-width container with one inner container and then another section using a container (not full-width).

On 1.4<

Themestyles:
Root Margin 7.5 REM Top & Bottom (For consistent spacing between sections
Root Padding 2.5 REM Left & Right (To provide a gutter so the content does not touch the sides on lower breakpoints)
Container width set to 1300px

Workflow
Add Root Container (1 action / 1 click)
Set to full width - via stretch (1 action / 1 click)
Add inner container - 1300px - (+/- 1 action as an use the little helper to add the inner container when adding the root container)
Container - 1300px (1 action / 1 click)

Total 3 to 4 actions & 3 to 4 clicks to achieve basic structure.

On 1.5

Themestyles
Section Element

  • Margin set to 7.5 REM (Top & Bottom)
  • Padding set to 2.5 REM (Left & Right)
    Container Element
  • Width 1300px
  • Unable to add margin and padding in theme styles due to it applying to both inner and root

Structure
Add Section element which adds inner container (1 action / 1 click)
Add Container for the second section as do not need full width (1 action / 1 click)
Add container padding (1 action / 4 clicks)
Add Container Margin (1 action / 4 clicks)

Total 3 to 4 actions & 10 clicks to achieve basic structure.

I am guessing some would say why not use two section elements, but that just adds unnecessary full-width div which on large pages goes back to divception

I don’t mind the 2 new elements and think there is a benefit. I just do not understand why the root settings inside theme styles have been omitted and use the same logic that if it is a root element the root margin and padding apply and if it is not a root element then the theme element settings apply?

Again not sure I am overlooking something as it was a quick test…and interested to hear your thoughts on how I can get back to the more streamlined approach in 1.4 with the new elements of 1.5

Thanks

Mick

1 Like
2

yeah many clicks got added everywhere. i still hope for a revamp.

3

Hi Mick,

Imagine you need to change 2nd section background color later, you will have to wrap the container in a section anyway to make it full width and align content.
I think using only sections at root level is better for consistency and less clickception.

And adding a few more sections on a page won’t hurt divception that much.

By the way you forgot the action of changing 2nd container tag to “section” :wink:

1 Like
4

Hey Yan :wave:

Haha yes that is true I will give you that one.

I agree semantically it is correct to have sections and you can and should assign the HTML tag, however I don’t think its correct or right to settle that now to have a boxed/fixed width container (section) it always has to be full width section and an extra div.

I would hazard a guess the average page would have roughly 3 Full-width sections (Hero, a CTA, and another to break up between normal sections.) I would guess you would have x2 more at least of the normal boxed/fixed-width/contained sections which means having lots of extra unused divs floating around the HTML.

But yet even if I do settle for extra divs, I have no improvement in terms of less Clicks/actions from 1.4…if that makes sense.

I appreciate the example you give about forgetting a background color but it is a rare occurrence and equally we have the ability to wrap a container with a few clicks since 1.4

If root padding and margins were kept then it is an actual improvement as it would go from 4 clicks and actions down to 2 as padding and margin are set in themestyles when its a section or a container that is root.

5

Hi Michael,
my advice is to forget everything you ever learned about the container and .root. Because there is no .root anymore. Accordingly, there is no longer a root margin or padding.

Instead, you can give each section, container, and div margin, padding, or width as you like. What you set there certainly depends on the layout or your habits.

If you select “Insert Section” in your 1.5 workflow, you have a single click and don’t have to set any container paddings because they are already included in the section element.

From a semantic point of view alone, the section element makes sense and does not lead to divception or anything similar but a clean page structure.

I’ve been clicking through the new structure for weeks now and never felt like I had to do more than I did before, but that is probably a personal feeling :slight_smile:

So much from my side :smiley:

Best regards,
timmse

1 Like
6

Hey Stefan,

Appreciate the reply as always bud!

This is what I would like to know and how to achieve this in themestyles without having everything full-width and an extra div on each section?

Because surely, it is not expected now to add padding and margin or assign a class manually every time I add a non-full-width section (using the container element)?

1 Like
7

You can add the padding to the container in the theme styles instead of the section, as long as you only use it as an outer container. But maybe I do not understand the problem :sweat_smile:

8

Stefan is right, forget about the old way and don’t use a single container as a section.

You want a section? Use a section element, be it full width or not or whatever bg, it is much more flexible afterwards and will be more consistent for margin/padding/width/alignments, future custom CSS or whatever property you need to set on either the outer section or inner container.

Saving 5 divs is the last years hype but is really futile.

My feeling is: think the container as a section inner content, a bit like Oxygen sections, if you know it.

Lastly, 2 sections with correct margin/padding is 2 clicks, done.

1 Like