Backdrop's use of spacing (padding) between page elements

[LeeteqXV]

Example: the space around titles on pages like https://backdropcms.org/news - (also in the core + contributed Basic theme), and above/below page elements like menu items.

To me, (not a designer) it seems to have an enormous padding. Unlike most themes I am used to from Drupal/WP, in Backdrop I find myself often wishing for 200-500% less padding... - that is 2-5 times too much (white-)space than what seems "necessary" (obviously a question of opinion), and in particular on laptop screens that tend to be (much) wider than they are tall), we loose a rather big portion of the content on the first screen full.

Is there any special design reason why we should not immediately on the first screen see the full teaser (including the image) of the first item in that list, currently "Geoff St. Pierre Community Spotlight"? (Currently the title of that first entry occurs well into the second half of the screen...)

• Since the general use of padding is somewhat consistent and seems to me to be so enormous/obvious, does that mean this is a strategic design decision to set Backdrop apart from others?

The extent of it is such that I have been scared to ask this question and hence postponed it for a very long time until now. I would rather avoid stepping on anyone's toes here.

I have been postponing moving ahead with Backdrop until this point with BD 1.7.x, Forums (+ the Paragraphs module ported) and References coming closer to maturity. Now I hope that the time is right for promoting Backdrop to small projects, and hence I am looking for solution to this spacing issue:

• Since this "spacing issue" occurs not only on the main web site but also in the core distro (Basic theme) and in the contributed version of Basic (and actually in others of the relatively few "ready" themes too...), the amount of spacing used seems like a shared/accepted notion among several/most developers here(?). If it is, then I am not going to tell professional designers/theme developers that they are "wrong" in any way, but need a way to go around it, like we are used to do in Drupal and WP (WP finally just got Custom CSS option built-into core in v.4.8.).

Solution? That sends me looking for a way to provide the small projects I would like to invite in here with a simple, GUI-based CSS customization option for overrides, like the one we are used to from AdaptiveTheme in D7.

However, AFAIK, backdrop does not expose AdaptiveTheme type settings, neither in the themes, nor among contributed modules, or inside the Layouts settings(?). Or am I missing something? Is there anything in Backdrop resembling the "delight" that we have had for years GUI-admin-wise with combinations like AdaptiveTheme + Mix_and_match (theme)?

My focus is not on technically skilled admins, but to let non-tech people (project admins, etc.) learn administration and customization from within the GUI, without needing file access on the server, or to meddle with .CSS files at all. Just learn a few simple tricks that can override common page elements.

While what I am actually looking for is the Drupal-style "configure" option for each theme, or a "Layouts" variant or the like, the closest I have got to a "solution" in Backdrop is the "Style settings" module - but currently gives errors on installation and seems not to be working yet / at the moment(?). ( https://github.com/backdrop-contrib/style_settings/issues/2 )

(I know how to make customizations to CSS files, but that is not going to help towards the small sites/projects that I aim at. Need a GUI solution.)

So 2 questions:

1. Is it possible to discuss the use of padding/spacing in general here, so that I (and others?) can get to know whether this is an important/fixed decision, or if it is possible to affect it somewhat?
2. How/where can we do simple CSS customizations on a normal backdrop site, regardless of which theme one is using?

(My personal, biased, non-professional and very general opinion/impression: cut padding between ("almost all"...) page elements in at least half in the main themes and on the Backdrop website...)

(wow, I guess the very length of this post shows how scared I am from asking this in the first place...) (takes a deep breath, and... [submit])

[olafgrabienski]

@LeeteqXV Regarding your 2nd question, you may also have a look at core issue #1829 filed by @klonos. It's about making subtheming easier but there is also a short discussion about custom CSS modules like Drupal's CSS Injector. I'd love to have something like it (or like the WordPress Custom CSS feature) in core or in a contrib module.

[alexfinnarn]

Rather than open a new issue, I think this discussion is related to something I see on the front page of https://backdropcms.org.

Since there is no page title, maybe?, the padding pushes "Why use Backdrop CMS?" lower on the page. I'm no whiz-bang marketing guru, but I always remember the above-the-fold rule with trying to place as much good content as you can before users have to scroll.

I like the current CTA buttons and other lists of things on the front page, but that spacing issue really grinds my gears. You could easily do something like:

.front .l-page-title {
    padding-top: 0em;
}

for that page/theme as a quick fix, but it doesn't solve the issues discussed here.

I'm not sure either about the use of relative units, "em" or "rem", vs. the standard "px" units. I see some mixed usage in the theme on https://backdropcms.org. I know nothing of the current talk on this debate but would think @wesruv would know.

I found https://engageinteractive.co.uk/blog/em-vs-rem-vs-px, and if using relative units is great for accessibility, then I'm all for that.

[jenlampton]

I switched all the font-size units to rems/ems in the borg theme recently. There are probably other things that could be updated too, but I was weary about changing (breaking) too much at once.