Jetpack - Documentation

1. What is It

Jetpack is a mobile template created to develop Web Sites and Web App. Thanks to a fluid layout, it suits to any type of mobile device. Moreover, with prebuilt classes it will be easier to design new pages or modify the ones already created. 
The template uses the Google Framework Material Design Light (MDL) in order to enforce the Material Design Guidelines.
The page transition effect the user’s experience similar to an app.

2. Folders Structure

Below you can find a brief summary of the folder structure:

Inside the folder named “app” are listed the template files, split into html template and ajax navigation (for more expert users).
Inside the folder named “css” are listed the stylsheets:

keyframes.css contains the animation's rules. Do not directly modify these files or the new updates may overwrote your work;
materialize.min.css contains the framework's rules. Do not directly modify these files or the new updates may overwrote your work;
swiper.css contains the slider's rules. Do not directly modify these files or the new updates may overwrote your work;
swipebox.min.css contains the lightbox's rules. Do not directly modify these files or the new updates may overwrote your work;
style.css contains the custom’s rules. Here, you can add your own rules in order to modify or overwrite the previous files.

Inside the folder named "js" are listed the javascript rules:

jquery-2.1.0.min.js is a framework javascript. Do not directly modify these files;
jquery.swipebox.min.js contains the lightbox's javascript rules. Do not directly modify these files;
jquery.smoothState.min.js contains the routing's javascript rules. Do not directly modify these files;
materialize.min.js contains the framework's javascript rules. Do not directly modify these files;
swiper.min.js contains the slider's javascript rules. Do not directly modify these files;
jquery.mixitup.min.js contains the images filter's javascript rules. Do not directly modify these files;
masonry.min.js contains the masonry's grid javascript rules. Do not directly modify these files;
chart.min.js contains the chart's javascript rules. Do not directly modify these files;
function.js contains the custom’s rules. Here, you can add your own rules in order to modify the template or overwrite the previous files.

Inside the folder named "img" are listed the images used by the template.

3. Layout Structure

The file .html are structured in two sections

The "header" tag contains the button to open the sidebar;
The "main" contains the contents and the page’s main structure. This is what basically changes from page to page;
Pages start with the sidebars, then the toolbar, the content and the footer.

Header

Jetpack comes with two types of Header:

The Fixed Header is a header that stays always on top of the page, even if scrolled down.

				
					<div id="toolbar" class="primary-color">
					  <div class="open-left" id="open-left" data-activates="slide-out-left">
					    <i class="ion-android-menu"></i>
					  </div>
					  <span class="title">Fixed Header</span>
					  <div class="open-right" id="open-right" data-activates="slide-out">
					    <i class="ion-android-person"></i>
					  </div>
					</div>

The Material Header is a header that start transparent and be sticky after some scroll.

				
					<div id="toolbar" class="Jetpack-nav box-shad-none">
					  <div class="open-left" id="open-left" data-activates="slide-out-left">
					    <i class="ion-android-menu"></i>
					  </div>
					  <span class="title none">Material La...</span>
					  <div class="open-right" id="open-right" data-activates="slide-out">
					    <i class="ion-android-person"></i>
					  </div>
					</div>
					<div class="h-banner animated fadeindown">
					  <div class="parallax primary-color">
					    <div class="floating-button animated bouncein delay-3">
					    <span class="btn-floating resize btn-large waves-effect waves-light accent-color btn z-depth-1">
					      <i class="ion-android-share-alt"></i>
					    </span>
					  </div>
					    <span class="subtitle">Subtitle Example</span>
					    <div class="banner-title">Material Layout</div>
					  </div>
					 </div>

Sidebar

The Sidebar contains the main navigation of the website. To open the Sidebar just click the top-left button in the header.  To make the ajax routing possible sidebar's anchor will close the sidebar on click, except if you specify the opposite in side the functions.js file. The right sidebar is an example of that:

			
				<ul id="slide-out-left" class="side-nav collapsible">
					<li><a href="example.html" class="no-child"><i class="ion-android-playstore"></i> Link</a></li>
					<li><a href="example.html" class="no-child"><i class="ion-ios-videocam"></i> Link</a></li>
					<li><a href="example.html" class="no-child"><i class="ion-social-rss"></i> Link</a></li>
					<li><a href="example.html" class="no-child"><i class="ion-android-map"></i> Link</a></li>
				</ul>
				<div class="open-left" id="open-left" data-activates="slide-out-left">
				    <i class="ion-android-menu"></i>
				</div>

Footer

To create a more website like layout, Jetpack comes with a easy to add footer. Listed below, a simple snipset of code that show how to create a more complex footer:

			
				<footer class="page-footer">
				  <div class="container">
				    <div class="row">
				      <div class="col s12">
				        <h5 class="white-text">Footer Content</h5>
				        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
				      </div>
				      <div class="col s12">
				        <h5 class="white-text">Links</h5>
				        <ul>
				          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
				          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
				          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
				          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
				        </ul>
				      </div>
				    </div>
				  </div>
				  <div class="footer-copyright">
				    <div class="container">
				    © 2014 Copyright Text
				    <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
				    </div>
				  </div>
				</footer>

