Skip to content

Commit 0afc030

Browse files
olivier3lancolivier3lanc
committed
feat: add dynamic examples
1 parent 73af9e9 commit 0afc030

File tree

12 files changed

+533
-171
lines changed

12 files changed

+533
-171
lines changed

‎docs/assets/js/bricss.js‎

Lines changed: 142 additions & 109 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,8 @@ <h1 class="d-flex | m-0" d-none="xs,sm">
115115
<form class="d-flex ai-center | pos-relative"
116116
w-100="xs,sm"
117117
autocomplete="off"
118-
onsubmit="event.preventDefault()">
118+
onsubmit="event.preventDefault()"
119+
disabled>
119120
<input type="search"
120121
id="dsg__search__input"
121122
class="ff-lead-400 fs-3 | p-2 pr-8 | bc-primary-200 c-primary-700 b-0 brad-2"
@@ -152,15 +153,17 @@ <h1 class="d-flex | m-0" d-none="xs,sm">
152153
<nav class="d-flex ai-center | bc-primary-700"
153154
gap-5="md,lg"
154155
gap-3="xs,sm">
155-
<button type="button"
156+
<button id="dsg__doc__copy_css_btn"
157+
type="button"
156158
class="
157159
d-flex gap-2
158160
pl-3 pr-3 pt-2 pb-2
159161
ff-lead-700 tt-uppercase fs-2 td-none
160162
bwidth-1 bstyle-solid bcolor-tertiary-500 bc-primary-700 c-tertiary-500 brad-1
161163
cur-pointer"
162164
title="Copy CSS content to clipboard"
163-
onclick="ui.copyToClipboard(bricss._generatedCSS, null, 'CSS content was copied to clipboard')">
165+
onclick="ui.copyToClipboard(bricss._generatedCSS, null, 'CSS content was copied to clipboard')"
166+
disabled>
164167
Copy
165168
</button>
166169
<a id="dsg__doc__download_link"
@@ -251,9 +254,6 @@ <h1 class="d-flex | m-0" d-none="xs,sm">
251254
</footer>
252255

253256
<script src="./docs/assets/js/bricss.js"></script>
254-
<script>
255-
bricss.getBuild('build.json');
256-
</script>
257257
<script src="./docs/assets/js/ui.js"></script>
258258
<script src="./docs/assets/js/c-toggle.js"></script>
259259
<script src="./docs/assets/js/gototop.js"></script>

‎json_examples/01_simpliest/build.json‎

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,69 +9,15 @@
99
"tokens": {},
1010
"properties": {
1111
"display": {
12-
"prefix": "d",
12+
"prefix": "dis",
1313
"generate_from": "",
1414
"values": [
1515
"flex",
1616
"inline-flex",
1717
"none"
1818
],
1919
"names": [],
20-
"responsive": true,
21-
"generate_utility": true
22-
},
23-
"align-items": {
24-
"prefix": "ai",
25-
"generate_from": "",
26-
"values": [
27-
"baseline",
28-
"center",
29-
"flex-start",
30-
"flex-end"
31-
],
32-
"names": [
33-
"baseline",
34-
"center",
35-
"start",
36-
"end"
37-
],
38-
"responsive": true,
39-
"generate_utility": false
40-
},
41-
"justify-content": {
42-
"prefix": "jc",
43-
"generate_from": "",
44-
"values": [
45-
"center",
46-
"space-between",
47-
"space-around",
48-
"flex-start",
49-
"flex-end"
50-
],
51-
"names": [
52-
"center",
53-
"space-between",
54-
"space-around",
55-
"start",
56-
"end"
57-
],
58-
"responsive": true,
59-
"generate_utility": false
60-
},
61-
"flex-direction": {
62-
"prefix": "fd",
63-
"generate_from": "",
64-
"values": ["column"],
65-
"names": [],
66-
"responsive": true,
67-
"generate_utility": false
68-
},
69-
"flex-wrap": {
70-
"prefix": "fw",
71-
"generate_from": "",
72-
"values": ["wrap"],
73-
"names": [],
74-
"responsive": true,
20+
"responsive": false,
7521
"generate_utility": false
7622
}
7723
}

‎json_examples/02_changing_css_property_prefix/build.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "foo",
7+
"screenSizes": {}
8+
},
9+
"tokens": {},
10+
"properties": {
11+
"display": {
12+
"prefix": "d",
13+
"generate_from": "",
14+
"values": [
15+
"flex",
16+
"inline-flex",
17+
"none"
18+
],
19+
"names": [],
20+
"responsive": false,
21+
"generate_utility": false
22+
}
23+
}
24+
}

