-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpresentation.html
More file actions
492 lines (409 loc) · 22.5 KB
/
presentation.html
File metadata and controls
492 lines (409 loc) · 22.5 KB
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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/img/favicon.ico">
<title>Presentation</title> <script type="module" crossorigin src="./js/app.min.js?v=1774807247393"></script>
<link rel="stylesheet" crossorigin href="./css/app.min.css?v=1774807247393">
</head>
<body>
<div class="wrapper">
<header class="header" data-anim-header="" data-anim-header-scroll="">
<div class="header__container">
<nav class="menu__body">
<a class="menu__logo" href="/docs/index.html">
<img src="./assets/img/logo.jpg" aria-label="Animmaster Logo" width="50" height="50">
</a>
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="/docs/index.html">Documentation</a>
</li>
<li class="menu__item">
<a class="menu__link menu__link--special" target="_blank" href="https://www.patreon.com/collection/1946808?view=condensed">Animmaster PRO Pack</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="page">
<div data-anim-presentationdoc="" class="doc">
<section class="doc-page box-padding">
<div class="doc-page__container">
<div class="doc-top">
<a class="doc-top__back" href="/docs/index.html">← Back to Documentation</a>
</div>
<div class="doc-hero" id="top">
<p class="doc-hero__kicker">Documentation</p>
<h1 class="doc-hero__title">
Why do you need “Animmaster Vite Template”?
Template presentation
</h1>
<p class="doc-hero__lead">
Stop rebuilding the same frontend setup for every project.
Get a ready-to-use, scalable foundation so you can focus on real features from day one.
</p>
<div class="doc-actions">
<a class="doc-btn doc-btn--primary doc-btn--pulse" href="https://www.patreon.com/collection/1946808?view=condensed" target="_blank" rel="noreferrer">
<span class="doc-btn__text doc-btn__text--default">
Download <span>Animmaster</span> Vite Template
</span>
<span class="doc-btn__text doc-btn__text--hover">
Save your time — start now
</span>
</a>
</div>
</div>
<div class="doc-layout">
<article class="doc-content">
<section class="doc-section" id="overview" data-anim-watcher="navigator">
<h2 class="doc-h2">Overview</h2>
<p class="doc-p">
Imagine a typical preparation process before layout/development: you create a folder structure,
configure the bundler,
connect base utilities, and so on.
</p>
<p class="doc-p">
During development you repeat the same routine: convert fonts, optimize images, solve standard
tasks over and over again.
Modern projects often need the same essentials: menus, sliders, popups, tabs, form validation,
galleries, scroll effects, and more.
</p>
<p class="doc-p">
<strong>"Animmaster Vite Template"</strong> gives you a production-ready setup that scales with your
project —
without hiding how it works under the hood.
</p>
<div class="doc-callout doc-callout--accent">
<div class="doc-callout__title">Main Goal</div>
<div class="doc-callout__text">
Maximum practical functionality with minimum repetitive actions — with full control when
customization is needed.
</div>
</div>
</section>
<section class="doc-section" id="capabilities" data-anim-watcher="navigator">
<h2 class="doc-h2">Core capabilities</h2>
<p class="doc-p">
"Animmaster Vite Template" follows a simple concept: maximum functionality with minimal user
actions, while still being
configurable for your
project.
</p>
<div class="doc-grid doc-grid--no-grid">
<!-- 🔥 TOP FEATURES -->
<article class="doc-card">
<h3 class="doc-h3">Zero-boilerplate development</h3>
<p class="doc-p">
Start building immediately. Most functionality is enabled automatically via HTML and
data-attributes — no manual imports, no complex setup, no repetitive wiring.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">React & Vue ready</h3>
<p class="doc-p">
Optional React and Vue workflows using the same build system
and project structure.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Component-driven architecture</h3>
<p class="doc-p">
Every UI element is a self-contained HTML / SCSS / JS component.
Components are reusable, scalable, and automatically connected when used in markup.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Hot component auto-connection</h3>
<p class="doc-p">
Add a component to your HTML and the system instantly detects it, connects styles and
JavaScript,
and enables required functionality — without touching JS manually.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Production performance out of the box</h3>
<p class="doc-p">
Per-page CSS & JS loading, critical CSS injection, cache-busting asset versioning,
and optional bundling ensure fast load times without manual optimization.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Full WordPress workflow (Docker-powered)</h3>
<p class="doc-p">
Develop frontend directly for WordPress using a local Docker environment.
Includes a ready-to-use theme, plugin, asset pipeline, and build commands for production
deployment.
</p>
</article>
<!-- 🧱 ARCHITECTURE -->
<article class="doc-card">
<h3 class="doc-h3">Clean and scalable project structure</h3>
<p class="doc-p">
A predictable folder hierarchy separates source files, components, assets, build logic,
and CMS integration — making long-term maintenance effortless.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Single configuration entry point</h3>
<p class="doc-p">
Control nearly all build behavior from one config file — server, assets, styles,
images, JS, frameworks, deployment, logging, and developer tools.
</p>
</article>
<!-- ⚙️ MODES -->
<article class="doc-card">
<h3 class="doc-h3">Lightning-fast development mode</h3>
<p class="doc-p">
Local dev server with instant updates, hot reload, automatic component detection,
developer logs, navigation panel, and component playground.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Production-grade build mode</h3>
<p class="doc-p">
Optimized output with minification, formatting, critical CSS, optional code splitting,
image optimization, font processing, and clean production-ready HTML.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Offline-ready build (no server)</h3>
<p class="doc-p">
Optional build mode that allows the project to work directly from the file system.
Useful for demos, previews, and static delivery.
</p>
</article>
<!-- 🧩 COMPONENTS -->
<article class="doc-card">
<h3 class="doc-h3">Rich built-in component library</h3>
<p class="doc-p">
Includes layout blocks, forms, effects, UI patterns, animations, dynamic adaptivity,
and helper plugins — ready to use or extend.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Component plugins system</h3>
<p class="doc-p">
Extend components with optional plugins (scroll behavior, effects, logic)
that activate only when explicitly used.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Developer-only component playground</h3>
<p class="doc-p">
Build and test components in isolation on a dedicated dev page
that never ships to production.
</p>
</article>
<!-- 🧬 HTML -->
<article class="doc-card">
<h3 class="doc-h3">HTML includes & partials</h3>
<p class="doc-p">
Reuse headers, footers, sections, and any markup using HTML includes.
Change once — update everywhere.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Template-based page layouts</h3>
<p class="doc-p">
Build multiple page structures using templates and named blocks —
ideal for complex projects with different layout patterns.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">HTML logic without JavaScript</h3>
<p class="doc-p">
Use variables, conditions, and loops directly in HTML
to generate menus, lists, metadata, and dynamic structures.
</p>
</article>
<!-- 🎨 STYLES -->
<article class="doc-card">
<h3 class="doc-h3">SCSS design system</h3>
<p class="doc-p">
Global tokens, mixins, responsive utilities, and shared patterns
automatically available across all components.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Adaptive layout engine</h3>
<p class="doc-p">
Built-in SCSS mixins allow fluid, responsive property scaling
between breakpoints without complex media queries.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Tailwind CSS support (optional)</h3>
<p class="doc-p">
Enable Tailwind CSS when needed without breaking the existing architecture
or component workflow.
</p>
</article>
<!-- 🖼️ ASSETS -->
<article class="doc-card">
<h3 class="doc-h3">Advanced image optimization</h3>
<p class="doc-p">
Automatic compression, WebP / AVIF conversion, responsive sizes,
high-DPI variants, and automatic <picture> generation.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Advanced Video optimization</h3>
<p class="doc-p">
Automatic compression, Webm / mp4 conversion, responsive sizes, ignore options
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Automated fonts pipeline</h3>
<p class="doc-p">
Converts fonts to WOFF2, generates @font-face rules,
supports icon fonts and optional local Google Fonts downloads.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">SVG sprite workflow</h3>
<p class="doc-p">
Generate and use SVG sprites consistently in HTML and SCSS
with helpers and mixins.
</p>
</article>
<!-- ⚛️ JS / FRAMEWORKS -->
<article class="doc-card">
<h3 class="doc-h3">JavaScript utilities & helpers</h3>
<p class="doc-p">
Built-in helper functions for responsiveness, events, device detection,
UI state, and component logic.
</p>
</article>
<!-- 🚚 DELIVERY -->
<article class="doc-card">
<h3 class="doc-h3">GitHub publishing</h3>
<p class="doc-p">
Build and deploy directly to a GitHub repository or branch
with a single command.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">FTP deployment</h3>
<p class="doc-p">
Upload the final production build to any hosting
via FTP directly from the build system.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">ZIP packaging for clients</h3>
<p class="doc-p">
Generate a clean ZIP archive of the final build —
perfect for delivery, backups, or handoff.
</p>
</article>
<!-- 🧠 DX -->
<article class="doc-card">
<h3 class="doc-h3">Developer navigation panel</h3>
<p class="doc-p">
Floating dev panel with quick access to all pages,
icons, and project tools.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Project statistics & time tracking</h3>
<p class="doc-p">
Track development time, sessions, and file changes —
useful for planning and reporting.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Configurable logging system</h3>
<p class="doc-p">
Control logs per environment and automatically remove
debug output in production builds.
</p>
</article>
<article class="doc-card">
<h3 class="doc-h3">Coffee mode </h3>
<p class="doc-p">
Simple log reminder with customs timer setting, like pomodoro app
</p>
</article>
</div>
<div class="doc-callout doc-callout--accent">
<div class="doc-callout__title">Why this matters</div>
<div class="doc-callout__text">
All these features work together to remove routine, keep projects clean, and let you ship faster
without losing control.
</div>
</div>
</section>
<section class="doc-section" id="notes">
<h2 class="doc-h2">Notes</h2>
<div class="doc-callout doc-callout--warn">
<div class="doc-callout__title">Updates</div>
<div class="doc-callout__text"> The feature list will keep growing. Stay tuned for updates and
improvements.
</div>
</div>
</section>
<section class="doc-section" id="download" data-anim-watcher="navigator">
<h2 class="doc-h2">Download</h2>
<p class="doc-p doc-p--margin-b">
Every project you start without a solid foundation costs you time.
Download Animmaster Vite Template and start your next project with a structure that already works.
</p>
<div class="doc-actions">
<a class="doc-btn doc-btn--primary doc-btn--pulse" href="https://www.patreon.com/collection/1946808?view=condensed" target="_blank" rel="noreferrer">
<span class="doc-btn__text doc-btn__text--default">
Download <span>Animmaster</span> Vite Template
</span>
<span class="doc-btn__text doc-btn__text--hover">
Save your time — start now
</span>
</a>
</div>
</section>
<div class="doc-divider"></div>
<nav class="doc-next">
<a class="doc-next__link" href="/docs/install.html">
Next: Installing and launching “Animmaster Vite Template”
<span class="doc-next__arrow">→</span>
</a>
</nav>
</article>
<aside class="doc-toc" aria-label="On this page">
<div class="doc-toc__box">
<div class="doc-toc__title">On this page</div>
<ol class="doc-toc__list">
<li><a class="doc-toc__link" href="#" data-anim-scrollto-header="" data-anim-scrollto="#overview" data-toc-link="">Overview</a></li>
<li><a class="doc-toc__link" href="#" data-anim-scrollto-header="" data-anim-scrollto="#capabilities" data-toc-link="">Core capabilities</a></li>
<li><a class="doc-toc__link" href="#" data-anim-scrollto-header="" data-anim-scrollto="#download" data-toc-link="">Download</a></li>
</ol>
</div>
</aside>
</div>
</div>
</section>
</div>
</main>
<footer class="footer" data-anim-footer="">
<div class="footer__container">
<!-- BOTTOM -->
<div class="footer__bottom">
<p class="footer__copy">© 2026 Animmaster</p>
<div class="footer__bug">
<span>Found bug?</span>
<a href="mailto:animmasterstudio@gmail.com">
Report it
</a>
</div>
<div class="footer__author">
Crafted with <span>🤍</span> by
<a target="_blank" href="https://www.instagram.com/animmaster_studio?igsh=MXN0MXkycGxrbDlpag==">
Animmaster
</a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>