4. Components

Jetpack comes with tons of customizable components:

Badges

Badges can notify you that there are new or unread messages or notifications.

			
				<span class="badge blue">5</span>

Buttons

There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.

Raised

			
				<a class="waves-effect waves-light btn">Stuff</a>

Floating

			
				<a class="btn-floating btn-large waves-effect waves-light red">Stuff</a>

Flat

			
				<a class="waves-effect waves-teal btn-flat">Button</a>

Large

			
				<a class="waves-effect waves-light btn-large">Button</a>

Disabled

			
				<a class="btn disabled">Button</a>

Collapsible

Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.

Collapsible

			
				<ul class="collapsible" data-collapsible="accordion">
					<li>
					  <div class="collapsible-header">First</div>
					  <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
					</li>
					<li>
					  <div class="collapsible-header">Second</div>
					  <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
					</li>
					<li>
					  <div class="collapsible-header">Third</div>
					  <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
					</li>
				</ul>

Popout

			
				<ul class="collapsible popout" data-collapsible="accordion"></ul>

Preselect

			
				<div class="collapsible-header active">Preselected</div>

Dialogs

Dialogs are content that are not original visible on a page but show up with extra information if needed. The transitions should make the appearance of the dialog make sense and not jarring to the user.

Toast

			
				<a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast!</a>

Modal

			
				<!-- Modal Trigger -->
				<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
				<!-- Modal Structure -->
				<div id="modal1" class="modal">
					<div class="modal-content">
					  	<h4>Modal Header</h4>
					  	<p>A bunch of text</p>
					</div>
					<div class="modal-footer">
				  		<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
					</div>
				</div>

Modal with fixed footer

			
				<!-- Modal Trigger -->
				<a class="modal-trigger waves-effect waves-light btn" href="#modal1">Modal</a>
				<!-- Modal Structure -->
				<div id="modal1" class="modal modal-fixed-footer">
					<div class="modal-content">
					  <h4>Modal Header</h4>
					  <p>A bunch of text</p>
					</div>
					<div class="modal-footer">
					  <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
					</div>
				</div>

Bottom Sheet

			
				<!-- Modal Trigger -->
				<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

				<!-- Modal Structure -->
				<div id="modal1" class="modal bottom-sheet">
					<div class="modal-content">
					  <h4>Modal Header</h4>
					  <p>A bunch of text</p>
					</div>
					<div class="modal-footer">
					  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
					</div>
				</div>

Tabs

The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible. You can add the class .disabled to make a tab inaccessible.

			
				<div class="row">
					<div class="col s12">
					  <ul class="tabs">
					    <li class="tab col s3"><a href="#test1">Test 1</a></li>
					    <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
					    <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
					    <li class="tab col s3"><a href="#test4">Test 4</a></li>
					  </ul>
					</div>
					<div id="test1" class="col s12">Test 1</div>
					<div id="test2" class="col s12">Test 2</div>
					<div id="test3" class="col s12">Test 3</div>
					<div id="test4" class="col s12">Test 4</div>
				</div>

Sliders

			
				<div class="swiper-container">
				  <div class="swiper-wrapper">
				    <div class="swiper-slide">
				      <img src="img/5.jpg" alt="">
				    </div>
				    <div class="swiper-slide">
				      <img src="img/8.jpg" alt="">
				    </div>
				  </div>
				  <!-- Add Arrows -->
				  <div class="swiper-button-next"></div>
				  <div class="swiper-button-prev"></div>
				  <!-- Add Pagination -->
				  <div class="swiper-pagination"></div>
				</div>

Form Elements

Input

			
				<div class="input-field">
				    <input id="first_name" type="text" class="validate">
				    <label for="first_name">First Name</label>
				</div>

Input with icon

			
				<div class="input-field">
				  <i class="ion-social-twitter"></i>
				  <input id="icon_prefix" type="text" class="validate">
				  <label for="icon_prefix">Favourite Social</label>
				</div>

TextArea

			
				<div class="input-field">
				  <textarea id="textarea1" class="materialize-textarea"></textarea>
				  <label for="textarea1">Textarea</label>
				</div>

Checkbox

			
				<p>
				  <input type="checkbox" id="test6" checked="checked" />
				  <label for="test6">Yellow</label>
				</p>

Select

			
				<label>Browser Select</label>
				<select class="browser-default">
					<option value="" disabled selected>Choose your option</option>
					<option value="1">Option 1</option>
					<option value="2">Option 2</option>
					<option value="3">Option 3</option>
				</select>

Filter

