@gemeentenijmegen/layout-css 0.0.1-alpha.1

package/package.json

@@ -0,0 +1,31 @@
+{
+  "version": "0.0.1-alpha.1",
+  "author": "Gemeente Nijmegen",
+  "description": "CSS layout for a design system based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@gemeentenijmegen/layout-css",
+  "keywords": [
+    "nl-design-system",
+    "css-layout",
+    "gemeente-nijmegen"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:GemeenteNijmegen/design-system.git"
+  },
+  "scripts": {
+    "build": "rollup -c ./rollup.config.mjs",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "bootstrap": "v5.3.3",
+    "postcss-discard-duplicates": "7.0.1",
+    "rollup": "4.12.1",
+    "rollup-plugin-postcss": "4.0.2"
+  },
+  "gitHead": "448bf22172dc71330c1c578d6a4b32e07e3b4fd9"
+}

package/rollup.config.mjs

@@ -0,0 +1,63 @@
+import postcss from "rollup-plugin-postcss";
+import discardDuplicates from "postcss-discard-duplicates";
+import { cwd } from "node:process";
+import { basename } from "node:path";
+
+let components = [
+  {
+    input: "src/grid.scss",
+    output: "dist/grid.css",
+  },
+  {
+    input: "src/container.scss",
+    output: "dist/container.css",
+  },
+  {
+    input: "src/spacing.scss",
+    output: "dist/spacing.css",
+  },
+  {
+    input: "src/layout.scss",
+    output: "dist/layout.css",
+  },
+];
+
+let config = [];
+components.forEach((component) => {
+  config.push({
+    input: component.input,
+    output: {
+      file: component.output,
+      sourcemap: false,
+      format: "esm",
+      compact: true,
+    },
+    plugins: [
+      postcss({
+        extensions: [".css", ".scss"],
+        plugins: [discardDuplicates()],
+        extract: true,
+      }),
+    ],
+  });
+});
+
+config.push({
+  input: "src/layout.scss",
+  output: {
+    file: "dist/layout.min.css",
+    sourcemap: false,
+    format: "esm",
+    compact: true,
+  },
+  plugins: [
+    postcss({
+      extensions: [".css", ".scss"],
+      plugins: [discardDuplicates()],
+      extract: true,
+      minimize: true,
+    }),
+  ],
+});
+
+export default config;

package/src/_breakpoints.scss

@@ -0,0 +1,12 @@
+@import "~bootstrap/scss/mixins/breakpoints";
+@import "variables";
+
+$nijmegen-grid-breakpoints: (
+  base: null,
+  xs: $nijmegen-breakpoint-xs,
+  sm: $nijmegen-breakpoint-sm,
+  md: $nijmegen-breakpoint-md,
+  lg: $nijmegen-breakpoint-lg,
+  xl: $nijmegen-breakpoint-xl,
+  xxl: $nijmegen-breakpoint-xxl,
+) !default;

package/src/_variables.scss

