@sb1/ffe-grid 13.0.0 → 13.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/less/ffe-grid.less +32 -1
- package/package.json +30 -30
package/README.md
CHANGED
|
@@ -58,6 +58,8 @@ You only have to specify one of these if you want - each column defaults to a 10
|
|
|
58
58
|
for viewports that are not specified (i.e. `.ffe-grid__col--md-6` will be 100 % wide on small
|
|
59
59
|
devices, and 50 % on medium and large screens).
|
|
60
60
|
|
|
61
|
+
A column can be hidden entirely on a given breakpoint by setting the value to `0`, e.g. `.ffe-grid__col--sm-0` to hide it on small screens.
|
|
62
|
+
|
|
61
63
|
### Offset
|
|
62
64
|
|
|
63
65
|
The pattern is like so: `.ffe-grid__col--{size}-offset-{num-of-cols}`
|
|
@@ -82,6 +84,16 @@ The gutter/gap between columns can be controlled using the `.ffe-grid--gap-{size
|
|
|
82
84
|
|
|
83
85
|
The default gap is 16px, equivalent to `.ffe-grid--gap-sm`.
|
|
84
86
|
|
|
87
|
+
The gap value is also applied as a padding to the left and right of the grid.
|
|
88
|
+
|
|
89
|
+
### Center
|
|
90
|
+
|
|
91
|
+
Contents of a grid column can be centered horizontally and vertically using the `.ffe-grid__col--center` modifier.
|
|
92
|
+
|
|
93
|
+
### Center text
|
|
94
|
+
|
|
95
|
+
Text inside a grid column can be centered using the `.ffe-grid__col--center-text` modifier.
|
|
96
|
+
|
|
85
97
|
### Background colors
|
|
86
98
|
|
|
87
99
|
The background color of rows can be changed using modifiers
|
package/less/ffe-grid.less
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
// Mixins
|
|
2
|
-
.create-column(@size, @total, @current:
|
|
2
|
+
.create-column(@size, @total, @current: 0) when (@current <= @total) {
|
|
3
3
|
.ffe-grid__col--@{size}-@{current} {
|
|
4
|
+
display: block;
|
|
4
5
|
grid-column: auto / span (@current);
|
|
6
|
+
|
|
7
|
+
& when (@current = 0) {
|
|
8
|
+
display: none;
|
|
9
|
+
}
|
|
5
10
|
}
|
|
6
11
|
|
|
7
12
|
.create-column(@size, @total, @current + 1);
|
|
@@ -15,33 +20,51 @@
|
|
|
15
20
|
.create-column-offset(@size, @total, @current + 1);
|
|
16
21
|
}
|
|
17
22
|
|
|
23
|
+
.ffe-grid {
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
max-width: @app-width;
|
|
26
|
+
}
|
|
27
|
+
|
|
18
28
|
.ffe-grid__row {
|
|
19
29
|
display: grid;
|
|
20
30
|
gap: @ffe-spacing-sm;
|
|
31
|
+
padding-right: @ffe-spacing-sm;
|
|
32
|
+
padding-left: @ffe-spacing-sm;
|
|
21
33
|
grid-template-columns: repeat(12, 1fr);
|
|
22
34
|
|
|
23
35
|
.ffe-grid--gap-none & {
|
|
24
36
|
gap: 0;
|
|
37
|
+
padding: 0;
|
|
25
38
|
}
|
|
26
39
|
|
|
27
40
|
.ffe-grid--gap-2xs & {
|
|
28
41
|
gap: @ffe-spacing-2xs;
|
|
42
|
+
padding-right: @ffe-spacing-2xs;
|
|
43
|
+
padding-left: @ffe-spacing-2xs;
|
|
29
44
|
}
|
|
30
45
|
|
|
31
46
|
.ffe-grid--gap-xs & {
|
|
32
47
|
gap: @ffe-spacing-xs;
|
|
48
|
+
padding-right: @ffe-spacing-xs;
|
|
49
|
+
padding-left: @ffe-spacing-xs;
|
|
33
50
|
}
|
|
34
51
|
|
|
35
52
|
.ffe-grid--gap-sm & {
|
|
36
53
|
gap: @ffe-spacing-sm;
|
|
54
|
+
padding-right: @ffe-spacing-sm;
|
|
55
|
+
padding-left: @ffe-spacing-sm;
|
|
37
56
|
}
|
|
38
57
|
|
|
39
58
|
.ffe-grid--gap-md & {
|
|
40
59
|
gap: @ffe-spacing-md;
|
|
60
|
+
padding-right: @ffe-spacing-md;
|
|
61
|
+
padding-left: @ffe-spacing-md;
|
|
41
62
|
}
|
|
42
63
|
|
|
43
64
|
.ffe-grid--gap-lg & {
|
|
44
65
|
gap: @ffe-spacing-lg;
|
|
66
|
+
padding-right: @ffe-spacing-lg;
|
|
67
|
+
padding-left: @ffe-spacing-lg;
|
|
45
68
|
}
|
|
46
69
|
|
|
47
70
|
&--padding-2xs {
|
|
@@ -215,6 +238,8 @@
|
|
|
215
238
|
}
|
|
216
239
|
|
|
217
240
|
.ffe-grid__col {
|
|
241
|
+
grid-column: auto / span 12;
|
|
242
|
+
|
|
218
243
|
&--bg-frost-30 {
|
|
219
244
|
background-color: @ffe-farge-frost-30;
|
|
220
245
|
.native & {
|
|
@@ -325,3 +350,9 @@
|
|
|
325
350
|
.create-column(xl, 12);
|
|
326
351
|
.create-column-offset(xl, 12);
|
|
327
352
|
}
|
|
353
|
+
|
|
354
|
+
.ffe-grid__col--center {
|
|
355
|
+
display: flex;
|
|
356
|
+
place-items: center;
|
|
357
|
+
place-content: center;
|
|
358
|
+
}
|
package/package.json
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
2
|
+
"name": "@sb1/ffe-grid",
|
|
3
|
+
"version": "13.0.2",
|
|
4
|
+
"description": "A grid component for use within the FFE framework",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"ffe"
|
|
7
|
+
],
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"author": "SpareBank 1",
|
|
10
|
+
"files": [
|
|
11
|
+
"less"
|
|
12
|
+
],
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "ssh://git@github.com:SpareBank1/designsystem.git"
|
|
16
|
+
},
|
|
17
|
+
"scripts": {
|
|
18
|
+
"lint": "stylelint less/*.less",
|
|
19
|
+
"test": "npm run lint"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@sb1/ffe-core": "^24.0.0",
|
|
23
|
+
"stylelint": "^13.0.0"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"@sb1/ffe-core": "*"
|
|
27
|
+
},
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"access": "public"
|
|
30
|
+
},
|
|
31
|
+
"gitHead": "783ef6b80058399af45613836f5903635ba30ea5"
|
|
32
32
|
}
|