@gemeentenijmegen/layout-css 0.0.1-alpha.1

package/LICENSE.md

@@ -0,0 +1,288 @@
+# EUROPEAN UNION PUBLIC LICENCE v. 1.2
+
+EUPL © the European Union 2007, 2016
+
+This European Union Public Licence (the ‘EUPL’) applies to the Work (as defined
+below) which is provided under the terms of this Licence. Any use of the Work,
+other than as authorised under this Licence is prohibited (to the extent such
+use is covered by a right of the copyright holder of the Work).
+
+The Work is provided under the terms of this Licence when the Licensor (as
+defined below) has placed the following notice immediately following the
+copyright notice for the Work:
+
+    Licensed under the EUPL
+
+or has expressed by any other means his willingness to license under the EUPL.
+
+## 1. Definitions
+
+In this Licence, the following terms have the following meaning:
+
+- ‘The Licence’: this Licence.
+
+- ‘The Original Work’: the work or software distributed or communicated by the
+  Licensor under this Licence, available as Source Code and also as Executable
+  Code as the case may be.
+
+- ‘Derivative Works’: the works or software that could be created by the
+  Licensee, based upon the Original Work or modifications thereof. This Licence
+  does not define the extent of modification or dependence on the Original Work
+  required in order to classify a work as a Derivative Work; this extent is
+  determined by copyright law applicable in the country mentioned in Article 15.
+
+- ‘The Work’: the Original Work or its Derivative Works.
+
+- ‘The Source Code’: the human-readable form of the Work which is the most
+  convenient for people to study and modify.
+
+- ‘The Executable Code’: any code which has generally been compiled and which is
+  meant to be interpreted by a computer as a program.
+
+- ‘The Licensor’: the natural or legal person that distributes or communicates
+  the Work under the Licence.
+
+- ‘Contributor(s)’: any natural or legal person who modifies the Work under the
+  Licence, or otherwise contributes to the creation of a Derivative Work.
+
+- ‘The Licensee’ or ‘You’: any natural or legal person who makes any usage of
+  the Work under the terms of the Licence.
+
+- ‘Distribution’ or ‘Communication’: any act of selling, giving, lending,
+  renting, distributing, communicating, transmitting, or otherwise making
+  available, online or offline, copies of the Work or providing access to its
+  essential functionalities at the disposal of any other natural or legal
+  person.
+
+## 2. Scope of the rights granted by the Licence
+
+The Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
+sublicensable licence to do the following, for the duration of copyright vested
+in the Original Work:
+
+- use the Work in any circumstance and for all usage,
+- reproduce the Work,
+- modify the Work, and make Derivative Works based upon the Work,
+- communicate to the public, including the right to make available or display
+  the Work or copies thereof to the public and perform publicly, as the case may
+  be, the Work,
+- distribute the Work or copies thereof,
+- lend and rent the Work or copies thereof,
+- sublicense rights in the Work or copies thereof.
+
+Those rights can be exercised on any media, supports and formats, whether now
+known or later invented, as far as the applicable law permits so.
+
+In the countries where moral rights apply, the Licensor waives his right to
+exercise his moral right to the extent allowed by law in order to make effective
+the licence of the economic rights here above listed.
+
+The Licensor grants to the Licensee royalty-free, non-exclusive usage rights to
+any patents held by the Licensor, to the extent necessary to make use of the
+rights granted on the Work under this Licence.
+
+## 3. Communication of the Source Code
+
+The Licensor may provide the Work either in its Source Code form, or as
+Executable Code. If the Work is provided as Executable Code, the Licensor
+provides in addition a machine-readable copy of the Source Code of the Work
+along with each copy of the Work that the Licensor distributes or indicates, in
+a notice following the copyright notice attached to the Work, a repository where
+the Source Code is easily and freely accessible for as long as the Licensor
+continues to distribute or communicate the Work.
+
+## 4. Limitations on copyright
+
+Nothing in this Licence is intended to deprive the Licensee of the benefits from
+any exception or limitation to the exclusive rights of the rights owners in the
+Work, of the exhaustion of those rights or of other applicable limitations
+thereto.
+
+## 5. Obligations of the Licensee
+
+The grant of the rights mentioned above is subject to some restrictions and
+obligations imposed on the Licensee. Those obligations are the following:
+
+Attribution right: The Licensee shall keep intact all copyright, patent or
+trademarks notices and all notices that refer to the Licence and to the
+disclaimer of warranties. The Licensee must include a copy of such notices and a
+copy of the Licence with every copy of the Work he/she distributes or
+communicates. The Licensee must cause any Derivative Work to carry prominent
+notices stating that the Work has been modified and the date of modification.
+
+Copyleft clause: If the Licensee distributes or communicates copies of the
+Original Works or Derivative Works, this Distribution or Communication will be
+done under the terms of this Licence or of a later version of this Licence
+unless the Original Work is expressly distributed only under this version of the
+Licence — for example by communicating ‘EUPL v. 1.2 only’. The Licensee
+(becoming Licensor) cannot offer or impose any additional terms or conditions on
+the Work or Derivative Work that alter or restrict the terms of the Licence.
+
+Compatibility clause: If the Licensee Distributes or Communicates Derivative
+Works or copies thereof based upon both the Work and another work licensed under
+a Compatible Licence, this Distribution or Communication can be done under the
+terms of this Compatible Licence. For the sake of this clause, ‘Compatible
+Licence’ refers to the licences listed in the appendix attached to this Licence.
+Should the Licensee's obligations under the Compatible Licence conflict with
+his/her obligations under this Licence, the obligations of the Compatible
+Licence shall prevail.
+
+Provision of Source Code: When distributing or communicating copies of the Work,
+the Licensee will provide a machine-readable copy of the Source Code or indicate
+a repository where this Source will be easily and freely available for as long
+as the Licensee continues to distribute or communicate the Work.
+
+Legal Protection: This Licence does not grant permission to use the trade names,
+trademarks, service marks, or names of the Licensor, except as required for
+reasonable and customary use in describing the origin of the Work and
+reproducing the content of the copyright notice.
+
+## 6. Chain of Authorship
+
+The original Licensor warrants that the copyright in the Original Work granted
+hereunder is owned by him/her or licensed to him/her and that he/she has the
+power and authority to grant the Licence.
+
+Each Contributor warrants that the copyright in the modifications he/she brings
+to the Work are owned by him/her or licensed to him/her and that he/she has the
+power and authority to grant the Licence.
+
+Each time You accept the Licence, the original Licensor and subsequent
+Contributors grant You a licence to their contributions to the Work, under the
+terms of this Licence.
+
+## 7. Disclaimer of Warranty
+
+The Work is a work in progress, which is continuously improved by numerous
+Contributors. It is not a finished work and may therefore contain defects or
+‘bugs’ inherent to this type of development.
+
+For the above reason, the Work is provided under the Licence on an ‘as is’ basis
+and without warranties of any kind concerning the Work, including without
+limitation merchantability, fitness for a particular purpose, absence of defects
+or errors, accuracy, non-infringement of intellectual property rights other than
+copyright as stated in Article 6 of this Licence.
+
+This disclaimer of warranty is an essential part of the Licence and a condition
+for the grant of any rights to the Work.
+
+## 8. Disclaimer of Liability
+
+Except in the cases of wilful misconduct or damages directly caused to natural
+persons, the Licensor will in no event be liable for any direct or indirect,
+material or moral, damages of any kind, arising out of the Licence or of the use
+of the Work, including without limitation, damages for loss of goodwill, work
+stoppage, computer failure or malfunction, loss of data or any commercial
+damage, even if the Licensor has been advised of the possibility of such damage.
+However, the Licensor will be liable under statutory product liability laws as
+far such laws apply to the Work.
+
+## 9. Additional agreements
+
+While distributing the Work, You may choose to conclude an additional agreement,
+defining obligations or services consistent with this Licence. However, if
+accepting obligations, You may act only on your own behalf and on your sole
+responsibility, not on behalf of the original Licensor or any other Contributor,
+and only if You agree to indemnify, defend, and hold each Contributor harmless
+for any liability incurred by, or claims asserted against such Contributor by
+the fact You have accepted any warranty or additional liability.
+
+## 10. Acceptance of the Licence
+
+The provisions of this Licence can be accepted by clicking on an icon ‘I agree’
+placed under the bottom of a window displaying the text of this Licence or by
+affirming consent in any other similar way, in accordance with the rules of
+applicable law. Clicking on that icon indicates your clear and irrevocable
+acceptance of this Licence and all of its terms and conditions.
+
+Similarly, you irrevocably accept this Licence and all of its terms and
+conditions by exercising any rights granted to You by Article 2 of this Licence,
+such as the use of the Work, the creation by You of a Derivative Work or the
+Distribution or Communication by You of the Work or copies thereof.
+
+## 11. Information to the public
+
+In case of any Distribution or Communication of the Work by means of electronic
+communication by You (for example, by offering to download the Work from a
+remote location) the distribution channel or media (for example, a website) must
+at least provide to the public the information requested by the applicable law
+regarding the Licensor, the Licence and the way it may be accessible, concluded,
+stored and reproduced by the Licensee.
+
+## 12. Termination of the Licence
+
+The Licence and the rights granted hereunder will terminate automatically upon
+any breach by the Licensee of the terms of the Licence.
+
+Such a termination will not terminate the licences of any person who has
+received the Work from the Licensee under the Licence, provided such persons
+remain in full compliance with the Licence.
+
+## 13. Miscellaneous
+
+Without prejudice of Article 9 above, the Licence represents the complete
+agreement between the Parties as to the Work.
+
+If any provision of the Licence is invalid or unenforceable under applicable
+law, this will not affect the validity or enforceability of the Licence as a
+whole. Such provision will be construed or reformed so as necessary to make it
+valid and enforceable.
+
+The European Commission may publish other linguistic versions or new versions of
+this Licence or updated versions of the Appendix, so far this is required and
+reasonable, without reducing the scope of the rights granted by the Licence. New
+versions of the Licence will be published with a unique version number.
+
+All linguistic versions of this Licence, approved by the European Commission,
+have identical value. Parties can take advantage of the linguistic version of
+their choice.
+
+## 14. Jurisdiction
+
+Without prejudice to specific agreement between parties,
+
+- any litigation resulting from the interpretation of this License, arising
+  between the European Union institutions, bodies, offices or agencies, as a
+  Licensor, and any Licensee, will be subject to the jurisdiction of the Court
+  of Justice of the European Union, as laid down in article 272 of the Treaty on
+  the Functioning of the European Union,
+
+- any litigation arising between other parties and resulting from the
+  interpretation of this License, will be subject to the exclusive jurisdiction
+  of the competent court where the Licensor resides or conducts its primary
+  business.
+
+## 15. Applicable Law
+
+Without prejudice to specific agreement between parties,
+
+- this Licence shall be governed by the law of the European Union Member State
+  where the Licensor has his seat, resides or has his registered office,
+
+- this licence shall be governed by Belgian law if the Licensor has no seat,
+  residence or registered office inside a European Union Member State.
+
+## Appendix
+
+‘Compatible Licences’ according to Article 5 EUPL are:
+
+- GNU General Public License (GPL) v. 2, v. 3
+- GNU Affero General Public License (AGPL) v. 3
+- Open Software License (OSL) v. 2.1, v. 3.0
+- Eclipse Public License (EPL) v. 1.0
+- CeCILL v. 2.0, v. 2.1
+- Mozilla Public Licence (MPL) v. 2
+- GNU Lesser General Public Licence (LGPL) v. 2.1, v. 3
+- Creative Commons Attribution-ShareAlike v. 3.0 Unported (CC BY-SA 3.0) for
+  works other than software
+- European Union Public Licence (EUPL) v. 1.1, v. 1.2
+- Québec Free and Open-Source Licence — Reciprocity (LiLiQ-R) or Strong
+  Reciprocity (LiLiQ-R+).
+
+The European Commission may update this Appendix to later versions of the above
+licences without producing a new version of the EUPL, as long as they provide
+the rights granted in Article 2 of this Licence and protect the covered Source
+Code from exclusive appropriation.
+
+All other changes or additions to this Appendix require the production of a new
+EUPL version.