Filters are a great feature for portfolio based websites.

			
				<!-- Filters Controller -->
				  <div class="controls">
				    <button id="ChangeLayout" class="left">List</button>
				    <label>Filter:</label>
				    <button class="filter" data-filter="all">All</button>
				    <button class="filter" data-filter=".category-1">Art</button>
				    <button class="filter" data-filter=".category-2">Ink</button>
				    <button class="filter" data-filter=".category-3">Pop</button>
				  </div>
				<!-- Filter Images -->
				<div id="filter">
				    <section id="image-filter">
				      <div class="wrap small-width">
				        <div data-pswp-uid="1" id="demo-gallery" class="demo-gallery">
				          <a href="img/1.jpg" class="swipebox mix category-1 no-smoothState" title="This is dummy caption.">
				            <img src="img/1.jpg" alt="image">
				          </a>
				          <a href="img/2.jpg" class="swipebox mix category-1 no-smoothState" title="He who searches for meaning here will be sorely disappointed.">
				            <img src="img/2.jpg" alt="image">
				          </a>
				          <a href="img/3.jpg" class="swipebox mix category-2 no-smoothState" title="This is dummy caption.">
				            <img src="img/3.jpg" alt="image">
				          </a>
				          <a href="img/4.jpg" class="swipebox mix category-2 no-smoothState" title="He who searches for meaning here will be sorely disappointed.">
				            <img src="img/4.jpg" alt="image">
				          </a>
				          <a href="img/5.jpg" class="swipebox mix category-3 no-smoothState" title="My Caption">
				            <img src="img/5.jpg" alt="image">
				          </a>
				          <a href="img/6.jpg" class="swipebox mix category-1 no-smoothState" title="This is dummy caption.">
				            <img src="img/6.jpg" alt="image">
				          </a>
				          <a href="img/7.jpg" class="swipebox mix category-1 no-smoothState" title="This is dummy caption.">
				            <img src="img/7.jpg" alt="image">
				          </a>
				          <a href="img/8.jpg" class="swipebox mix category-1 no-smoothState" title="He who searches for meaning here will be sorely disappointed.">
				            <img src="img/8.jpg" alt="image">
				          </a>
				          <a href="img/9.jpg" class="swipebox mix category-2 no-smoothState" title="This is dummy caption.">
				            <img src="img/9.jpg" alt="image">
				          </a>
				          <a href="img/10.jpg" class="swipebox mix category-2 no-smoothState" title="He who searches for meaning here will be sorely disappointed.">
				            <img src="img/10.jpg" alt="image">
				          </a>
				        </div>
				      </div>
				    </section>
				</div>

Masonry

Masonry is a layout style made famous by Pinterest. MAsonry container should have the class "grid", inner item "grid-item"

			
				<div class="grid">
				    <div class="grid-item">
				      <a href="img/1.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/1.jpg" alt="image">
				      </a>
				    </div>
				    <div class="grid-item">
				      <a href="img/v1.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/v1.jpg" alt="image">
				      </a>
				    </div>
				    <div class="grid-item">
				      <a href="img/2.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/2.jpg" alt="image">
				      </a>
				    </div>
				    <div class="grid-item">
				      <a href="img/3.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/3.jpg" alt="image">
				      </a>
				    </div>
				    <div class="grid-item">
				      <a href="img/v2.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/v2.jpg" alt="image">
				      </a>
				    </div>
				    <div class="grid-item">
				      <a href="img/v3.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/v3.jpg" alt="image">
				      </a>
				    </div>
				    <div class="grid-item">
				      <a href="img/4.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/4.jpg" alt="image">
				      </a>
				    </div>
				    <div class="grid-item">
				      <a href="img/5.jpg" class="swipebox no-smoothState" title="This is dummy caption.">
				        <img src="img/5.jpg" alt="image">
				      </a>
				    </div>
				 </div>

6. Animations

Jetpack uses SmoothState for page routing/transitions. SmoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browser doesn't have the required features, smoothState.js fades into the background and never runs. smoothState.js provides hooks that can be used to choreograph how elements enter and exit the page during navigation. It uses the time the animations are running to fetch content via AJAX to inject into the page. SmoothState.js doesn't dictate how things on the page should be animated. It supports CSS animations, as well as JS animation libraries.
The following transitions are prebuilt, so you just need to add the class:

fadein
fadeinup
fadeindown
fadeinright
bouncein

You can add a delay too:

delay-1
delay-2
delay-3
delay-4
delay-5
delay-6

6. Custom Javascript

The routing to work uses ajax, so you need to recall every javascript code after page load. For doing so there is a function inside functions.js called "initiate_plugins", just rewrite your function inside it.
If your not an expert use we suggest you to use the version of the template inside the html folder.
The following conditions are available:

A jQuery selector specifying which anchors within the smoothState element should be bound.

			
				$('#main').smoothState({ anchors: 'a' });

A jQuery selector specifying which forms within the smoothState element should be bound.

			
				$('#main').smoothState({ forms: 'form' });

Controls whather or not form submission responses are preserved in the cache. If set to true, smoothState will store form responses in the cache. This should be set to false unless you understand how caching form results will affect your website's behaviour very well.

			
				$('#main').smoothState({ allowFormCaching: false });

A jQuery selector specifying which elements within the smoothState element should be ignored. This includes both form and anchor elements.

			
				$('#main').smoothState({ blacklist: '.no-smoothState' });

The number of pages to cache. smoothState.js can cache pages in memory, avoiding the user having to request pages more than once. Cached pages will load instantaneously.

			
				$('#main').smoothState({ cacheLength: 0 });

More can be found on GitHub

7. Credits

jQuery
Materialize
MixItUp
Masonry
Swipebox
Swiper
SmoothState
Unsplash

Menu