@@ -0,0 +1,78 @@
+@use "sass:map";
+
+// Breakpoints used in by media queries in grid and container
+$nijmegen-breakpoint-xs: 0 !default;
+$nijmegen-breakpoint-sm: 576px !default;
+$nijmegen-breakpoint-md: 768px !default;
+$nijmegen-breakpoint-lg: 992px !default;
+$nijmegen-breakpoint-xl: 1200px !default;
+$nijmegen-breakpoint-xxl: 1400px !default;
+
+// Max widths used by media queries in container
+$nijmegen-container-max-width-sm: 540px !default;
+$nijmegen-container-max-width-md: 720px !default;
+$nijmegen-container-max-width-lg: 960px !default;
+$nijmegen-container-max-width-xl: 1140px !default;
+$nijmegen-container-max-width-xxl: 1320px !default;
+
+// spacing
+$nijmegen-enable-important-utilities-on-spacing: true !default;
+$nijmegen-space: (
+  0: var(--nijmegen-space-0, 0),
+  12: var(--nijmegen-space-12, 0.125rem),
+  25: var(--nijmegen-space-25, 0.25rem),
+  50: var(--nijmegen-space-50, 0.5rem),
+  75: var(--nijmegen-space-75, 0.75rem),
+  100: var(--nijmegen-space-100, 1rem),
+  125: var(--nijmegen-space-125, 1.25rem),
+  150: var(--nijmegen-space-150, 1.5rem),
+  200: var(--nijmegen-space-200, 2rem),
+  250: var(--nijmegen-space-250, 2.5rem),
+  300: var(--nijmegen-space-300, 3rem),
+  400: var(--nijmegen-space-400, 4rem),
+  500: var(--nijmegen-space-500, 5rem),
+  600: var(--nijmegen-space-600, 6rem),
+) !default;
+
+// deprecated
+$nijmegen-inline-spacers: (
+  3xs: var(--nijmegen-space-inline-3xs, 0.125rem),
+  2xs: var(--nijmegen-space-inline-2xs, 0.25rem),
+  xs: var(--nijmegen-space-inline-xs, 0.5rem),
+  sm: var(--nijmegen-space-inline-sm, 0.75rem),
+  md: var(--nijmegen-space-inline-md, 1rem),
+  lg: var(--nijmegen-space-inline-lg, 1.25rem),
+  xl: var(--nijmegen-space-inline-xl, 1.5rem),
+  2xl: var(--nijmegen-space-inline-2xl, 2rem),
+  3xl: var(--nijmegen-space-inline-3xl, 2.5rem),
+  4xl: var(--nijmegen-space-inline-4xl, 3rem),
+  5xl: var(--nijmegen-space-inline-5xl, 4rem),
+) !default;
+$nijmegen-block-spacers: (
+  3xs: var(--nijmegen-space-block-3xs, 0.125rem),
+  2xs: var(--nijmegen-space-block-2xs, 0.25rem),
+  xs: var(--nijmegen-space-block-xs, 0.5rem),
+  sm: var(--nijmegen-space-block-sm, 0.75rem),
+  md: var(--nijmegen-space-block-md, 1rem),
+  lg: var(--nijmegen-space-block-lg, 1.25rem),
+  xl: var(--nijmegen-space-block-xl, 1.5rem),
+  2xl: var(--nijmegen-space-block-2xl, 2rem),
+  3xl: var(--nijmegen-space-block-3xl, 2.5rem),
+  4xl: var(--nijmegen-space-block-4xl, 3rem),
+  5xl: var(--nijmegen-space-block-5xl, 4rem),
+) !default;
+
+// container
+$nijmegen-container-padding-inline-start: var(
+  --nijmegen-container-padding-inline-start,
+  map.get($nijmegen-inline-spacers, "sm")
+) !default;
+$nijmegen-container-padding-inline-end: var(
+  --nijmegen-container-padding-inline-end,
+  map.get($nijmegen-inline-spacers, "sm")
+) !default;
+
+// grid
+$nijmegen-grid-columns: 12 !default;
+$nijmegen-grid-gap: var(--nijmegen-grid-gap, 1.5rem) !default;
+$nijmegen-grid-rows: var(--nijmegen-grid-rows, 1) !default;

package/src/container.scss

