Skip to content

Commit 440543f

Browse files
oscarcarlstromCopilot
oscarcarlstrom
and
Copilot
authored
Add layout grids (#1532)
Introduce new utility and component classes for layout grids, enabling responsive design with defined column spacing and subgrid support. This enhances the layout capabilities for content alignment across pages. --------- Co-authored-by: Copilot <[email protected]>
1 parent 0f8cd6d commit 440543f

File tree

3 files changed

+165
-1
lines changed

3 files changed

+165
-1
lines changed

‎.changeset/kind-peaches-sneeze.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
"@obosbbl/grunnmuren-tailwind": minor
3+
---
4+
5+
## New classes for layout grids
6+
You can now use the classes `layout-grid-gap-x`, `layout-grid`, `layout-grid-container` and `layout-subgrid-1`-`layout-subgrid-12` to set up layout grids pages so that all your content aligns.
7+
8+
9+
### `layout-grid-gap-x`
10+
Defines the layout grid column spacing responsively.
11+
12+
### `layout-grid`
13+
Sets up a responsive 14 column grid with `layout-grid-gap-x`.
14+
15+
### `layout-grid-container`
16+
Combines `layout-grid` with the `container` class, which makes up the new page container.
17+
18+
### `layout-subgrid-1`-`layout-subgrid-12`
19+
Until there is better support for `subgrid` in CSS, you can use these classes to set up subgrids that aligns with `layout-grid`.

‎packages/react/src/__stories__/layout.stories.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { ArrowRight } from '@obosbbl/grunnmuren-icons-react';
2+
import type { Meta } from '@storybook/react-vite';
3+
import { Card, CardLink } from '../card';
4+
import { Content, Heading, Media } from '../content';
5+
import { UNSAFE_Hero as Hero } from '../hero';
6+
7+
const meta: Meta = {
8+
title: 'Layout',
9+
};
10+
11+
export default meta;
12+
13+
export const GridContainer = () => (
14+
<main className="layout-grid-container">
15+
<Hero>
16+
<Content>
17+
<Heading level={1} size="xl">
18+
Jobb i OBOS
19+
</Heading>
20+
<p className="lead">
21+
Bli med å oppfylle boligdrømmer! Vi søker engasjerte og dyktige
22+
personer som vil ta OBOS videre. Søk på våre ledige stillinger!
23+
</p>
24+
</Content>
25+
<Media>
26+
<img
27+
src="https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format"
28+
alt=""
29+
/>
30+
</Media>
31+
</Hero>
32+
</main>
33+
);
34+
35+
export const GridContainerWithSubGrids = () => (
36+
<main className="layout-grid-container layout-gap-y">
37+
<h1 className="heading-xl sm:col-end-9">Dette er OBOS</h1>
38+
<ul className="md:layout-subgrid-12 *:md:col-span-2 *:lg:col-span-3">
39+
<Card role="listitem">
40+
<Content>
41+
<Heading level={2}>
42+
<CardLink href="/bolig">Bolig</CardLink>
43+
</Heading>
44+
<p>Oppfyll boligdrømmen med OBOS!</p>
45+
</Content>
46+
<ArrowRight className="transition-transform group-hover/card:motion-safe:translate-x-1" />
47+
</Card>
48+
<Card role="listitem">
49+
<Content>
50+
<Heading level={2}>
51+
<CardLink href="/medlem">Medlem</CardLink>
52+
</Heading>
53+
<p>Bli medlem i OBOS og få tilgang til eksklusive fordeler!</p>
54+
</Content>
55+
<ArrowRight className="transition-transform group-hover/card:motion-safe:translate-x-1" />
56+
</Card>
57+
<Card role="listitem">
58+
<Content>
59+
<Heading level={2}>
60+
<CardLink href="/bli-bankkunde">Bank</CardLink>
61+
</Heading>
62+
<p>
63+
OBOS Bank tilbyr konkurransedyktige rente på boliglån og sparekonto!
64+
</p>
65+
</Content>
66+
<ArrowRight className="transition-transform group-hover/card:motion-safe:translate-x-1" />
67+
</Card>
68+
<Card role="listitem">
69+
<Content>
70+
<Heading level={2}>
71+
<CardLink href="/medlem-i-obos">Forkjøp</CardLink>
72+
</Heading>
73+
<p>
74+
Som medlem i OBOS har du forkjøpsrett på tusenvis av boliger hvert
75+
år!
76+
</p>
77+
</Content>
78+
<ArrowRight className="transition-transform group-hover/card:motion-safe:translate-x-1" />
79+
</Card>
80+
</ul>
81+
</main>
82+
);

‎packages/tailwind/tailwind-base.css‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,13 @@
108108
@apply bg-white grow;
109109
}
110110

111+
/** Grid column spacing */
112+
@utility layout-grid-gap-x {
113+
@apply sm:gap-x-4 md:gap-x-9 lg:gap-x-12 xl:gap-x-16;
114+
}
115+
111116
@utility layout-gap-x {
112-
@apply gap-x-2 sm:gap-x-4 md:gap-x-9 lg:gap-x-12 xl:gap-x-16;
117+
@apply gap-x-2 layout-grid-gap-x;
113118
}
114119

115120
@utility layout-gap-y {
@@ -196,6 +201,64 @@
196201
}
197202

198203
@layer components {
204+
/*** Grid Layout ***/
205+
206+
.layout-grid,
207+
.layout-grid-container {
208+
/** Grid base: defines the grid columns and their spacing */
209+
@apply layout-grid-gap-x sm:grid-cols-14 grid;
210+
211+
/** Grid container that applies the grid columns, grid spacing and the container component class */
212+
&.layout-grid-container {
213+
@apply container;
214+
/** Make content of the grid span the mid 12 columns as a default (unless it has another explicit col-span class) */
215+
& > * {
216+
@apply sm:col-start-2 sm:col-span-12;
217+
}
218+
}
219+
}
220+
221+
[class*="layout-subgrid-"] {
222+
@apply layout-grid-gap-x grid;
223+
}
224+
225+
[class*="layout-subgrid-1"] {
226+
@apply grid-cols-1;
227+
}
228+
[class*="layout-subgrid-2"] {
229+
@apply grid-cols-2;
230+
}
231+
[class*="layout-subgrid-3"] {
232+
@apply grid-cols-3;
233+
}
234+
[class*="layout-subgrid-4"] {
235+
@apply grid-cols-4;
236+
}
237+
[class*="layout-subgrid-5"] {
238+
@apply grid-cols-5;
239+
}
240+
[class*="layout-subgrid-6"] {
241+
@apply grid-cols-6;
242+
}
243+
[class*="layout-subgrid-7"] {
244+
@apply grid-cols-7;
245+
}
246+
[class*="layout-subgrid-8"] {
247+
@apply grid-cols-8;
248+
}
249+
[class*="layout-subgrid-9"] {
250+
@apply grid-cols-9;
251+
}
252+
[class*="layout-subgrid-10"] {
253+
@apply grid-cols-10;
254+
}
255+
[class*="layout-subgrid-11"] {
256+
@apply grid-cols-11;
257+
}
258+
[class*="layout-subgrid-12"] {
259+
@apply grid-cols-12;
260+
}
261+
199262
/*** Link List component styles ***/
200263
.link-list-container {
201264
@apply @container;

0 commit comments

Comments
 (0)