[openstreetmap/openstreetmap-website] Arrange base layers menu in a grid (PR #3620)

[Andy Allan]

> I still don't understand if you are against specific widths _in pixels_ or widths in any units.

In general I'm against specific widths appearing in custom.css (in fact, I'd be quite happy to remove most of what remains in common.scss entirely, but that's an ongoing project). 

So for example, `.layers-ui.base-layers li` contains `margin-bottom: 8px` - this is an example of a style rule that should be removed, and replaced with either a) nothing, since bootstrap applies appropriate margin-bottoms to most components anyway or b) a bootstrap utility, e.g. mb-3. This way, margins are kept consistent all around the site, and are easy to change by customising bootstrap centrally. Same with the border-radius - these buttons don't need a custom border radius that's different from every other border radius used on the site; they should be using a [bootstrap corner radius](https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius) utility class.

So the same applies to grids, grid spacing, grid margins etc - no singular grid should have its own widths set, since that means they are inconsistent with any other grid used in the site.

This might seem unimportant, but small things like these often cause unexpected problems. For example, we used to have various `h1` and `h2` elements around the site with their own style rules and custom font sizes, originally in px and more recently in rem. But even those are now causing problems, since these hardcoded style rules interfere with the recently adopted [RFS](https://getbootstrap.com/docs/5.1/getting-started/rfs/) - see #3630. 

I hope that explains things.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1196787110
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/3620/c1196787110 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20220727/acc6d015/attachment.htm>