Skip to content

Commit 6d71de4

Browse files
olivier3lancolivier3lanc
committed
feat: added example JSON: Using multiple classes for a single CSS property
1 parent 451fda7 commit 6d71de4

File tree

3 files changed

+88
-63
lines changed

3 files changed

+88
-63
lines changed

‎json_examples/10_multiple_classes_single_property/build.json‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "bricss",
7+
"screenSizes": {}
8+
},
9+
"tokens": {},
10+
"properties": {
11+
"--foo-tX": {
12+
"prefix": "t",
13+
"generate_from": "",
14+
"values": [
15+
"-50%",
16+
"50%",
17+
"-100%",
18+
"100%"
19+
],
20+
"names": [
21+
"tX-50",
22+
"tX50",
23+
"tX-100",
24+
"tX100"
25+
],
26+
"responsive": false,
27+
"generate_utility": false
28+
},
29+
"--foo-tY": {
30+
"prefix": "t",
31+
"generate_from": "",
32+
"values": [
33+
"-50%",
34+
"50%",
35+
"-100%",
36+
"100%"
37+
],
38+
"names": [
39+
"tY-50",
40+
"tY50",
41+
"tY-100",
42+
"tY100"
43+
],
44+
"responsive": false,
45+
"generate_utility": false
46+
},
47+
"transform": {
48+
"prefix": "t",
49+
"generate_from": "",
50+
"values": [
51+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))",
52+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))",
53+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))",
54+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))",
55+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))",
56+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))",
57+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))",
58+
"translateX(var(--foo-tX, 0)) translateY(var(--foo-tY, 0))"
59+
],
60+
"names": [
61+
"tX-50",
62+
"tX50",
63+
"tX-100",
64+
"tX100",
65+
"tY-50",
66+
"tY50",
67+
"tY-100",
68+
"tY100"
69+
],
70+
"responsive": false,
71+
"generate_utility": false
72+
}
73+
}
74+
}

json_examples/10_bricss_website/build.json renamed to json_examples/20_bricss_website/build.json

File renamed without changes.

‎json_examples/list.json‎

Lines changed: 14 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -8,101 +8,52 @@
88
{
99
"title": "Simpliest",
1010
"description": "No responsive, no tokens, just one property: <code>display</code>",
11-
"jsonUrl": "./json_examples/01_simpliest/build.json",
12-
"stats": {
13-
"screenSizes": 0,
14-
"tokenFamilies": 0,
15-
"tokens": 0,
16-
"properties": 1
17-
}
11+
"jsonUrl": "./json_examples/01_simpliest/build.json"
1812
},
1913
{
2014
"title": "Adjusting CSS property prefix",
2115
"description": "Setting a custom prefix for CSS property item. No responsive, no tokens, just one property: <code>display</code>",
22-
"jsonUrl": "./json_examples/02_changing_css_property_prefix/build.json",
23-
"stats": {
24-
"screenSizes": 0,
25-
"tokenFamilies": 0,
26-
"tokens": 0,
27-
"properties": 1
28-
}
16+
"jsonUrl": "./json_examples/02_changing_css_property_prefix/build.json"
2917
},
3018
{
3119
"title": "Adding utility <code>!important</code>",
3220
"description": "Setting <code>generate_utility: true</code> to a property item",
33-
"jsonUrl": "./json_examples/03_adding_utility/build.json",
34-
"stats": {
35-
"screenSizes": 0,
36-
"tokenFamilies": 0,
37-
"tokens": 0,
38-
"properties": 1
39-
}
21+
"jsonUrl": "./json_examples/03_adding_utility/build.json"
4022
},
4123
{
4224
"title": "Custom value names",
4325
"description": "By default, values are displayed as names but you can add custom names.",
44-
"jsonUrl": "./json_examples/04_custom_value_names/build.json",
45-
"stats": {
46-
"screenSizes": 0,
47-
"tokenFamilies": 0,
48-
"tokens": 0,
49-
"properties": 1
50-
}
26+
"jsonUrl": "./json_examples/04_custom_value_names/build.json"
5127
},
5228
{
5329
"title": "Adding responsive",
5430
"description": "Adding 3 screen sizes",
55-
"jsonUrl": "./json_examples/05_adding_responsive/build.json",
56-
"stats": {
57-
"screenSizes": 3,
58-
"tokenFamilies": 0,
59-
"tokens": 0,
60-
"properties": 1
61-
}
31+
"jsonUrl": "./json_examples/05_adding_responsive/build.json"
6232
},
6333
{
6434
"title": "Adding responsive selectively",
6535
"description": "Responsive is selectively adjustable for each CSS property. The CSS property display is responsive, align-item is not.",
66-
"jsonUrl": "./json_examples/06_adding_responsive_selectively/build.json",
67-
"stats": {
68-
"screenSizes": 3,
69-
"tokenFamilies": 0,
70-
"tokens": 0,
71-
"properties": 2
72-
}
36+
"jsonUrl": "./json_examples/06_adding_responsive_selectively/build.json"
7337
},
7438
{
7539
"title": "Responsive utility",
7640
"description": "The <code>!important</code> keyword may be added to the responsive generation selectively for each CSS property just by setting generate_utility to true and responsive to true.",
77-
"jsonUrl": "./json_examples/07_responsive_utility/build.json",
78-
"stats": {
79-
"screenSizes": 3,
80-
"tokenFamilies": 0,
81-
"tokens": 0,
82-
"properties": 1
83-
}
41+
"jsonUrl": "./json_examples/07_responsive_utility/build.json"
8442
},
8543
{
8644
"title": "With tokens",
8745
"description": "Tokens are lists of names associated to values, organized by families and reusable on multiple CSS property items. This is an example with <code>generate_from</code> is set to a token family (“colors” for this example).",
88-
"jsonUrl": "./json_examples/08_with_tokens/build.json",
89-
"stats": {
90-
"screenSizes": 0,
91-
"tokenFamilies": 1,
92-
"tokens": 9,
93-
"properties": 3
94-
}
46+
"jsonUrl": "./json_examples/08_with_tokens/build.json"
9547
},
9648
{
9749
"title": "With tokens and custom names",
9850
"description": "On each CSS property, you can set standard names and values in addition of tokens.",
99-
"jsonUrl": "./json_examples/09_with_tokens_and_custom_names/build.json",
100-
"stats": {
101-
"screenSizes": 0,
102-
"tokenFamilies": 1,
103-
"tokens": 9,
104-
"properties": 3
105-
}
51+
"jsonUrl": "./json_examples/09_with_tokens_and_custom_names/build.json"
52+
},
53+
{
54+
"title": "Using multiple classes for a single CSS property",
55+
"description": "Advanced usage, for example, how to deal with <code>transform</code> and its mulitple functions available as multiple values?",
56+
"jsonUrl": "./json_examples/10_multiple_classes_single_property/build.json"
10657
},
10758
{
10859
"title": "BRiCSS website",

0 commit comments

Comments
 (0)