package/README.md

@@ -0,0 +1,278 @@
+# Nijmegen Design System Layout
+
+This package contains the css layout options (breakpoints, containers, grid and spacing) for the Design System of the municipality of Nijmegen. The setup of this package is based on the [NL Design System principles](https://nldesignsystem.nl/richtlijnen/stijl/ruimte/) and is inspired by the [Bootstrap v5.3 Layout](https://getbootstrap.com/docs/5.3/layout).
+
+## Breakpoints
+
+This layout contains 6 breakpoints which have a default value and are customizable by usings Sass variables based on your design tokens.
+
+| Breakpoint        | Class infix | Default dimensions | Design token              | Sass variable              |
+| ----------------- | ----------- | ------------------ | ------------------------- | -------------------------- |
+| Extra small       |             | < 576px            | `nijmegen.breakpoint.xs`  | `$nijmegen-breakpoint-xs`  |
+| Small             | sm          | ≥576px             | `nijmegen.breakpoint.sm`  | `$nijmegen-breakpoint-sm`  |
+| Medium            | md          | ≥768px             | `nijmegen.breakpoint.md`  | `$nijmegen-breakpoint-md`  |
+| Large             | lg          | ≥992px             | `nijmegen.breakpoint.lg`  | `$nijmegen-breakpoint-lg`  |
+| Extra large       | xl          | ≥1200px            | `nijmegen.breakpoint.xl`  | `$nijmegen-breakpoint-xl`  |
+| Extra extra large | xxl         | ≥1400px            | `nijmegen.breakpoint.xxl` | `$nijmegen-breakpoint-xxl` |
+
+## Containers
+
+Containers are an implementation of the [Bootstrap v5.3 Containers](https://getbootstrap.com/docs/5.3/layout/containers/). The implementation contains all three different containers with custom class naming:
+
+- `.nijmegen-container`, which sets a `max-width` at each responsive breakpoint
+- `.nijmegen-container-{breakpoint}`, which is `width: 100%` until the specified breakpoint
+- `.nijmegen-container-fluid`, which is `width: 100%` at all breakpoints
+
+The following `max-width` values are used wicht are customizable based on the implementation of the design tokens:
+
+| Breakpoint        | Default `max-width` value | Design token                       | Sass variable                       |
+| ----------------- | ------------------------- | ---------------------------------- | ----------------------------------- |
+| Extra small       | 100%                      |                                    |                                     |
+| Small             | 540px                     | `nijmegen.container.max-width.sm`  | `$nijmegen-container-max-width-sm`  |
+| Medium            | 720px                     | `nijmegen.container.max-width.md`  | `$nijmegen-container-max-width-md`  |
+| Large             | 960px                     | `nijmegen.container.max-width.lg`  | `$nijmegen-container-max-width-lg`  |
+| Extra large       | 1140px                    | `nijmegen.container.max-width.xl`  | `$nijmegen-container-max-width-xl`  |
+| Extra extra large | 1320px                    | `nijmegen.container.max-width.xxl` | `$nijmegen-container-max-width-xxl` |
+
+Other container design tokens:
+
+| Design token                              | Default value       | Sass variable                              | Css variable                                     |
+| ----------------------------------------- | ------------------- | ------------------------------------------ | ------------------------------------------------ |
+| `nijmegen.container.padding-inline-start` | `nijmegen.space.25` | `$nijmegen-container-padding-inline-start` | `var(--nijmegen-container-padding-inline-start)` |
+| `nijmegen.container.padding-inline-end`   | `nijmegen.space.25` | `$nijmegen-container-padding-inline-end`   | `var(--nijmegen-container-padding-inline-end)`   |
+
+### Default container
+
+```html
+<div class="nijmegen-container">
+  <!-- Content here -->
+</div>
+```
+
+### Responsive containers
+
+```html
+<div class="nijmegen-container-sm">100% wide until small breakpoint</div>
+<div class="nijmegen-container-md">100% wide until medium breakpoint</div>
+<div class="nijmegen-container-lg">100% wide until large breakpoint</div>
+<div class="nijmegen-container-xl">100% wide until extra large breakpoint</div>
+<div class="nijmegen-container-xxl">100% wide until extra extra large breakpoint</div>
+```
+
+### Fluid container (full width)
+
+```html
+<div class="nijmegen-container-fluid">
+  <!-- Content here -->
+</div>
+```
+
+## Grid
+
+The grid system is an implementation of the [Bootstrap v5.3 CSS Grid](https://getbootstrap.com/docs/5.3/layout/css-grid/). The default setup is a 12 column grid which need to be placed inside the `nijmegen-grid` element. The grid supports responsive classeds to adjust the layout across viewports.
+
+| Design token            | Default value | Sass variable            | Css variable                |
+| ----------------------- | ------------- | ------------------------ | --------------------------- |
+| `nijmegen.grid.columns` | 12            | `$nijmegen-grid-columns` |                             |
+| `nijmegen.grid.gap`     | 1.5rem        | `$nijmegen-grid-gap`     | `var(--nijmegen-grid-gap)`  |
+| `nijmegen.grid.rows`    | 1             | `$nijmegen-grid-rows`    | `var(--nijmegen-grid-rows)` |
+
+### Columns
+
+```html
+<div class="nijmegen-grid">
+  <div class="nijmegen-g-col-4">col 1/3</div>
+  <div class="nijmegen-g-col-4">col 2/3</div>
+  <div class="nijmegen-g-col-4">col 3/3</div>
+</div>
+```
+
+### Responsive
+
+The following example has 2 columns but grows to 3 columns from medium breakpoint and above.
+
+```html
+<div class="nijmegen-grid">
+  <div class="nijmegen-g-col-6 nijmegen-g-col-md-4">.nijmegen-g-col-6 .nijmegen-g-col-md-4</div>
+  <div class="nijmegen-g-col-6 nijmegen-g-col-md-4">.nijmegen-g-col-6 .nijmegen-g-col-md-4</div>
+  <div class="nijmegen-g-col-6 nijmegen-g-col-md-4">.nijmegen-g-col-6 .nijmegen-g-col-md-4</div>
+</div>
+```
+
+### Starts
+
+With start classes you can implement (responsive) starting points to the columns.
+
+```html
+<div class="nijmegen-grid">
+  <div class="nijmegen-g-col-3 nijmegen-g-start-2">start by 2 col with a 3 col width column</div>
+  <div class="nijmegen-g-col-4 nijmegen-g-start-6">.start by 6 col with a 4 col width column</div>
+</div>
+```
+
+### Other
+
+Auto columns and nesting are also supported, please check the [Bootstrap v5.3 documentation](https://getbootstrap.com/docs/5.3/layout/css-grid/) for details.
+
+## Spacing
+
+Spacing is a responsive wrapper for setting `margin-inline-start`, `margin-inline-end`, `padding-inline-start` and `padding-inline-end` values on elements based on the [Bootstrap v5.3 spacing utility api](https://getbootstrap.com/docs/5.3/utilities/spacing/). The api has generated custom (responsive) classes with the following notation `nijmegen-{{property}{side}{breakpoint}-{size}`.
+
+**`{property}` options:**
+
+- `margin-inline`, horizontal margin
+- `padding-inline`, horizontal padding
+- `margin-block`, vertial margin
+- `padding-block`, horizontal padding
+
+**`{side}` options:**
+
+- `-start`
+- `-end`
+- blank, for using both sides
+
+**`{breakpoint}` options:**
+
+- `-sm`
+- `-md`
+- `-lg`
+- `-xl`
+- `-xxl`
+- blank, used in all viewports
+
+**`{size}` options:**
+
+- `0`
+- `12`
+- `25`
+- `50`
+- `75`
+- `100`
+- `125`
+- `150`
+- `200`
+- `250`
+- `300`
+- `400`
+- `500`
+- `600`
+
+By default the `!important` statement is added to all spacing ultilities to make sure the correct spacings are forced added if the classes are set. You can disable this by changing the following Sass variable and recompile the `layout.scss` file.
+
+```scss
+$nijmegen-enable-important-utilities-on-spacing: false;
+```
+
+### Design tokens
+
+| Design token         | Default value | Sass variable                                  | Css variable                |
+| -------------------- | ------------- | ---------------------------------------------- | --------------------------- |
+| `nijmegen.space.0`   | 0             | `map.set($nijmegen-space, "0", $new-value);`   | `var(--nijmegen-space-0)`   |
+| `nijmegen.space.12`  | 0.125rem      | `map.set($nijmegen-space, "12", $new-value);`  | `var(--nijmegen-space-12)`  |
+| `nijmegen.space.25`  | 0.25rem       | `map.set($nijmegen-space, "25", $new-value);`  | `var(--nijmegen-space-25)`  |
+| `nijmegen.space.50`  | 0.5rem        | `map.set($nijmegen-space, "50", $new-value);`  | `var(--nijmegen-space-50)`  |
+| `nijmegen.space.75`  | 0.75rem       | `map.set($nijmegen-space, "75", $new-value);`  | `var(--nijmegen-space-75)`  |
+| `nijmegen.space.100` | 1rem          | `map.set($nijmegen-space, "100", $new-value);` | `var(--nijmegen-space-100)` |
+| `nijmegen.space.125` | 1.25rem       | `map.set($nijmegen-space, "125", $new-value);` | `var(--nijmegen-space-125)` |
+| `nijmegen.space.150` | 1.5rem        | `map.set($nijmegen-space, "150", $new-value);` | `var(--nijmegen-space-150)` |
+| `nijmegen.space.200` | 2rem          | `map.set($nijmegen-space, "200", $new-value);` | `var(--nijmegen-space-200)` |
+| `nijmegen.space.250` | 2.5rem        | `map.set($nijmegen-space, "250", $new-value);` | `var(--nijmegen-space-250)` |
+| `nijmegen.space.300` | 3rem          | `map.set($nijmegen-space, "300", $new-value);` | `var(--nijmegen-space-300)` |
+| `nijmegen.space.400` | 4rem          | `map.set($nijmegen-space, "400", $new-value);` | `var(--nijmegen-space-400)` |
+| `nijmegen.space.500` | 5rem          | `map.set($nijmegen-space, "500", $new-value);` | `var(--nijmegen-space-500)` |
+| `nijmegen.space.600` | 6rem          | `map.set($nijmegen-space, "600", $new-value);` | `var(--nijmegen-space-600)` |
+
+### Horizontal centering
+
+The `.nijmegen-margin-inline-auto` class is available for horizontally centering for content that has `display: block` and a `width` set.
+
+```html
+<div class="nijmegen-margin-inline-auto" style="width: 200px;">Vertically centered element</div>
+```
+
+### Examples
+
+```html
+<div class="nijmegen-margin-inline-start-25">start 0.25rem margin</div>
+
+<div class="nijmegen-margin-inline-end-250">end 2.5rem margin</div>
+
+<div class="nijmegen-margin-inline-300">horizonal 3rem margin</div>
+
+<div class="nijmegen-padding-inline-500">horizontal 5rem padding</div>
+
+<div class="nijmegen-margin-block-start-0">vertical 0 margin</div>
+
+<div class="nijmegen-margin-block-end-75">vertical end 0.75rem margin</div>
+
+<div class="nijmegen-margin-block-300">vertical 3rem margin</div>
+
+<div class="nijmegen-padding-block-600">vertical 6rem padding</div>
+```
+
+## Customization
+
+It is possible to use your onw values based on the previous mentioned design tokens. Most of the design tokens have a CSS variable option for customization but **some tokens can only be customizated by using the Sass variables**. For example, the breakpoints are used in media queries so customization is only possible via loading your design tokens sass file and compile the `layout.scss` file to your custom css file. Use of the css variable option `var()` is not possible because this function can only be used to set a value on a property of an element, [see W3 docs](https://www.w3.org/TR/css-variables-1/#using-variables).
+
+### Example via Sass variables
+
+custom.scss:
+
+```scss
+@import "~gemeentenijmegen/layout-css/src/layout";
+
+// import or write your variables
+@import "~gemeentenijmegen/design-tokens/dist/variables
+```
+
+For example by using [Rollup](https://rollupjs.org/)
+
+rollup.config.mjs:
+
+```js
+export default {
+  input: "custom.scss",
+  output: {
+    file: "dist/my-layout.css",
+    format: "esm",
+  },
+};
+```
+
+Now run:
+
+```zsh
+rollup -c
+```
+
+### Example via CSS `var()`
+
+```html
+<!doctype html>
+<html lang="nl">
+  <head>
+    <title>Example page</title>
+    <link rel="stylesheet" href="node_modules/@gemeentenijmegen/layout-css/dist/layout.min.css" />
+    <!-- load your custom design tokens -->
+    <link rel="stylesheet" href="node_modules/@gemeentenijmegen/design-tokens/dist/index.css'" />
+    <!-- or write them in your own "theme" following NL Design System standards -->
+    <style>
+      .my-theme {
+        --nijmegen-space-inline-0: 0.5rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="nijmegen-theme">
+      <div class="nijmegen-padding-inline-0">0rem horizontal padding</div>
+    </div>
+    <div class="my-theme">
+      <div class="nijmegen-padding-inline-0">0.5rem horizontal padding</div>
+    </div>
+  </body>
+</html>
+```
+
+## License
+
+Distributed under the EUPL v1.2 License.

package/dist/container.css

@@ -0,0 +1,51 @@
+/*! Based on Bootstrap v5.1.3 Copyright (c) 2011-2024 The Bootstrap Authors */
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+.nijmegen-container,
+.nijmegen-container-fluid,
+.nijmegen-container-xxl,
+.nijmegen-container-xl,
+.nijmegen-container-lg,
+.nijmegen-container-md,
+.nijmegen-container-sm {
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  padding-inline-end: var(--nijmegen-container-padding-inline-end, var(--nijmegen-space-inline-sm, 0.75rem));
+  padding-inline-start: var(--nijmegen-container-padding-inline-end, var(--nijmegen-space-inline-sm, 0.75rem));
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+}
+
+@media (min-width: 576px) {
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+  .nijmegen-container-sm, .nijmegen-container {
+    max-width: 540px; /* stylelint-disable-line property-disallowed-list */
+  }
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+}
+@media (min-width: 768px) {
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+  .nijmegen-container-md, .nijmegen-container-sm, .nijmegen-container {
+    max-width: 720px; /* stylelint-disable-line property-disallowed-list */
+  }
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+}
+@media (min-width: 992px) {
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+  .nijmegen-container-lg, .nijmegen-container-md, .nijmegen-container-sm, .nijmegen-container {
+    max-width: 960px; /* stylelint-disable-line property-disallowed-list */
+  }
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+}
+@media (min-width: 1200px) {
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+  .nijmegen-container-xl, .nijmegen-container-lg, .nijmegen-container-md, .nijmegen-container-sm, .nijmegen-container {
+    max-width: 1140px; /* stylelint-disable-line property-disallowed-list */
+  }
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+}
+@media (min-width: 1400px) {
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+  .nijmegen-container-xxl, .nijmegen-container-xl, .nijmegen-container-lg, .nijmegen-container-md, .nijmegen-container-sm, .nijmegen-container {
+    max-width: 1320px; /* stylelint-disable-line property-disallowed-list */
+  }
+  /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+}