@natachah/vanilla-frontend 0.2.9 → 0.3.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/docs/main-demo.js +2 -0
- package/docs/main.js +1 -1
- package/docs/pages/base/layout.html +131 -0
- package/docs/pages/components/button.html +9 -10
- package/docs/pages/components/disclosure.html +0 -139
- package/docs/pages/components/loading.html +4 -4
- package/docs/pages/{components → customs}/badge.html +4 -8
- package/docs/pages/{components → customs}/breadcrumb.html +1 -1
- package/docs/pages/{components → customs}/card.html +4 -8
- package/docs/pages/{components → customs}/list.html +0 -65
- package/docs/pages/{components → customs}/slider.html +14 -29
- package/docs/pages/demo/layout.html +85 -0
- package/docs/pages/quick-start/customization.html +115 -87
- package/docs/pages/quick-start/mixins.html +22 -54
- package/docs/src/js/doc-layout.js +13 -9
- package/natachah-vanilla-frontend-0.3.0.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +58 -87
- package/scss/base/_layout.scss +61 -0
- package/scss/base/_typography.scss +2 -2
- package/scss/base/index.scss +1 -0
- package/scss/components/_badge.scss +12 -0
- package/scss/components/_button.scss +12 -0
- package/scss/components/_card.scss +12 -0
- package/scss/components/_disclosure.scss +0 -3
- package/scss/components/index.scss +3 -3
- package/scss/themes/_root.scss +43 -4
- package/scss/vanilla-frontend-doc.scss +34 -0
- package/docs/pages/test.html +0 -15
- package/natachah-vanilla-frontend-0.2.9.tgz +0 -0
- package/scss/abstracts/_options.scss +0 -44
- /package/docs/pages/{components → customs}/drawer.html +0 -0
- /package/docs/pages/{components → customs}/dropdown.html +0 -0
- /package/docs/pages/{components → customs}/grid.html +0 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Layout > Demo</title>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
#content {
|
|
11
|
+
--subgrid-gap-block: 1rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.container-full {
|
|
15
|
+
background-color: #eee;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.subgrid>div {
|
|
19
|
+
grid-column: -1 / 1;
|
|
20
|
+
outline: 1px dashed #000;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@media (min-width: 720px) {
|
|
24
|
+
.subgrid>div {
|
|
25
|
+
grid-column: span 3;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (min-width: 1024px) {
|
|
30
|
+
.subgrid>div {
|
|
31
|
+
grid-column: span 6;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@media (min-width: 1440px) {}
|
|
36
|
+
</style>
|
|
37
|
+
|
|
38
|
+
</head>
|
|
39
|
+
|
|
40
|
+
<body data-preload>
|
|
41
|
+
|
|
42
|
+
<header>
|
|
43
|
+
<div class="container">
|
|
44
|
+
<p>The header !</p>
|
|
45
|
+
<a href="/pages/base/layout.html">Go back to documentation</a>
|
|
46
|
+
</div>
|
|
47
|
+
</header>
|
|
48
|
+
<main id="content">
|
|
49
|
+
|
|
50
|
+
<section class="container">
|
|
51
|
+
<h1>Classic container</h1>
|
|
52
|
+
<p>This is a demo for the default layout CSS that you can use as starter for your website !</p>
|
|
53
|
+
<p>This section as the <code>.container</code> to display is content into the center of the layout.</p>
|
|
54
|
+
</section>
|
|
55
|
+
|
|
56
|
+
<section class="container-full">
|
|
57
|
+
<h2>Full container</h2>
|
|
58
|
+
<p>This section as the <code>.container-full</code> to display is content into the full layout.</p>
|
|
59
|
+
</section>
|
|
60
|
+
|
|
61
|
+
<section class="container subgrid">
|
|
62
|
+
<div>
|
|
63
|
+
<h2>Classic container with subgrid</h2>
|
|
64
|
+
<p>You can add the <code>.subgrid</code> to a <code>.container</code> to re-use the layout grid.</p>
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
67
|
+
|
|
68
|
+
<section class="container-full subgrid">
|
|
69
|
+
<div>
|
|
70
|
+
<h2>Full container with subgrid</h2>
|
|
71
|
+
<p>You can add also the <code>.subgrid</code> to a <code>.container-full</code> to re-use the layout grid.</p>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
|
|
75
|
+
</main>
|
|
76
|
+
<footer>
|
|
77
|
+
<div class="container">
|
|
78
|
+
<p>The footer !</p>
|
|
79
|
+
</div>
|
|
80
|
+
</footer>
|
|
81
|
+
|
|
82
|
+
<script type="module" src="/main-demo.js"></script>
|
|
83
|
+
</body>
|
|
84
|
+
|
|
85
|
+
</html>
|
|
@@ -28,71 +28,109 @@
|
|
|
28
28
|
<doc-code data-type="css">
|
|
29
29
|
:root {
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
31
|
+
// Typography
|
|
32
|
+
--font-size: 16px;
|
|
33
|
+
--line-height: 1.5;
|
|
34
|
+
--font-family: Arial;
|
|
35
|
+
--font-weight: normal;
|
|
36
|
+
--font-weight-light: 300;
|
|
37
|
+
--font-weight-medium: 500;
|
|
38
|
+
--font-weight-bold: 600;
|
|
39
|
+
|
|
40
|
+
--font-size-h1: 2.25em; // 36px
|
|
41
|
+
--font-size-h2: 2.00em; // 32px
|
|
42
|
+
--font-size-h3: 1.75em; // 28px
|
|
43
|
+
--font-size-h4: 1.50em; // 24px
|
|
44
|
+
--font-size-h5: 1.25em; // 20px
|
|
45
|
+
--font-size-h6: 1.125em; // 18px
|
|
46
|
+
--font-size-large: 1.25em;
|
|
47
|
+
--font-size-medium: 1.125em;
|
|
48
|
+
--font-size-small: .875em;
|
|
49
|
+
|
|
50
|
+
// Anchor
|
|
51
|
+
--decoration: none;
|
|
52
|
+
|
|
53
|
+
// Layouts
|
|
54
|
+
--padding-inline: .75em;
|
|
55
|
+
--padding-block: .5em;
|
|
56
|
+
|
|
57
|
+
// Border
|
|
58
|
+
--border-size: 1px;
|
|
59
|
+
--border-style: solid;
|
|
60
|
+
--border-radius: .25rem;
|
|
61
|
+
|
|
62
|
+
// Outline (:focus)
|
|
63
|
+
--outline-size: 3px;
|
|
64
|
+
--outline-style: solid;
|
|
65
|
+
--outline-offset: 0;
|
|
66
|
+
//--outline-color: var(--color-primary); To override default behavior
|
|
67
|
+
|
|
68
|
+
// Backdrop
|
|
69
|
+
--backdrop-color: rgba(255, 255, 255, .5);
|
|
70
|
+
|
|
71
|
+
// Hover (color-mix)
|
|
72
|
+
--hover-color: black;
|
|
73
|
+
--hover-percent: 5%;
|
|
74
|
+
|
|
75
|
+
// Active (color-mix)
|
|
76
|
+
--active-color: black;
|
|
77
|
+
--active-percent: 10%;
|
|
78
|
+
|
|
79
|
+
// Focus (color-mix)
|
|
80
|
+
--focus-color: currentColor;
|
|
81
|
+
--focus-percent: 50%;
|
|
82
|
+
|
|
83
|
+
// Disabled
|
|
84
|
+
--disabled-opacity: 50%;
|
|
85
|
+
|
|
86
|
+
// Colors
|
|
87
|
+
--color-body: white;
|
|
88
|
+
--color-font: black;
|
|
89
|
+
--color-primary: #B790E5;
|
|
90
|
+
--color-error: #DC3030;
|
|
91
|
+
--color-success: #008A00;
|
|
92
|
+
--color-warning: #FFA500;
|
|
93
|
+
|
|
94
|
+
// Contrasts
|
|
95
|
+
--color-warning-contrast: black;
|
|
96
|
+
|
|
97
|
+
// Form
|
|
98
|
+
--form-border-color: currentColor;
|
|
99
|
+
--form-active-background: color-mix(in srgb, var(--form-background, transparent), var(--active-color, currentColor) 40%);
|
|
100
|
+
|
|
101
|
+
// Icons
|
|
102
|
+
--icon-external: url('data:image/svg+xml,...');
|
|
103
|
+
--icon-date: url('data:image/svg+xml,...');
|
|
104
|
+
--icon-time: url('data:image/svg+xml,...');
|
|
105
|
+
--icon-file: url('data:image/svg+xml,...');
|
|
106
|
+
--icon-select: url('data:image/svg+xml,...');
|
|
107
|
+
--icon-radio: url('data:image/svg+xml,...');
|
|
108
|
+
--icon-check: url('data:image/svg+xml,...');
|
|
109
|
+
--icon-switch: var(--icon-radio);
|
|
110
|
+
|
|
111
|
+
// Layout
|
|
112
|
+
--layout-width: 1280px;
|
|
113
|
+
--layout-gap-block: 1rem;
|
|
114
|
+
--layout-gap-inline: 1rem;
|
|
115
|
+
--layout-columns: 1;
|
|
116
|
+
|
|
117
|
+
@media (min-width: 720px) {
|
|
118
|
+
--layout-columns: 6;
|
|
119
|
+
--layout-gap-block: 1rem;
|
|
120
|
+
--layout-gap-inline: 1rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@media (min-width: 1024px) {
|
|
124
|
+
--layout-columns: 12;
|
|
125
|
+
--layout-gap-block: 2rem;
|
|
126
|
+
--layout-gap-inline: 2rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@media (min-width: 1440px) {
|
|
130
|
+
--layout-columns: 12;
|
|
131
|
+
--layout-gap-block: 4rem;
|
|
132
|
+
--layout-gap-inline: 2rem;
|
|
133
|
+
}
|
|
96
134
|
|
|
97
135
|
}
|
|
98
136
|
</doc-code>
|
|
@@ -104,20 +142,20 @@
|
|
|
104
142
|
// This is the light theme (or if there is none)
|
|
105
143
|
html[data-theme=light],
|
|
106
144
|
html:not([data-theme]) {
|
|
107
|
-
|
|
108
|
-
|
|
145
|
+
--color-body: white;
|
|
146
|
+
--color-font: black;
|
|
109
147
|
}
|
|
110
148
|
|
|
111
149
|
// This is for the dark theme
|
|
112
150
|
html[data-theme=dark] {
|
|
113
|
-
|
|
114
|
-
|
|
151
|
+
--color-body: black;
|
|
152
|
+
--color-font: white;
|
|
115
153
|
}
|
|
116
154
|
|
|
117
155
|
// This is for the dark theme
|
|
118
156
|
html[data-theme=my-custom-theme] {
|
|
119
|
-
|
|
120
|
-
|
|
157
|
+
--color-body: white;
|
|
158
|
+
--color-font: orange;
|
|
121
159
|
}
|
|
122
160
|
</doc-code>
|
|
123
161
|
|
|
@@ -127,28 +165,18 @@
|
|
|
127
165
|
|
|
128
166
|
<h2>SCSS options</h2>
|
|
129
167
|
|
|
130
|
-
<p>
|
|
168
|
+
<p>You can set custom settings with <code>@use "@natachah/vanilla-frontend/scss/components/..." with ( ... );.</code>. These custom values will override the default variables.</p>
|
|
131
169
|
|
|
132
|
-
<
|
|
133
|
-
<li><code>$color-variations</code> enable color variation for components</li>
|
|
134
|
-
<li><code>$outline-variations</code>> enable outline variation for components</li>
|
|
135
|
-
<li><code>$default-item-properties</code>> define the default properties to use for items <em>(see mixins)</em></li>
|
|
136
|
-
</ul>
|
|
170
|
+
<p>There is also a <code>$default-item-properties</code> to define the default properties to use for items <em>(see mixins)</em></p>
|
|
137
171
|
|
|
138
|
-
<p>
|
|
172
|
+
<p>There is 3 component sthat use this:</p>
|
|
139
173
|
|
|
140
174
|
<doc-code data-type="scss">
|
|
141
|
-
@use
|
|
142
|
-
$colors: (
|
|
143
|
-
primary,
|
|
144
|
-
danger
|
|
145
|
-
)
|
|
146
|
-
);
|
|
147
|
-
@use "@natachah/vanilla-frontend/scss/base";
|
|
175
|
+
@use "./components/badge" with ($colors: ('primary'), $outline: true);
|
|
176
|
+
@use "./components/button" with ($colors: ('primary'), $outline: true);
|
|
177
|
+
@use "./components/card" with ($colors: ('primary'), $outline: true);
|
|
148
178
|
</doc-code>
|
|
149
179
|
|
|
150
|
-
<p>You can do the same with the default file <code>@natachah/vanilla-frontend/scss/abstracts/_default.scss</code></p>
|
|
151
|
-
|
|
152
180
|
</doc-layout>
|
|
153
181
|
<script type="module" src="/main.js"></script>
|
|
154
182
|
</body>
|
|
@@ -45,8 +45,6 @@
|
|
|
45
45
|
@include as-item($name, $states: (), $properties: default.$item-properties)
|
|
46
46
|
</doc-code>
|
|
47
47
|
|
|
48
|
-
<p>This mixin also include the <b>outline</b> and <b>color</b> variations. It also create some CSS custom properties with the <code>$name</code> value as <code>--{$name}-color</code> with fallback values from the <code>$properties</code>.</p>
|
|
49
|
-
|
|
50
48
|
<blockquote class="warning">
|
|
51
49
|
<p>The default properties are set inside the <code>default.$item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
|
|
52
50
|
</blockquote>
|
|
@@ -93,65 +91,35 @@
|
|
|
93
91
|
|
|
94
92
|
<p>This mixin will create the <code>.outline</code> class to transform an item to the outline varation.</p>
|
|
95
93
|
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
/// @param {string} $name - Name of the component
|
|
106
|
-
/// @param {array} $states - List of interactions
|
|
107
|
-
/// @param {string} $color - The initial color of the item (used for color, border and :hover background)
|
|
108
|
-
/// @param {string} $contrast - The initial contrast color of the item (:hover color)
|
|
109
|
-
/// @access public
|
|
110
|
-
///
|
|
111
|
-
|
|
112
|
-
@include with-outline-variations($name, $states: (), $color: var(--#{$name}-background, var(--color-font)), $contrast: var(--#{$name}-color, var(--color-body)))
|
|
113
|
-
</doc-code>
|
|
114
|
-
<doc-code id="setting" data-type="scss" role="tabpanel">
|
|
115
|
-
$outline-variations: (
|
|
116
|
-
my-component-name
|
|
117
|
-
);
|
|
118
|
-
</doc-code>
|
|
119
|
-
</div>
|
|
94
|
+
<doc-code id="scss" data-type="scss" >
|
|
95
|
+
/// Create some outline variations
|
|
96
|
+
///
|
|
97
|
+
/// @param {string} $name - Name of the component
|
|
98
|
+
/// @param {array} $states - List of interactions
|
|
99
|
+
/// @param {string} $color - The color of the item
|
|
100
|
+
/// @param {string} $contrast - The color contrast of the item
|
|
101
|
+
/// @access public
|
|
102
|
+
///
|
|
120
103
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
</blockquote>
|
|
104
|
+
@include with-outline-variation($name, $states: (), $color: var(--color-font), $contrast: var(--color-body))
|
|
105
|
+
</doc-code>
|
|
124
106
|
|
|
125
107
|
<h2>Set color variation</h2>
|
|
126
108
|
|
|
127
109
|
<p>This mixin will create the <code>.COLOR</code> classes to transform an item to multiple color variations.</p>
|
|
128
110
|
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
/// @param {string} $name - Name of the component
|
|
139
|
-
/// @param {boolean} @param {array} $states - List of interactions
|
|
140
|
-
/// @access public
|
|
141
|
-
///
|
|
142
|
-
|
|
143
|
-
@include with-color-variations($name, $states: ())
|
|
144
|
-
</doc-code>
|
|
145
|
-
<doc-code id="setting" data-type="scss" role="tabpanel">
|
|
146
|
-
$color-variations: (
|
|
147
|
-
my-component-name: (primary, other-color)
|
|
148
|
-
);
|
|
149
|
-
</doc-code>
|
|
150
|
-
</div>
|
|
111
|
+
<doc-code id="scss" data-type="scss">
|
|
112
|
+
/// Create some color variations
|
|
113
|
+
///
|
|
114
|
+
/// @param {string} $name - Name of the component
|
|
115
|
+
/// @param {array} $states - List of interactions
|
|
116
|
+
/// @param {array} $colors - List of colors
|
|
117
|
+
/// @param {boolean} $withOutline - Thit outline colored version
|
|
118
|
+
/// @access public
|
|
119
|
+
///
|
|
151
120
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
</blockquote>
|
|
121
|
+
@include with-color-variations($name, $states: (), $colors: (), $withOutline: true)
|
|
122
|
+
</doc-code>
|
|
155
123
|
|
|
156
124
|
<h2>Transform table to be responsive</h2>
|
|
157
125
|
|
|
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
|
|
|
18
18
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
|
|
19
19
|
<path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
|
|
20
20
|
</svg>
|
|
21
|
-
0.
|
|
21
|
+
0.3.0v
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
|
@@ -58,27 +58,31 @@ class DocLayout extends HTMLElement {
|
|
|
58
58
|
<h2>Base</h2>
|
|
59
59
|
<ul>
|
|
60
60
|
<li><a href="/pages/base/reset.html">Reset</a></li>
|
|
61
|
+
<li><a href="/pages/base/layout.html">Layout</a></li>
|
|
61
62
|
<li><a href="/pages/base/typography.html">Typography</a></li>
|
|
62
63
|
<li><a href="/pages/base/media.html">Media</a></li>
|
|
63
64
|
</ul>
|
|
64
65
|
<h2>Components</h2>
|
|
65
66
|
<ul>
|
|
66
|
-
<li><a href="/pages/components/badge.html">Badge</a></li>
|
|
67
|
-
<li><a href="/pages/components/breadcrumb.html">Breadcrumb</a></li>
|
|
68
67
|
<li><a href="/pages/components/button.html">Button</a></li>
|
|
69
|
-
<li><a href="/pages/components/card.html">Card</a></li>
|
|
70
68
|
<li><a href="/pages/components/dialog.html">Dialog</a></li>
|
|
71
69
|
<li><a href="/pages/components/disclosure.html">Disclosure</a></li>
|
|
72
|
-
<li><a href="/pages/components/drawer.html">Drawer</a></li>
|
|
73
|
-
<li><a href="/pages/components/dropdown.html">Dropdown</a></li>
|
|
74
70
|
<li><a href="/pages/components/form.html">Form</a></li>
|
|
75
|
-
<li><a href="/pages/components/grid.html">Grid</a></li>
|
|
76
|
-
<li><a href="/pages/components/list.html">List</a></li>
|
|
77
71
|
<li><a href="/pages/components/loading.html">Loading</a></li>
|
|
78
72
|
<li><a href="/pages/components/progress.html">Progress</a></li>
|
|
79
|
-
<li><a href="/pages/components/slider.html">Slider</a></li>
|
|
80
73
|
<li><a href="/pages/components/table.html">Table</a></li>
|
|
81
74
|
</ul>
|
|
75
|
+
<h2>Custom components</h2>
|
|
76
|
+
<ul>
|
|
77
|
+
<li><a href="/pages/customs/badge.html">Badge</a></li>
|
|
78
|
+
<li><a href="/pages/customs/breadcrumb.html">Breadcrumb</a></li>
|
|
79
|
+
<li><a href="/pages/customs/card.html">Card</a></li>
|
|
80
|
+
<li><a href="/pages/customs/drawer.html">Drawer</a></li>
|
|
81
|
+
<li><a href="/pages/customs/dropdown.html">Dropdown</a></li>
|
|
82
|
+
<li><a href="/pages/customs/grid.html">Grid</a></li>
|
|
83
|
+
<li><a href="/pages/customs/list.html">List</a></li>
|
|
84
|
+
<li><a href="/pages/customs/slider.html">Slider</a></li>
|
|
85
|
+
</ul>
|
|
82
86
|
<h2>Javascript</h2>
|
|
83
87
|
<ul>
|
|
84
88
|
<li><a href="/pages/javascript/autofill.html">Autofill</a></li>
|
|
Binary file
|