- {forEach(SCSS_VARIABLES.container, ({ key, value }) => (
-
{value['max-width']}
- ))}
-
-
-
- Container padding
-
- {forEach(SCSS_VARIABLES.container, ({ key, value }) => (
-
{value.padding}
- ))}
-
-
-
-
- Container-Fluid padding
-
- {forEach(SCSS_VARIABLES.container, ({ key, value }) => (
-
{value.fluid.padding}
- ))}
-
-
-);
diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx b/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx
index d2852c96ea..065b53701d 100644
--- a/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx
@@ -1,47 +1,34 @@
import { Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
-import { ContainersTable, SCSS_VARIABLES } from './containers.blocks';
import * as ContainerStories from './containers.stories';
# Containers
-
Containers are a fundamental building block of our Design-System that contain, pad, and align your content within a given device or viewport. They are required, when using our grid-system. While containers can be nested, most layouts do not require a nested container.
+
+ Containers are essential layout elements ensuring content is aligned and properly padded across all devices and viewports.
+
-We can distinguish between two different container types:
+
+ Containers are required when using the grid system.
+
-- .container, which defines a max-width on some breakpoints.
-- .container-fluid, which is width: 100% at all breakpoints.
+There is two types of containers:
-
+## Container
-## Default container
-
-Our default `.container` class is a responsive, fixed-width container.
+The `.container` adapts its width based on the viewport size, but it will not exceed 1280px.
+This ensures content stays centered and does not stretch too wide on large screens.
-
+
`} language="scss"/>
-## Fluid containers
+## Fluid Container
-Use `.container-fluid` for a full width container, spanning the entire width of the viewport on every breakpoint.
+The `.container-fluid` spans the entire width of the viewport, regardless of its size.
+Use this for layouts where the content should stretch edge-to-edge, even on large screens.
-
+
`} language="scss"/>
-
-## CSS
-
-When using our source Sass files, you have the option of using Sass variables for customization (not recommended).
-
-### Sass variables
-
- `$${key}: ${formatAsMap(value)};`)
- .join('\n')}
->
diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.module.scss b/packages/documentation/src/stories/foundation/layout/containers/containers.module.scss
index 4c578c2f7f..0ffb682d47 100644
--- a/packages/documentation/src/stories/foundation/layout/containers/containers.module.scss
+++ b/packages/documentation/src/stories/foundation/layout/containers/containers.module.scss
@@ -3,7 +3,6 @@
@use '../shared.module' as shared;
:export {
- // Variables used in the spec table (some variables used on the page are defined in the shared module)
@each $breakpoint, $value in post.$grid-breakpoints {
container_#{$breakpoint}_max-width: map.get(post.$container-max-widths, $breakpoint) or none;
container_#{$breakpoint}_padding: map.get(post.$grid-container-padding, $breakpoint);
@@ -12,19 +11,4 @@
$breakpoint
);
}
-
- // Variables to expose under sass variables section
- @each $breakpoint, $value in post.$grid-breakpoints {
- variables_container-max-widths_#{$breakpoint}: map.get(post.$container-max-widths, $breakpoint);
- variables_grid-container-padding_#{$breakpoint}: map.get(
- post.$grid-container-padding,
- $breakpoint
- ) or
- none;
- variables_grid-container-fluid-padding_#{$breakpoint}: map.get(
- post.$grid-container-fluid-padding,
- $breakpoint
- ) or
- none;
- }
}
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss b/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss
deleted file mode 100644
index 947e459731..0000000000
--- a/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-// Creates a wrapper for a series of columns
-@include post.make-row();
-
-// Make the column element grid-ready (applying everything but the width)
-@include post.make-col-ready();
-
-// Without optional size values, the mixin will create equal columns (similar to using .col)
-@include post.make-col();
-@include post.make-col($size, $columns: post.$grid-columns);
-
-// Offset with margins
-@include post.make-col-offset($size, $columns: post.$grid-columns);
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
deleted file mode 100644
index 2af6b4102a..0000000000
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { parse } from '@/utils/sass-export';
-import { forEach } from '@/utils/react';
-import { SpecTable } from '@/stories/foundation/layout/shared.blocks';
-import scss from './grid.module.scss';
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export const SCSS_VARIABLES: any = parse(scss);
-export const GridTable = () => (
-
-
-
Class prefix
- {forEach(SCSS_VARIABLES.breakpoint, ({ key, value }) => (
-
-
-);
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
index afeaae780f..3ac9b81297 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
@@ -1,10 +1,10 @@
import { Canvas, Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
-import { GridTable, SCSS_VARIABLES } from './grid.blocks';
-import * as GridStories from './grid.stories';
-import './grid.styles.scss';
+import { parse } from '@/utils/sass-export';
+import scss from '../shared.module.scss';
import SampleContainer from './grid-container.sample.html?raw';
-import SampleScssMixins from './grid-scss-mixins.sample.scss?raw';
+import * as GridStories from './grid.stories';
+
+export const BREAKPOINT_COUNT = parse(scss)['breakpoint-count'];
@@ -12,7 +12,7 @@ import SampleScssMixins from './grid-scss-mixins.sample.scss?raw';
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a
- twelve column system, {SCSS_VARIABLES['breakpoint-count']} default responsive tiers,
+ twelve column system, {BREAKPOINT_COUNT} default responsive tiers,
Sass variables and mixins, and dozens of predefined classes.
@@ -35,7 +35,7 @@ The above example creates three equal-width columns across all devices and viewp
Breaking it down, here’s how the grid system comes together:
-- **Our grid supports {SCSS_VARIABLES['breakpoint-count']} responsive breakpoints.** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it. This means you can control container and column sizing and behavior by each breakpoint.
+- **Our grid supports {BREAKPOINT_COUNT} responsive breakpoints.** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it. This means you can control container and column sizing and behavior by each breakpoint.
- **Container (e.g. `.container`) center and horizontally pad your content.**
Don't nest `.containers`, but use them (for example) as a wrapper for your content area:
@@ -44,13 +44,6 @@ Breaking it down, here’s how the grid system comes together:
- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
- **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes, you can use the grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
-## Grid options
-
-Our grid system can adapt across all {SCSS_VARIABLES['breakpoint-count']} breakpoints.
-Each of these breakpoints have their own specifications, a unique class prefix, and some modifiers.
-
-
-
## Auto-layout columns
Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.
@@ -75,7 +68,7 @@ Use `.col-{breakpoint}-auto` classes to size columns based on the natural width
## Responsive classes
-Our grid includes {SCSS_VARIABLES['breakpoint-count']} tiers of predefined classes for building complex responsive layouts.
+Our grid includes {BREAKPOINT_COUNT} tiers of predefined classes for building complex responsive layouts.
### All breakpoints
@@ -116,25 +109,3 @@ To nest your content with the default grid, add a new `.row` and set of `.col-*`
Note: the style in this example is applied to the column to visually better understand nesting. However, it's recommended to apply the style on a child element of the column.
-
-## CSS
-
-When using our source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
-
-### Sass variables
-
-Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
-
- `$${key}: ${formatAsMap(value)};`)
- .join('\n')}
->
-
-### Sass mixins
-
-Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
-
-
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss b/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss
deleted file mode 100644
index cd9c6968b0..0000000000
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use '@swisspost/design-system-styles/core' as post;
-@use '../shared.module' as shared;
-
-:export {
- // Variables used in the spec table (some variables used on the page are defined in the shared module)
- grid-columns: post.$grid-columns;
-
- @each $breakpoint, $value in post.$grid-breakpoints {
- grid_#{$breakpoint}_gutter-width: map.get(post.$grid-gutter-x, $breakpoint);
- }
-
- // Variables to expose under sass variables section
- variables_grid-columns: post.$grid-columns;
- variables_grid-row-columns: post.$grid-row-columns;
-
- @each $breakpoint, $value in post.$grid-breakpoints {
- variables_grid-gutter-x_#{$breakpoint}: map.get(post.$grid-gutter-x, $breakpoint);
- }
-}
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
index c930e97aef..8d9e7dcd47 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
@@ -1,6 +1,7 @@
import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
import { html } from 'lit';
import { MetaExtended } from '@root/types';
+import './grid.styles.scss';
const meta: MetaExtended = {
id: '7240f2ef-216a-490e-9bd8-c0cef19f7b31',
@@ -9,9 +10,9 @@ const meta: MetaExtended = {
badges: [],
},
decorators: [
- (story: StoryFn, { args, context }: StoryContext) => html`
-