-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
329 lines (324 loc) · 15.9 KB
/
index.html
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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Frontfire documentation</title>
<link rel="stylesheet" href="../src/css/build/frontfire-ui-complete.min.css">
<link rel="stylesheet" href="res/doc.css">
<link rel="icon" href="../logo/frontfire.svg">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header class="no-h1copy">
<a href="index.html"><img src="../logo/frontfire.svg"></a>
<a href="index.html"><span><span class="title">Frontfire documentation</span></span></a>
</header>
<main class="full-page-width">
<h1 class="no-top-margin">Frontfire Web Frontend Toolkit</h1>
<img src="../logo/frontfire.svg" style="width: 150px; margin-top: -18px;"><!-- square image top padding -->
<div id="versiondiv">
Version <span id="version-id">2.0.0</span>
</div>
<p>
The <em>Frontfire Web Frontend Toolkit</em> offers essential styles and effects combined with a consistent set of interactive widgets and layout utilities.
It is suitable for web pages and web applications that need a modern and consistent look and feel and use responsive design to work on all devices and screen sizes.
All interactions are fully touch-aware and work with any type of pointing device.
The default style equally supports light and dark theme and can be customised with CSS variables.
</p>
<p>
Frontfire is released under the terms of the <strong>MIT licence</strong>.
See the complete licence text in the code repository for details.
</p>
<div class="buttons p double-margin">
<a href="https://github.com/ygoe/Frontfire2/releases" class="button default">
<svg class="icon" width="16" height="16" viewBox="0 0 16 16" style="vertical-align: -2px;">
<path d="M0,12L2,12L2,14L14,14L14,12L16,12L16,16L0,16L0,12ZM7,1L9,1L9,8.5L12,5.5L12,8L8,12L4,8L4,5.5L7,8.5L7,1Z"/>
</svg>
<strong>Get Frontfire</strong>
</a>
<a href="https://github.com/ygoe/Frontfire2" class="button">
<svg class="icon" width="16" height="16" viewBox="0 0 16 16" style="vertical-align: -2px;">
<path d="M6.65,14.26L10.65,4.26L9.35,3.74L5.35,13.74L6.65,14.26ZM3.505,5.505L0.01,9L3.505,12.495L4.495,11.505L1.99,9C1.99,9 4.495,6.495 4.495,6.495L3.505,5.505ZM11.505,6.495L14.01,9C14.01,9 11.505,11.505 11.505,11.505L12.495,12.495L15.99,9L12.495,5.505L11.505,6.495Z"/>
</svg>
Browse source code
</a>
</div>
<p>
See the <a href="changes.html">change log</a> for all differences between release versions.
</p>
<p>
The API documentation describes all class methods and properties in detail and includes some examples.
While Frontfire version 1 (which as a work in progress never actually used version numbers) was made as a jQuery plugin, version 2 comes in two parts.
</p>
<p id="apple-ios-warning" class="message warning icon" style="display: none;">
<i class="material">exclamation-triangle-fill</i>
<strong>Compatibility warning:</strong><br>
Unfortunately, the Apple Safari browser does not support <a href="https://caniuse.com/js-regexp-lookbehind">a common feature of regular expressions</a> which probably breaks largs parts of this documentation website.
Due to restrictions imposed by Apple on the iOS platform, this affects all browsers on Apple mobile devices.
Please use another browser to browse the Frontfire documentation.
Frontfire itself does not currently make use of this feature so it should not be affected.
</p>
<h2>Frontfire Core</h2>
<p>
This part largely replaces those parts of jQuery that are not already covered by modern JavaScript.
It can be used independently of the UI part.
The ArrayList and Color classes can also be used independently of Frontfire, but are maintained and documented with it.
</p>
<div class="doc-parts p">
<a href="arraylist.html">
<span class="title">ArrayList</span>
<span class="type">API reference</span>
<span class="description">A comfortable and comprehensive array collection</span>
</a>
<a href="frontfire-core.html">
<span class="title">Frontfire Core</span>
<span class="type">API reference</span>
<span class="description">Easy DOM access on a low level, based on ArrayList</span>
</a>
<a href="color.html">
<span class="title">Color</span>
<span class="type">API reference</span>
<span class="description">Colour conversion and computation functions</span>
</a>
<a href="datacolor.html">
<span class="title">DataColor</span>
<span class="type">API reference</span>
<span class="description">Distinguishable colour palette for data visualisation</span>
</a>
</div>
<h2>Frontfire UI</h2>
<p>
This part builds with styles and plugins upon Core and provides UI widgets and interaction primitives.
The <em>Complete</em> bundle contains all of the plugins, the <em>Minimal</em> bundle only the most essential ones.
A good first read are the chapters about <a href="frontfire-ui-installation.html">Installation</a> and then the <a href="frontfire-ui-page.html">Page</a> and <a href="frontfire-ui-typography.html">Typography</a> modules.
</p>
<p>
Note that Frontfire UI is not an add-in for any existing web page.
It relies on CSS reset styles and alters the basic appearance of many standard HTML elements to give them a consistent style without drowning the document in CSS classes.
Read the <a href="frontfire-ui-autostart.html">Autostart documentation</a> to learn more about this and how to selectively opt out.
</p>
<p style="display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-left: 2em;">
<span>
<svg class="icon" width="13" height="12" viewBox="0 0 13 12">
<path d="M0,0L13,0L8,6L8,11L5,12L5,6Z"/>
</svg>
</span>
<span id="show-complete-modules-false" style="cursor: pointer; user-select: none; text-align: right;">Minimal bundle</span>
<input type="checkbox" id="show-complete-modules" checked class="toggle-switch">
<span id="show-complete-modules-true" style="cursor: pointer; user-select: none;">Complete bundle</span>
</p>
<div class="doc-parts p">
<a href="frontfire-ui-accordion.html">
<span class="title">Accordion</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Separately expandable sections view</span>
</a>
<a href="frontfire-ui-carousel.html">
<span class="title">Carousel</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Horizontal layout of elements with swipe interaction</span>
</a>
<a href="frontfire-ui-colorpicker.html">
<span class="title">ColorPicker</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Colour picker input fields and modal view</span>
</a>
<a href="frontfire-ui-draggable.html">
<span class="title">Draggable</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Making elements draggable on the page</span>
</a>
<a href="frontfire-ui-dropdown.html">
<span class="title">Dropdown</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Dropdown panel that opens besides an element</span>
</a>
<a href="frontfire-ui-form.html">
<span class="title">Form</span>
<span class="type">Styles/plugins demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Responsive form layout system with text fields and buttons</span>
</a>
<a href="frontfire-ui-gallery.html">
<span class="title">Gallery</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Image gallery with aligned row lengths</span>
</a>
<a href="frontfire-ui-image.html">
<span class="title">Image</span>
<span class="type">Styles demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Responsive image alignment, sizing and decorations</span>
</a>
<a href="frontfire-ui-menu.html">
<span class="title">Menu</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Menu bars with dropdown submenus</span>
</a>
<a href="frontfire-ui-message.html">
<span class="title">Message</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Message bar styles for different levels</span>
</a>
<a href="frontfire-ui-modal.html">
<span class="title">Modal</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Modal panel that overlays the page</span>
</a>
<a href="frontfire-ui-notification.html">
<span class="title">Notification</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Quick status message that disappears after a timeout</span>
</a>
<a href="frontfire-ui-offcanvas.html">
<span class="title">OffCanvas</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Panel that slides in from the side of the page</span>
</a>
<a href="frontfire-ui-page.html">
<span class="title">Page</span>
<span class="type">Styles demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Basic page layout styles and document structure</span>
</a>
<a href="frontfire-ui-progressbar.html">
<span class="title">Progressbar</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Progress bar with value display</span>
</a>
<a href="frontfire-ui-resizable.html">
<span class="title">Resizable</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Making elements resizable</span>
</a>
<a href="frontfire-ui-selectable.html">
<span class="title">Selectable</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">List item selection, with dropdown</span>
</a>
<a href="frontfire-ui-slider.html">
<span class="title">Slider</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Numeric range value selection</span>
</a>
<a href="frontfire-ui-sortable.html">
<span class="title">Sortable</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Sort child elements by drag&drop</span>
</a>
<a href="frontfire-ui-table.html">
<span class="title">Table</span>
<span class="type">Styles/plugins demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Table styles and layouts</span>
</a>
<a href="frontfire-ui-tabs.html">
<span class="title">Tabs</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Switchable pages with tab headers</span>
</a>
<a href="frontfire-ui-timepicker.html">
<span class="title">TimePicker</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Date and time picker input fields</span>
</a>
<a href="frontfire-ui-toggleswitch.html">
<span class="title">ToggleSwitch</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Toggle switch that can replace a checkbox</span>
</a>
<a href="frontfire-ui-tree.html">
<span class="title">Tree</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Hierarchical tree item selection, with drag & drop</span>
</a>
<a href="frontfire-ui-typography.html">
<span class="title">Typography</span>
<span class="type">Styles demo</span>
<span class="bundles"><span class="minimal"></span><span class="complete"></span></span>
<span class="description">Elementary typography styles that encourage design best practices</span>
</a>
<a href="frontfire-ui-wheelscrolling.html">
<span class="title">WheelScrolling</span>
<span class="type">Plugin demo</span>
<span class="bundles"><span class="complete"></span></span>
<span class="description">Custom mouse wheel scrolling behaviour</span>
</a>
</div>
<p>
The following pages describe general topics or contain full reference lists.
</p>
<div class="doc-parts p">
<a href="frontfire-ui-installation.html">
<span class="title">Installation</span>
<span class="type">Guide</span>
<span class="description">Include Frontfire scripts and styles on a page</span>
</a>
<a href="frontfire-ui-autostart.html">
<span class="title">Autostart</span>
<span class="type">Guide</span>
<span class="description">Default styles and class-based activation of plugins</span>
</a>
<a href="frontfire-ui-options.html">
<span class="title">Plugin options</span>
<span class="type">Guide</span>
<span class="description">Methods to set options when using plugins</span>
</a>
<a href="frontfire-ui-classes.html">
<span class="title">CSS classes</span>
<span class="type">API reference</span>
<span class="description">Complete class list of all styles and plugins</span>
</a>
<a href="frontfire-ui-variables.html">
<span class="title">CSS variables</span>
<span class="type">API reference</span>
<span class="description">Complete variables list of all plugins for configuration</span>
</a>
</div>
</main>
<footer class="full-page-width">
Copyright © 2022–2023, Yves Goergen, <a href="https://ygoe.de">ygoe.de</a><br>
All rights reserved. See the licence notes.
</footer>
<script src="../src/js/build/frontfire-ui-complete-singlefile.min.js"></script>
<script src="res/doc.js"></script>
<script>
F("#apple-ios-warning").visible = F.isSafari();
F("#show-complete-modules").on("change!", event => {
F(".doc-parts a")
.having(".bundles")
.where(a => !a.F.querySelector(".bundles .minimal"))
.visible = event.currentTarget.checked;
});
F("#show-complete-modules-false").on("click", () => {
F("#show-complete-modules").checked = false;
F("#show-complete-modules").trigger("change");
});
F("#show-complete-modules-true").on("click", () => {
F("#show-complete-modules").checked = true;
F("#show-complete-modules").trigger("change");
});
</script>
</body>
</html>