‎json_examples/03_adding_utility/build.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "foo",
7+
"screenSizes": {}
8+
},
9+
"tokens": {},
10+
"properties": {
11+
"display": {
12+
"prefix": "d",
13+
"generate_from": "",
14+
"values": [
15+
"flex",
16+
"inline-flex",
17+
"none"
18+
],
19+
"names": [],
20+
"responsive": false,
21+
"generate_utility": true
22+
}
23+
}
24+
}

‎json_examples/04_custom_value_names/build.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "foo",
7+
"screenSizes": {}
8+
},
9+
"tokens": {},
10+
"properties": {
11+
"display": {
12+
"prefix": "d",
13+
"generate_from": "",
14+
"values": [
15+
"flex",
16+
"inline-flex",
17+
"none"
18+
],
19+
"names": ["fx", "ifx"],
20+
"responsive": false,
21+
"generate_utility": false
22+
}
23+
}
24+
}

‎json_examples/05_adding_responsive/build.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "foo",
7+
"screenSizes": {
8+
"xs": ["0px", "599px"],
9+
"sm": ["600px", "959px"],
10+
"lg": ["960px", "infinite"]
11+
}
12+
},
13+
"tokens": {},
14+
"properties": {
15+
"display": {
16+
"prefix": "d",
17+
"generate_from": "",
18+
"values": [
19+
"flex",
20+
"inline-flex",
21+
"none"
22+
],
23+
"names": [],
24+
"responsive": true,
25+
"generate_utility": false
26+
}
27+
}
28+
}

‎json_examples/06_adding_responsive_selectively/build.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "foo",
7+
"screenSizes": {
8+
"xs": ["0px", "599px"],
9+
"sm": ["600px", "959px"],
10+
"lg": ["960px", "infinite"]
11+
}
12+
},
13+
"tokens": {},
14+
"properties": {
15+
"display": {
16+
"prefix": "d",
17+
"generate_from": "",
18+
"values": [
19+
"flex",
20+
"inline-flex",
21+
"none"
22+
],
23+
"names": [],
24+
"responsive": true,
25+
"generate_utility": false
26+
},
27+
"align-items": {
28+
"prefix": "ai",
29+
"generate_from": "",
30+
"values": [
31+
"baseline",
32+
"center",
33+
"flex-start",
34+
"flex-end"
35+
],
36+
"names": [
37+
"baseline",
38+
"center",
39+
"start",
40+
"end"
41+
],
42+
"responsive": false,
43+
"generate_utility": false
44+
}
45+
}
46+
}

‎json_examples/07_responsive_utility/build.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "foo",
7+
"screenSizes": {
8+
"xs": ["0px", "599px"],
9+
"sm": ["600px", "959px"],
10+
"lg": ["960px", "infinite"]
11+
}
12+
},
13+
"tokens": {},
14+
"properties": {
15+
"display": {
16+
"prefix": "d",
17+
"generate_from": "",
18+
"values": [
19+
"flex",
20+
"inline-flex",
21+
"none"
22+
],
23+
"names": [],
24+
"responsive": true,
25+
"generate_utility": true
26+
}
27+
}
28+
}

‎json_examples/08_with_tokens/build.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"settings": {
3+
"separator": "-",
4+
"responsiveSeparator": "--",
5+
"utilitiesPrefix": "u",
6+
"cssVariablesPrefix": "foo",
7+
"screenSizes": {}
8+
},
9+
"tokens": {
10+
"colors": {
11+
"primary-100": "#F1F4F4",
12+
"primary-200": "#E3EAEA",
13+
"primary-300": "#B9C1C2",
14+
"primary-400": "#7E8485",
15+
"primary-500": "#313435",
16+
"primary-600": "#232A2D",
17+
"primary-700": "#182026",
18+
"primary-800": "#0F171E",
19+
"primary-900": "#091019"
20+
}
21+
},
22+
"properties": {
23+
"background-color": {
24+
"prefix": "bc",
25+
"generate_from": "colors",
26+
"values": [],
27+
"names": [],
28+
"responsive": false,
29+
"generate_utility": false
30+
},
31+
"color": {
32+
"prefix": "c",
33+
"generate_from": "colors",
34+
"values": [],
35+
"names": [],
36+
"responsive": false,
37+
"generate_utility": false
38+
},
39+
"border-color": {
40+
"prefix": "bcolor",
41+
"generate_from": "colors",
42+
"values": [],
43+
"names": [],
44+
"responsive": false,
45+
"generate_utility": false
46+
}
47+
}
48+
}

0 commit comments

Comments
 (0)