-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
720 lines (539 loc) · 35.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
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
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kayzen HTML Template User Guide</title>
<meta name="description" content="The official user guide for the Kayzen HTML Template.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Icons & fFvicons -->
<link rel="apple-touch-icon" href="assets/images/apple-icon-touch.png">
<link rel="icon" href="assets/images/favicon.png">
<!--[if IE]>
<link rel="shortcut icon" href="assets/images/favicon.ico">
<![endif]-->
<!-- Stylesheet -->
<link rel="stylesheet" href="assets/styles/css/app.min.css">
</head>
<body class="with-nav">
<div id="site-content"><!-- For Mobile Menu -->
<header class="app-header" id="app-header">
<div class="container">
<div class="header-wrapper">
<!-- Logo -->
<div class="logo">
<a href="https://themeforest.net/item/kayzen-make-theming-great-again/16768920" target="blank">
Kayzen <span>User Guide</span>
</a>
</div>
<!-- Main-Nav -->
<nav class="main-nav min-bp3">
<!-- Theme Info -->
<div class="theme-info">
<div class="version">
<h4>Version</h4>
<h5>1.1.0</h5>
</div>
<div class="released">
<h4>Updated</h4>
<h5>21/07/2016</h5>
</div>
</div>
<ul class="main-nav-root">
<li>
<a href="#">Menu <i class="fa fa-bars"></i></a>
<ul>
<li><a href="http://kayzen.skyux.com" target="blank">Theme Demo</a></li>
<li><a href="https://github.com/esr360/Kayzen.docs" target="blank">Developer Guide</a></li>
<li><a href="http://themeforest.net/user/SkyUX" target="blank">Get More Help</a></li>
<li><a href="changelog.html">Changelog</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Mobile Menu Trigger Button -->
<a class="nav-trigger max-bp3" href="#"></a>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container main-container">
<div class="row">
<div class="span-2 doc-nav-wrapper">
<div class="doc-nav">
<h2>Navigation</h2>
<nav class="doc-index">
<ul>
<li>
<a href="#overview">Overview</a>
<ul>
<li><a href="#developer-guide">Developer Guide</a></li>
<li><a href="#compatibility">Compatibility</a></li>
</ul>
</li>
<li>
<a href="#getting-started">Getting started</a>
<ul>
<li><a href="#project-architecture">Project Architecture</a></li>
<li><a href="#page-builder">Drag & Drop Page Builder</a></li>
<li><a href="#basic-html-structure">Basic HTML Structure</a></li>
</ul>
</li>
<li>
<a href="#features--options">Features & Options</a>
<ul>
<li><a href="#custom-themes">Custom Themes</a></li>
<li><a href="#responsive-grid-system">Responsive Grid System</a></li>
<li><a href="#working-twitter-feed">Working Twitter Feed</a></li>
<li><a href="#working-contact-form">Working Contact Form</a></li>
<li><a href="#google-map">Google Map</a></li>
<li><a href="#parallax-effects">Parallax Effects</a></li>
<li><a href="#video-background">Video Background</a></li>
<li><a href="#google-fonts">Google Fonts</a></li>
<li><a href="#owl-carousel">Owl Carousel</a></li>
<li><a href="#magnific-popup">Magnific Popup</a></li>
<li><a href="#font-awesome-icons">Font Awesome Icons</a></li>
</ul>
</li>
<li>
<a href="#custom-sections">Custom Sections</a>
</li>
<li><a href="#resources">Resources</a></li>
<li><a href="#notes">Notes</a></li>
</ul>
</nav>
</div>
</div>
<div class="span-8 doc-content">
<h2 class="primary-title">Welcome to the Kayzen User Guide</h2>
<h2 class="dotted" id="overview"><i>Overview</i></h2>
<p>Welcome to the Kayzen user guide. Contained within your download should be a <strong>dev</strong> directory as well as a <strong>prod</strong> directory. This guide will focus only on the contents of the <strong>prod</strong> directory, which contains all the HTML, CSS and JavaScript files required to build your theme. The <strong>dev</strong> directory contains all the source files from which Kayzen is built. For a more comprehensive documentation focusing on the source files, visit the <a href="https://github.com/esr360/Kayzen.docs" target="blank">developer guide</a> on Github.</p>
<div class="accordion">
<article>
<h3 id="developer-guide">Developer Guide <span class="advanced">Advanced</span></h3>
<div>
<p>The <a href="https://github.com/esr360/Kayzen.docs" target="blank">developer guide</a> is the documentation for Kayzen available on Github. The developer guide is geared more for advanced developers who are comfortable with Sass and the command line.</p>
</div>
</article>
</div>
<h3 id="compatibility">Compatibility</h3>
<p>Whilst we thoroughly enjoy experimenting with the latest technologies, we also like to ensure that our products work on a wide vareity of devices. Our themes are compatible with all the latest browsers and devices, degrading gracefully where applicable.</p>
<div class="browser-icons">
<div class="browser-icon">
<img src="assets/images/icon-chrome.png">
</div>
<div class="browser-icon">
<img src="assets/images/icon-firefox.png">
</div>
<div class="browser-icon min-version">
<span>10+</span>
<img src="assets/images/icon-ie.png">
</div>
<div class="browser-icon">
<img src="assets/images/icon-safari.png">
</div>
<div class="browser-icon">
<img src="assets/images/icon-opera.png">
</div>
</div>
<h2 class="dotted" id="getting-started"><i>Getting Started</i></h2>
<h3 id="project-architecture">Project Architecture</h3>
<p>The <strong>prod</strong> directory of your download has the following folder layout:</p>
<pre><code class="language-markup">
├── app
│ ├── fonts
│ │ └── ...
│ ├── images
│ │ └── ...
│ ├── scripts
│ │ └── ...
│ ├── styles
│ │ └── ...
│ └── themes
│ └── ...
├── pages
│ └── ...
├── themes
│ └── ...
</code></pre>
<p>The only directory required to start a Kayzen project is the <strong>app</strong> directory. To learn which files need to be included in your HTML, visit the <a href="#basic-html-structure">Basic HTML Structure</a> section. The other two directories contain the demo HTML templates.</p>
<p>By default, we provide all assets uncompressed. This is to allow you to easily make changes to Kayzen's features and options out the box without having to worry about any build tools.</p>
<h3 id="page-builder">Drag & Drop Page Builder</h3>
<p class="alert-success"><a href="http://kayzen.skyux.com/builder/dist/" target="blank">Click here</a> to view a live demo of the page builder.</p>
<p>The quickest way to get started with Kayzen is to use the provided drag & drop page builder. This allows you to quickly create HTML pages using premade sections seen throughout the demo pages.</p>
<p class="alert-info">The Kayzen page builder is a modified version of the popular <a href="https://codecanyon.net/item/html-builder-frontend-version/8432859" target="blank">HTML Builder</a>.</p>
<h4 id="drag--drop-installation">Installation</h3>
<ul>
<li>Upload the <strong>dev/builder/dist/</strong> directory to <strong>yourdomain.com/builder/dist/</strong></li>
<li>Upload the <strong>prod/app/</strong> directory to <strong>yourdomain.com/app/</strong></li>
<li>Upload the <strong>prod/templates/</strong> directory to <strong>yourdomain.com/templates/</strong></li>
</ul>
<h4 id="drag--drop-usage">Usage</h3>
<ul>
<li>Vist <strong>yourdomain.com/builder/dist/</strong>, create and export your pages</li>
<li>Upload your exported HTML pages to <strong>yourdomain.com</strong></li>
</ul>
<p class="alert-help">Ensure file permisions are set to <b>777</b> if you experience <b>500 internal server error</b> on them (right click > inspect element > console).</p>
<h3 id="basic-html-structure">Basic HTML Structure</h3>
<p>Each HTML page that is provided with Kayzen and generated by the page builder has a layout similar to the following example:</p>
<pre><code class="language-markup"><!DOCTYPE html>
<html>
<head>
<!-- Page Title -->
<title>Kayzen - Multi-Purpose HTML5 Theme</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Multi-Purpose HTML5 Theme.">
<meta name="viewport" content="width=device-width, initial-scale=0.9">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Icons -->
<link rel="apple-touch-icon" href="/app/images/apple-icon-touch.png">
<link rel="icon" href="/app/images/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="/app/images/favicon.ico"><![endif]-->
<!-- Stylesheets -->
<link rel="stylesheet" href="/app/themes/Kayzen/app.css">
<!-- pseudojQuery start -->
<script src="/app/scripts/pseudojQuery-start.js"></script>
</head>
<body>
<div id="site-content">
<!-- SITE CONTENT -->
</div>
<!-- UI Enhancements -->
<!-- Site Overlay -->
<div class="site-overlay" id="site-overlay"></div>
<!-- Styles JSON Configuration -->
<div id="modulesConfigJSON"></div>
<!-- Scripts -->
<script type="text/javascript" src="/app/scripts/jquery.js"></script>
<script type="text/javascript" src="/app/scripts/pseudojQuery-end.js"></script>
<script type="text/javascript" src="/app/themes/Kayzen/app.js"></script>
</body>
</html>
</code></pre>
<p>In order for any HTML page to be compatible with Kayzen, it should load the following resources:</p>
<ul>
<li>/app/themes/Kayzen/app.css</li>
<li>/app/scripts/pseudojQuery-start.js (must be loaded <strong>before</strong> jQuery)</li>
<li>/app/scripts/jquery.js</li>
<li>/app/scripts/pseudojQuery-end.js (must be loaded <strong>after</strong> jQuery)</li>
<li>/app/themes/Kayzen/app.js (must be loaded <strong>after</strong> jQuery)</li>
</ul>
<p>You can of course replace <strong>Kayzen</strong> in the above paths with any theme you have available. For a list of available default themes, <a href="http://kayzen.skyux.com/pages/demos.html" target="blank">click here</a>.
<h2 class="dotted" id="features--options"><i>Features & Options</i></h2>
<h3 id="custom-themes">Custom Themes</h3>
<p>One of the most powerful features of Kayzen is the ability to create your own themes (details on how to do so are available in the <a href="https://github.com/esr360/Kayzen.docs" target="blank">Developer Guide</a>). In general, Kayzen themes are interchangable and not dependent on specific HTML markup, which means you can theoretically change to a new theme just by loading the neccessery JS and CSS without having to worry about effects on your HTML.</p>
<p class="alert-success"><a href="http://kayzen.skyux.com/pages/demos.html">Click Here</a> to view the available default themes.</p>
<p>To change to a different theme, all you need to do is replace the theme name when loading your JS/CSS asset in yout HTML, e.g:</p>
<pre><code class="language-markup">
<link rel="stylesheet" href="/app/themes/Kayzen/app.css">
</code></pre>
<p><i>becomes...</i></p>
<pre><code class="language-markup">
<link rel="stylesheet" href="/app/themes/Nexus/app.css">
</code></pre>
<p class="alert-danger">Ensure you change both the app.css and app.js paths when switching themes</p>
<h3 id="responsive-grid-system">Responsive Grid System</h3>
<a href="https://github.com/esr360/Kayzen-GS" target="blank">
<img src="https://raw.githubusercontent.com/esr360/Kayzen-GS/gh-pages/logo.png" width="150">
</a>
<p>Kayzen comes with a bespoke custom grid system built from the ground up to work seamlessly throughout the theme, unlike other themes which simply take parts from Bootstrap. <a href="https://github.com/esr360/Kayzen-GS" target="blank">Kayzen-GS</a> is availalbe for free on Github if you want to check it out but are not a Kayzen customer.</p>
<p>The default grid system is based off of 12 columns, which will become stacked ("respond") at <strong>940px</strong> by default (all of this is of course customizable).</p>
<h4>Basic Example</h4>
<pre><code class="language-markup">
<div class="row">
<div class="span-4">
...
</div>
<div class="span-4">
...
</div>
<div class="span-4">
...
</div>
</div>
</code></pre>
<p class="alert-success"><a href="http://esr360.github.io/Kayzen-GS/" target="blank">Click Here</a> to view demos, examples and instructions on how to use all the various different rows and columns which come as part of the default Kayzen grid system.</p>
<h3 id="working-twitter-feed">Working Twitter Feed</h3>
<p>Kayzen comes with a customised Twitter Feed which you may have seen used in the <strong>footer</strong> section. To change the Twitter user from which Tweets are pulled form, locate the <strong>data-twitter-handle</strong> attribute in your HTML, and pass your desired Twitter username:</p>
<pre><code class="language-markup">
<div id="footer-twitter-feed" data-twitter-handle="envato">
...
</div>
</code></pre>
<p>Your footer Twitter feed will now pull tweets from <a href="https://twitter.com/envato" target="blank">@envato</a>.</p>
<p class="alert-info">Globally changing the Twitter Feed username is covered in the <a href="http://kayzen.skyux.com/pages/modules/objects/twitter-feed.html" target="blank">Developer Guide</a>.</p>
<h3 id="working-contact-form">Working Contact Form</h3>
<p>The contact form uses <a href="https://github.com/formspree/formspree" target="blank">Formspree</a>; a quick and easy to use solution which requires no setup, just substitute your email address in the <strong>action</strong> attribute on the <strong>form</strong> element and you're good to go.</p>
<pre><code class="language-markup">
<form action="https://formspree.io/YOUR@EMAIL.COM" id="contactForm" method="post">
...
</form>
</code></pre>
<p>To change which page your users get sent to upon completing the form, add the below hidden input field with your desired URL value, ensuring it has a <strong>name</strong> attribute of <strong>_next</strong>:</p>
<pre><code class="language-markup">
<form action="https://formspree.io/YOUR@EMAIL.COM" id="contactForm" method="post">
<input type="hidden" name="_next" value="thankyou.html" />
...
</form>
</code></pre>
<p>For more features and examples, check out the <a href="https://formspree.io/">Formspree</a> homepage.</p>
<h3 id="google-map">Google Map</h3>
<p>To change any of the Google Map options, you'll need to open <i>app/themes/YOURTHEME/<b>app.js</b></i>, and at the very bottom locate the following code:</p>
<pre><code class="language-javascript">
$('#google-map').googleMap();
</code></pre>
<p>Changing options works by passing the option and value to the plugin like so:</p>
<pre><code class="language-javascript">
$('#google-map').googleMap({
option-1: value,
option-2: value
});
</code></pre>
<h4>Colors/Style</h4>
<p>Head over to <a href="https://snazzymaps.com/" target="blank">Snazzy Maps</a> and pick your favourite style, then click the "Copy Code to Clipboard" button, or simply copy the code manually. Once you have your code copied, paste is as the value for the <strong>styles</strong> option:</p>
<pre><code class="language-javascript">
$('#google-map').googleMap({
styles: [
{
...
}
]
});
</code></pre>
<h4>Location</h4>
<p>To change the defauly location which the map lands on, pass the <strong>longitude</strong> and <strong>latitude</strong> options to the plugin:</p>
<pre><code class="language-javascript">
$('#google-map').googleMap({
longitude: 48.195387,
latitude: -63.171387,
});
</code></pre>
<p class="alert-help"><strong>Hint:</strong> You can use <a href="http://mondeca.com/index.php/en/any-place-en" target="blank">this website</a> to get your coordinates.</p>
<h3 id="parallax-effects">Parallax Effects</h3>
<p>Kayzen uses the <a href="http://markdalgleish.com/projects/stellar.js/" target="blank">Stellar.js</a> jQuery plugin for parallax effects.</p>
<p>To make an element's background have a parallax effect, add the <strong>data-stellar-background-ratio</strong> attribute to your element:</p>
<pre><code class="language-markup">
<div data-stellar-background-ratio="0.5">...</div>
</code></pre>
<p class="alert-help"><a href="https://github.com/markdalgleish/stellar.js/#parallax-backgrounds" target="blank">Click Here</a> to read the relevant section of the official Stellar.js documentation.</p>
<h3 id="video-background">Video Background</h3>
<p>You can use a Youtube or Vimeo video as the background for the <a href="http://kayzen.skyux.com/pages/modules/objects/billboard.html" target="blank">Billboard</a> element of your pages.</p>
<h4>Youtube</h4>
<pre><code class="language-markup">
<section class="billboard-videoBg">
<div class="auto-resizable-iframe">
<iframe allowfullscreen="" src="src="http://www.youtube.com/embed/Q3oItpVa9fs?theme=light&autoplay=1"></iframe>
</div>
</section>
</code></pre>
<h4>Vimeo</h4>
<pre><code class="language-markup">
<section class="billboard-videoBg">
<div class="auto-resizable-iframe">
<iframe id="billboard_video" src="https://player.vimeo.com/video/87701971?autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</section>
</code></pre>
<h3 id="google-fonts">Google Fonts</h3>
<p>Kayzen only uses <a href="https://fonts.google.com/" target="blank">Google Fonts</a> and makes it easy to add your own.</p>
<p>To edit/remove/add Google Fonts, open <i>app/themes/YOURTHEME/<strong>app.css</strong>, where you will find at the top the Google Font imports:</i>
<pre><code class="language-css">
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(http://fonts.googleapis.com/css?family=Raleway:100,300,700,900);
</code></pre>
<p>Once you have imported your desired fonts, you can update the helper classes to use the new families by locating the following code in the same file (app.css), and replacing the <strong>font-family</strong> value:</p>
<pre><code class="language-css">
.font-1 {
font-family: "Lato";
}
.font-2 {
font-family: "Raleway";
}
</code></pre>
<h3 id="owl-carousel">Owl Carousel</h3>
<p>Kayzen uses <a href="http://www.owlcarousel.owlgraphic.com/">Owl-Carousel 2</a> for all carousels. Creating a carousel is simple, just add the <strong>carousel</strong> class to your container of elements:</p>
<pre><code class="language-markup">
<div class="carousel">
<div>carousel item</div>
<div>carousel item</div>
<div>carousel item</div>
<div>carousel item</div>
</div>
</code></pre>
<p class="alert-help">For more options and customizability, visit the official <a href="http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html" target="blank">Owl Carousel documentation</a>.</p>
<h3 id="magnific-popup">Magnific Popup</h3>
<p>Kayzen uses the <a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific Popup</a> jQuery plugin for all lightboxes and galleries.</p>
<h4>Lightbox (single image)</h4>
<p>To cause an element to open a specific image in a lightbox on click, use the <strong>rel="lightbox"</strong> attribute:</p>
<pre><code class="language-markup">
<a href="image-1.jpg" rel="lightbox">...</a>
</code></pre>
<h4>Gallery</h4>
<p>To create a gallery of multiple images, add the <strong>lightbox-gallery</strong> class to your container of thumbnails:</p>
<pre><code class="language-markup">
<div class="lightbox-gallery">
<a href="image-1.jpg" rel="lightbox">
<img src="image-1.jpg" width="50px">
</a>
<a href="image-2.jpg" rel="lightbox">
<img src="image-2.jpg" width="50px">
</a>
<a href="image-3.jpg" rel="lightbox">
<img src="image-3.jpg" width="50px">
</a>
</div>
</code></pre>
<p class="alert-help">For more help and information, visit the official <a href="http://dimsemenov.com/plugins/magnific-popup/documentation.html" target="blank">Magnific Popup documentation</a>.</p>
<h3 id="font-awesome-icons">Font Awesome Icons</h3>
<p>Kayzen uses <a href="" target="blank">Font Awesome</a> for all icons. A full list of available icons can be found on the Font Awesome website.</p>
<h4>Icon Button</h4>
<p>You can create a button using Font Awesome icons like so:</p>
<pre><code class="language-markup">
<a class="button-icon" href="#">
<i class="fa fa-apple"></i>
</a>
</code></pre>
<p class="alert-info">Checkout the <a href="http://kayzen.skyux.com/pages/modules/elements/buttons.html" target="blank">Buttons</a> page for available button modifiers.</p>
<h2 class="dotted" id="custom-sections"><i>Custom Sections</i></h2>
<h3>Header</h3>
<h4>Logo</h4>
<p>To replace the default logo with your own, locate the element with the <strong>logo</strong> class in your HTML and update the image path with the path to your logo:</p>
<pre><code class="language-markup">
<div class="logo">
<a href="/index.html">
<img src="/app/images/logo-white.png" alt="logo" />
</a>
</div>
</code></pre>
<h4>Sticky Header</h4>
<p>To cause the header to be sticky when scrolled, append <strong>-sticky</strong> to the <strong>app-header</strong> component:</strong>
<pre><code class="language-markup">
<header class="app-header-bar-absolute-sticky">
...
</header>
</code></pre>
<h4>Side Header</h4>
<p>To create either a left or right sidebar header, append <strong>-side-left</strong> or <strong>-side-right</strong> to the <strong>app-header</strong> component, removing all other modifiers:</strong>
<pre><code class="language-markup">
<header class="app-header-side-left">
...
</header>
</code></pre>
<h3>Footer</h3>
<h4>Twitter Feed</h4>
<p>To change the Twitter user from which Tweets are pulled form, locate the <strong>data-twitter-handle</strong> attribute, and pass your desired Twitter username:</p>
<pre><code class="language-markup">
<div id="footer-twitter-feed" data-twitter-handle="envato">
...
</div>
</code></pre>
<p>Your footer Twitter feed will now pull tweets from <a href="https://twitter.com/envato" target="blank">@envato</a>.</p>
<h3>Earth Slider</h3>
<p class="alert-success"><a href="http://kayzen.skyux.com/themes/Nexus/index.html#s-about" target="blank">Click Here</a> to view an example of the Earth Slider.</p>
<p>The Earth Slider support an unlimited number of pins, though 3 are provided by default. You can change which pin acts as the starting one by locating the following code in the <strong>pageScripts()</strong> function on any page that uses the Earth Slider (the function will be in the HTML embedded within <strong>script</strong> tags):</p>
<pre><code class="language-markup">
<script>
$(document).ready(pageScripts);
function pageScripts() {
$('.earth-slider').KayzenEarthSlider();
}
</script>
</code></pre>
<p>To change the starting pin pass the <strong>startingSection</strong> option to the plugin:</p>
<pre><code class="language-javascript">
$('.earth-slider').KayzenEarthSlider({
startingSection: 4
});
</code></pre>
<p>This will set the fourth section as the default starting one (assuming your custom Earth Slider had 4 pins).</p>
<h2 class="dotted" id="resources"><i>Resources</i></h2>
<p>All third party resources including any stock images used and included in this theme have appropriate licenses for copying, modifying and re-distributing, but should be replaced with your own content where appropriate.</p>
<h3>Tools/Utilities</h3>
<p>Kayzen makes use of many available open source tools which are all available on Github. Your download comes with everything you need to use the default themes, but for advanced customization you can get all the third party tools used on <a href="https://github.com/esr360/Kayzen.vendor" target="blank">Github as git submodules</a>.</p>
<ul>
<li><a href="https://github.com/AndiDittrich/EnlighterJS" target="blank">Enlighter</a></li>
<li><a href="https://github.com/FortAwesome/Font-Awesome" target="blank">Font Awesome</a></li>
<li><a href="https://github.com/webcreate/infinite-ajax-scroll" target="blank">Infinite AJAX Scroll</a></li>
<li><a href="https://github.com/metafizzy/isotope" target="blank">Isotope</a></li>
<li><a href="https://github.com/esr360/Kayzen-GS" target="blank">KayzenGS</a> Grid System</li>
<li><a href="https://github.com/dimsemenov/Magnific-Popup" target="blank">Magnific Popup</a></li>
<li><a href="https://github.com/SnapKit/Masonry" target="blank">Masonry</a></li>
<li><a href="https://github.com/mootools/mootools-core" target="blank">MooTools Core</a></li>
<li><a href="https://github.com/OwlCarousel2/OwlCarousel2" target="blank">Owl Carousel 2</a></li>
<li><a href="https://github.com/esr360/ScrollTrigger" target="blank">ScrollTrigger</a></li>
<li><a href="https://github.com/markdalgleish/stellar.js" target="blank">Stellar</a></li>
<li><a href="https://github.com/esr360/Synergy" target="blank">Synergy</a> Sass Framework</li>
<li><a href="https://github.com/esr360/tweecool-jquery-plugin" target="blank">TweeCool</a></li>
<li><a href="https://github.com/jquery/jquery" target="blank">jQuery</a></li>
<li><a href="https://github.com/aishek/jquery-animateNumber" target="blank">jquery-animateNumber</a></li>
<li><a href="https://github.com/esr360/k-preloaders" target="blank">k-preloaders</a></li>
<li><a href="https://github.com/paulirish/matchMedia.js" target="blank">matchMedia</a></li>
<li><a href="https://github.com/JohnAlbin/normalize-scss" target="blank">normalize-scss</a></li>
<li><a href="https://github.com/esr360/pseudojQuery" target="blank">pseudojQuery</a></li>
</ul>
<h3>Stock Images</h3>
<ul class="clear">
<li><a target="blank" href="http://unsplash.com">Unsplash</a></li>
<li><a target="blank" href="https://www.flickr.com/photos/astragony/">Flickr - Daniel Zedda</a></li>
<li><a target="blank" href="http://www.envato.com/">Envato</a> marketplace logos</li>
</ul>
<p>The following graphics are included with an extended license from Graphic River:</p>
<ul class="clear">
<li><a href="http://graphicriver.net/item/iscreen-mockup/6588204">iScreen Mockup</a></li>
<li><a href="http://graphicriver.net/item/3d-polygon-dark-backgrounds/4728302">3D Polygon Dark Backgrounds</a></li>
</ul>
<p>All other graphics are created by us.</p>
<h3>Fonts</h3>
<ul class="clear">
<li><a href="https://www.google.com/fonts/specimen/Lato" rel="nofollow">Lato</a></li>
<li><a href="https://www.google.com/fonts/specimen/Raleway" rel="nofollow">Raleway</a></li>
<li><a href="https://www.google.com/fonts/specimen/Bitter" rel="nofollow">Bitter</a></li>
</ul>
<p class="alert-success">Everything else, including all code and images, except where explictly stated, is created by us.</p>
<h2 class="dotted" id="notes"><i>Notes</i></h2>
<h3>Support</h3>
<p>We will happily provide any basic support for our customers free of charge on the ThemeForest comments section.</p>
</div>
<div class="span-2 side-bar-wrapper">
<div class="side-bar">
<h2>Side Bar</h2>
<a href="http://themeforest.net/user/SkyUX" target="blank" class="button full-width brand-1">Contact Author</a>
<a href="https://themeforest.net/user/skyux/portfolio" target="blank" class="button full-width">More Themes</a>
<hr class="dotted" />
<a href="https://themeforest.net/user/skyux" target="blank" class="button full-width border">Follow on ThemeForest</a>
<a href="https://twitter.com/ESR360" target="blank" class="button full-width border">Follow on Twitter</a>
<a href="https://github.com/esr360" target="blank" class="button full-width border">Follow on Github</a>
</div>
</div>
</div>
</div>
<footer class="app-footer">
<div class="container">
<div class="footer-wrapper text-center">
<!-- Copyright Section -->
<h4 class="copyright">© <a href="http://skyux.com" target="blank">SkyUX.com</a> 2016</h4>
</div>
</div>
</footer>
</div><!-- end #site-content -->
<!-- Scroll to top icon-->
<a class="fa fa-angle-up scroll-top" href="#site-content"></a>
<!-- Off Canvas Menu -->
<nav class="off-canvas-nav">
<div id="off-canvas-nav"></div>
</nav>
<!-- Site Overlay -->
<div class="site-overlay"></div>
<!-- SCRIPTS -->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!--<script src="assets/js/jquery.min.js"></script>-->
<!-- App JS -->
<script src="assets/js/app.min.js"></script>
</body>
</html>