@carbon/grid 11.9.0 → 11.11.0
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 +25 -16
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -18,6 +18,15 @@ instead:
|
|
|
18
18
|
yarn add @carbon/grid
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
+
You can then include the grid by doing the following in your Sass files:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
@use '@carbon/grid';
|
|
25
|
+
|
|
26
|
+
// Emit the flex-grid styles
|
|
27
|
+
@include grid.flex-grid();
|
|
28
|
+
```
|
|
29
|
+
|
|
21
30
|
## Usage
|
|
22
31
|
|
|
23
32
|
_More examples and documentation can be found on this
|
|
@@ -26,22 +35,22 @@ _More examples and documentation can be found on this
|
|
|
26
35
|
`@carbon/grid` has three primitive class types to use in order to structure your
|
|
27
36
|
application. They include:
|
|
28
37
|
|
|
29
|
-
- `
|
|
38
|
+
- `cds--grid`, defines the overall grid context and sets some useful attributes
|
|
30
39
|
like width and margin
|
|
31
|
-
- `
|
|
32
|
-
- `
|
|
40
|
+
- `cds--row`, defines a row of items in a grid
|
|
41
|
+
- `cds--col`, used to define individual columns
|
|
33
42
|
|
|
34
43
|
You can use a combination of these classes to build a layout. For example, if we
|
|
35
44
|
wanted a 4 column layout for a small breakpoint we could use the following
|
|
36
45
|
markup:
|
|
37
46
|
|
|
38
47
|
```html
|
|
39
|
-
<div class="
|
|
40
|
-
<div class="
|
|
41
|
-
<div class="
|
|
42
|
-
<div class="
|
|
43
|
-
<div class="
|
|
44
|
-
<div class="
|
|
48
|
+
<div class="cds--grid">
|
|
49
|
+
<div class="cds--row">
|
|
50
|
+
<div class="cds--col">1/4</div>
|
|
51
|
+
<div class="cds--col">1/4</div>
|
|
52
|
+
<div class="cds--col">1/4</div>
|
|
53
|
+
<div class="cds--col">1/4</div>
|
|
45
54
|
</div>
|
|
46
55
|
</div>
|
|
47
56
|
```
|
|
@@ -56,17 +65,17 @@ one in combination with a column to specify the number of columns to span at a
|
|
|
56
65
|
given breakpoint. For example, we could rewrite the above example to be:
|
|
57
66
|
|
|
58
67
|
```html
|
|
59
|
-
<div class="
|
|
60
|
-
<div class="
|
|
61
|
-
<div class="
|
|
62
|
-
<div class="
|
|
63
|
-
<div class="
|
|
64
|
-
<div class="
|
|
68
|
+
<div class="cds--grid">
|
|
69
|
+
<div class="cds--row">
|
|
70
|
+
<div class="cds--col-sm-1">1/4</div>
|
|
71
|
+
<div class="cds--col-sm-1">1/4</div>
|
|
72
|
+
<div class="cds--col-sm-1">1/4</div>
|
|
73
|
+
<div class="cds--col-sm-1">1/4</div>
|
|
65
74
|
</div>
|
|
66
75
|
</div>
|
|
67
76
|
```
|
|
68
77
|
|
|
69
|
-
The `.
|
|
78
|
+
The `.cds--col-sm-1` class names tells us that this `<div>` should only span one
|
|
70
79
|
column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
|
|
71
80
|
layout will still take up a percentage of the overall width.
|
|
72
81
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/grid",
|
|
3
3
|
"description": "Grid for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.11.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"clean": "rimraf scss/_inlined scss/vendor"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@carbon/layout": "^11.
|
|
35
|
+
"@carbon/layout": "^11.11.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@carbon/cli": "^11.
|
|
39
|
-
"rimraf": "^
|
|
38
|
+
"@carbon/cli": "^11.8.0",
|
|
39
|
+
"rimraf": "^4.0.0"
|
|
40
40
|
},
|
|
41
41
|
"eyeglass": {
|
|
42
42
|
"exports": false,
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"sassDir": "scss",
|
|
45
45
|
"needs": "^1.3.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "36b2a3b42be5bebb706861030d1ec4a21ae47c5f"
|
|
48
48
|
}
|