From e347f273d7ebcfcedb1b7e6540729ea12d36324b Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Wed, 16 Oct 2024 20:50:10 +0200 Subject: [PATCH] chore: document margins decision (#3750) As resolved to in a meeting on the 14th of October 2024, margins for basic elements should be defined and reset for first- and last child respectively. --- packages/styles/CONTRIBUTING.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/styles/CONTRIBUTING.md b/packages/styles/CONTRIBUTING.md index a05cabccd8..b01d5fd307 100644 --- a/packages/styles/CONTRIBUTING.md +++ b/packages/styles/CONTRIBUTING.md @@ -48,6 +48,24 @@ The only and default theme used currently is Bootstrap. When adding themings for Licenses of third party packages that are bundled with the output (e.g. Bootstrap) need to be included in the output and delivered with the output code. +### Margins + +Block level content elements (headings, paragraphs, images, lists, ...; html tags without any classes or context) should use the following margin system: define block margins but reset the margin start for the first child and the margin end for the last child. The rules for first and last child should have low specificity. + +```html +p { + margin-block: 1rem; + + :where(:first-child) { + margin-block-start: 0; + } + + :where(:last-child) { + margin-block-end: 0; + } +} +``` + ## Bundling the styles Run the following command to lint all scss files, create a dist folder and build the output CSS files using [gulp](https://gulpjs.com/). This command also copies the entire Scss source files into the dist folder, making them available for developers.