@@ -0,0 +1,56 @@
+/*! Based on Bootstrap v5.1.3 Copyright (c) 2011-2024 The Bootstrap Authors */
+@import "breakpoints";
+
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+$container-max-widths: (
+  sm: $nijmegen-container-max-width-sm,
+  md: $nijmegen-container-max-width-md,
+  lg: $nijmegen-container-max-width-lg,
+  xl: $nijmegen-container-max-width-xl,
+  xxl: $nijmegen-container-max-width-xxl,
+) !default;
+
+@mixin make-container(
+  $nijmegen-container-padding-inline-end: $nijmegen-container-padding-inline-end,
+  $nijmegen-container-padding-inline-start: $nijmegen-container-padding-inline-start
+) {
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  padding-inline-end: $nijmegen-container-padding-inline-end;
+  padding-inline-start: $nijmegen-container-padding-inline-end;
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+}
+
+.nijmegen-container,
+// 100% wide container at all breakpoints
+.nijmegen-container-fluid {
+  @include make-container;
+}
+
+// Responsive containers that are 100% wide until a breakpoint
+@each $breakpoint, $container-max-width in $container-max-widths {
+  .nijmegen-container-#{$breakpoint} {
+    @extend .nijmegen-container-fluid;
+  }
+
+  @include media-breakpoint-up($breakpoint, $nijmegen-grid-breakpoints) {
+    // Extend each breakpoint which is smaller or equal to the current breakpoint
+    $extend-breakpoint: true; /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+    %responsive-container-#{$breakpoint} {
+      max-width: $container-max-width; /* stylelint-disable-line property-disallowed-list */
+    }
+
+    @each $name, $width in $nijmegen-grid-breakpoints {
+      @if $extend-breakpoint {
+        .nijmegen-container#{breakpoint-infix($name, $nijmegen-grid-breakpoints)} {
+          @extend %responsive-container-#{$breakpoint};
+        }
+
+        // Once the current breakpoint is reached, stop extending
+        @if $breakpoint == $name {
+          $extend-breakpoint: false; /* stylelint-disable-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+        }
+      }
+    }
+  }
+}

package/src/grid.scss

@@ -0,0 +1,34 @@
+@import "breakpoints";
+
+@mixin make-cssgrid($columns: $nijmegen-grid-columns, $breakpoints: $nijmegen-grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $nijmegen-infix: breakpoint-infix($breakpoint, $breakpoints); // stylelint-disable-line scss/dollar-variable-default
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .nijmegen-g-col#{$nijmegen-infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is an invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .nijmegen-g-start#{$nijmegen-infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}
+
+.nijmegen-grid {
+  display: grid;
+  gap: $nijmegen-grid-gap;
+  grid-template-columns: repeat($nijmegen-grid-columns, 1fr);
+  grid-template-rows: repeat($nijmegen-grid-rows, 1fr);
+
+  @include make-cssgrid;
+}

package/src/layout.scss

@@ -0,0 +1,3 @@
+@import "container";
+@import "grid";
+@import "spacing";

package/src/spacing.scss

@@ -0,0 +1,166 @@
+@use "sass:map";
+@import "breakpoints";
+@import "~bootstrap/scss/mixins/utilities";
+@import "~bootstrap/scss/vendor/rfs";
+
+/* stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern  */
+$enable-important-utilities: $nijmegen-enable-important-utilities-on-spacing;
+/* stylelint-disable-next-line scss/dollar-variable-pattern  */
+$grid-breakpoints: (
+  xs: $nijmegen-breakpoint-xs,
+  sm: $nijmegen-breakpoint-sm,
+  md: $nijmegen-breakpoint-md,
+  lg: $nijmegen-breakpoint-lg,
+  xl: $nijmegen-breakpoint-xl,
+  xxl: $nijmegen-breakpoint-xxl,
+) !default;
+
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+$utilities: (
+  "margin-inline": (
+    responsive: true,
+    property: margin-inline-start margin-inline-end,
+    class: nijmegen-margin-inline,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "margin-inline-start": (
+    responsive: true,
+    property: margin-inline-start,
+    class: nijmegen-margin-inline-start,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "margin-inline-end": (
+    responsive: true,
+    property: margin-inline-end,
+    class: nijmegen-margin-inline-end,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "padding-inline": (
+    responsive: true,
+    property: padding-inline-start padding-inline-end,
+    class: nijmegen-padding-inline,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "padding-inline-start": (
+    responsive: true,
+    property: padding-inline-start,
+    class: nijmegen-padding-inline-start,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "padding-inline-end": (
+    responsive: true,
+    property: padding-inline-end,
+    class: nijmegen-padding-inline-end,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "margin-block": (
+    responsive: true,
+    property: margin-block-start margin-block-end,
+    class: nijmegen-margin-block,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "margin-block-start": (
+    responsive: true,
+    property: margin-block-start,
+    class: nijmegen-margin-block-start,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "margin-block-end": (
+    responsive: true,
+    property: margin-block-end,
+    class: nijmegen-margin-block-end,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "padding-block": (
+    responsive: true,
+    property: padding-block-start padding-block-end,
+    class: nijmegen-padding-block,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "padding-block-start": (
+    responsive: true,
+    property: padding-block-start,
+    class: nijmegen-padding-block-start,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  "padding-block-end": (
+    responsive: true,
+    property: padding-block-end,
+    class: nijmegen-padding-block-end,
+    values:
+      map.merge(
+        $nijmegen-space,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+) !default;
+
+@import "~bootstrap/scss/utilities/api";