Skip to content

Commit 9143a5c

Browse files
FrontendlandFrontendland
committed
✨ Add utility classes for flexbox
1 parent 77c088f commit 9143a5c

File tree

6 files changed

+216
-62
lines changed

6 files changed

+216
-62
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ The `Setup` mixin can also accept the following options:
9999
| Property | Default value | Purpose |
100100
|-----------|---------------|---------|
101101
| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
102-
| `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
102+
| `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
103103
| `includeTooltip` | `true` | Adds styles for using tooltips.
104104
| `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
105105

‎src/pages/resets.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Card from '@components/Card/Card.astro'
44
---
55

66
<Layout>
7-
<h1>Reset styles</h1>
7+
<h1>CSS Resets</h1>
88

99
<Card>
1010
<blockquote>

‎src/pages/utilities.astro

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
import Box from '@static/Box.astro'
4+
5+
import Card from '@components/Card/Card.astro'
6+
7+
const spacings = [
8+
'xxs',
9+
'xs',
10+
'sm',
11+
'md',
12+
'default',
13+
'lg',
14+
'xl',
15+
'xl2',
16+
'xl3',
17+
'xl4',
18+
'xl5'
19+
]
20+
21+
const flexDirections = [
22+
'row',
23+
'column',
24+
'row-reverse',
25+
'column-reverse',
26+
]
27+
28+
const verticalAlignments = [
29+
'items-center',
30+
'items-start',
31+
'items-end'
32+
]
33+
34+
const horizontalAlignments = [
35+
'justify-center',
36+
'justify-start',
37+
'justify-end',
38+
'justify-between',
39+
'justify-around',
40+
'justify-evenly'
41+
]
42+
43+
const wraps = [
44+
'wrap',
45+
'nowrap',
46+
'wrap-reverse'
47+
]
48+
---
49+
50+
<Layout>
51+
<h1>CSS Utility Classes</h1>
52+
53+
<h3>Container</h3>
54+
<Card>
55+
<div class="container">
56+
<pre>.container with a max-width and padding</pre>
57+
</div>
58+
</Card>
59+
60+
<h3>Flex</h3>
61+
<Card className="my" title="Gaps">
62+
{spacings.map(space => (
63+
<div class:list={['flex mb', space]}>
64+
<Box>{space}</Box>
65+
<Box />
66+
<Box />
67+
<Box />
68+
<Box />
69+
</div>
70+
))}
71+
</Card>
72+
<div class="grid sm-2 lg-4 my">
73+
{flexDirections.map(direction => (
74+
<Card title={`Direction: ${direction}`}>
75+
<div class:list={['flex xs wrap', direction]}>
76+
<Box>1</Box>
77+
<Box>2</Box>
78+
<Box>3</Box>
79+
<Box>4</Box>
80+
</div>
81+
</Card>
82+
))}
83+
</div>
84+
<div class="grid sm-2 lg-3 my">
85+
{verticalAlignments.map(alignment => (
86+
<Card title={`Horziontal alignment: ${alignment}`}>
87+
<div
88+
class:list={['flex xs wrap', alignment]}
89+
style="min-height: 200px"
90+
>
91+
<Box>1</Box>
92+
<Box>2</Box>
93+
<Box>3</Box>
94+
</div>
95+
</Card>
96+
))}
97+
</div>
98+
<div class="grid sm-2 lg-3 my">
99+
{horizontalAlignments.map(alignment => (
100+
<Card title={`Horziontal alignment: ${alignment}`}>
101+
<div class:list={['flex xs wrap', alignment]}>
102+
<Box>1</Box>
103+
<Box>2</Box>
104+
<Box>3</Box>
105+
</div>
106+
</Card>
107+
))}
108+
</div>
109+
<div class="grid sm-2 lg-3 my">
110+
{wraps.map(wrap => (
111+
<Card title={`Wrap: ${wrap}`}>
112+
<div class:list={['flex xs wrap', wrap]}>
113+
<Box>1</Box>
114+
<Box>2</Box>
115+
<Box>3</Box>
116+
<Box>4</Box>
117+
<Box>5</Box>
118+
</div>
119+
</Card>
120+
))}
121+
</div>
122+
</Layout>

‎src/scss/global/utility.scss

Lines changed: 76 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,106 @@
1+
@use 'sass:string';
2+
@use 'sass:meta';
3+
@use 'sass:list';
4+
@use 'sass:map';
15
@use '../config' as *;
26

7+
$breakpointMap: (
8+
'xs': 3,
9+
'sm': 4,
10+
'md': 6,
11+
'lg': 8
12+
);
13+
14+
$alignments: (
15+
'items-center': center,
16+
'items-start': flex-start,
17+
'items-end': flex-end,
18+
'items-baseline': baseline,
19+
'items-stretch': stretch,
20+
21+
'justify-center': center,
22+
'justify-start': flex-start,
23+
'justify-end': flex-end,
24+
'justify-between': space-between,
25+
'justify-around': space-around,
26+
'justify-evenly': space-evenly,
27+
'justify-stretch': stretch
28+
);
29+
330
@mixin utility() {
431
.container {
5-
margin: 0 auto;
32+
@include spacing(auto-none, px-default);
633
max-width: 1200px;
7-
padding: 0 20px;
834
}
935

10-
.grid {
11-
display: grid;
12-
gap: 20px;
13-
14-
&.col-2 {
15-
grid-template-columns: repeat(2, minmax(0, 1fr));
36+
// Gaps
37+
.flex, .grid {
38+
@each $key, $value in $spacing {
39+
$numberList: ('2', '3', '4', '5');
40+
$firstLetter: string.slice($key, 1, 1);
41+
$class: $key;
42+
43+
@if (list.index($numberList, $firstLetter)) {
44+
$class: string.slice($key, 2, -1) + $firstLetter;
45+
}
46+
47+
&.#{$class} { gap: $value; }
1648
}
1749
}
1850

19-
.flex {
20-
display: flex;
21-
gap: 20px;
22-
23-
&.column {
24-
flex-direction: column;
25-
}
26-
27-
&.xs {
28-
gap: 5px;
29-
}
30-
31-
&.sm {
32-
gap: 10px;
33-
}
34-
35-
&.wrap {
36-
flex-wrap: wrap;
37-
}
38-
39-
&.center {
40-
justify-content: center;
41-
align-items: center;
42-
}
43-
44-
&.justify-center {
45-
justify-content: center;
46-
}
47-
48-
&.items-center {
49-
align-items: center;
50-
}
51-
52-
&.items-start {
53-
align-items: flex-start;
51+
// Alignments
52+
@each $key, $value in $alignments {
53+
.#{$key} {
54+
@if (string.index($key, 'items')) {
55+
align-items: $value;
56+
} @else {
57+
justify-content: $value;
58+
}
5459
}
5560
}
5661

57-
.my {
58-
margin: 20px auto;
62+
.flex.center,
63+
.grid.center {
64+
justify-content: center;
65+
align-items: center;
5966
}
6067

61-
@include media('md') {
62-
.grid.md-2 {
63-
grid-template-columns: repeat(2, minmax(0, 1fr));
64-
}
68+
.flex {
69+
@include layout(flex, default);
6570

66-
.grid.md-3 {
67-
grid-template-columns: repeat(3, minmax(0, 1fr));
71+
@each $direction in $flexDirectionValues {
72+
&.#{$direction} {
73+
flex-direction: $direction;
74+
}
6875
}
6976

70-
.grid.md-4 {
71-
grid-template-columns: repeat(4, minmax(0, 1fr));
77+
@each $wrap in $flexWrapValues {
78+
&.#{$wrap} {
79+
flex-wrap: $wrap;
80+
}
7281
}
7382
}
7483

75-
@include media('lg') {
76-
.grid.lg-2 {
84+
.grid {
85+
@include layout(grid, default);
86+
87+
&.col-2 {
7788
grid-template-columns: repeat(2, minmax(0, 1fr));
7889
}
7990

80-
.grid.lg-3 {
91+
&.col-3 {
8192
grid-template-columns: repeat(3, minmax(0, 1fr));
8293
}
94+
}
8395

84-
.grid.lg-4 {
85-
grid-template-columns: repeat(4, minmax(0, 1fr));
96+
// Grid columns
97+
@each $key, $value in $breakpoints {
98+
@include media($key) {
99+
@for $i from 2 to map.get($breakpointMap, $key) + 1 {
100+
.grid.#{$key}-#{$i} {
101+
grid-template-columns: repeat($i, minmax(0, 1fr));
102+
}
103+
}
86104
}
87105
}
88106
}

‎src/scss/setup.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
$config: (
44
includeResets: true,
5-
includeHelperClasses: true,
5+
includeUtilities: true,
66
includeTooltip: true,
77
includeScrollbarStyles: true
88
);
@@ -25,7 +25,7 @@ body {
2525
@include resets();
2626
}
2727

28-
@if (config('includeHelperClasses')) {
28+
@if (config('includeUtilities')) {
2929
@include utility();
3030
}
3131

‎src/static/Box.astro

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div><slot /></div>
2+
3+
<style lang="scss">
4+
@import '../scss/config.scss';
5+
6+
div {
7+
@include size(80px);
8+
@include border-radius(sm);
9+
@include background(primary-50);
10+
@include border(1px, primary-40);
11+
@include layout(flex, center);
12+
@include typography(sm, primary-20);
13+
}
14+
</style>

0 commit comments

Comments
 (0)