Satellite - Documentation
1. What is It
Satellite 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.
- Inside the folder named “css” are listed the stylsheets:
- sweetalert.css contains the dialog'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;
- sweetalert.min.js contains the dialog'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 title and some icons with the dropdown menu;
- The "main" contains the contents and the page’s main structure. This is what basically changes from page to page;
Header
Satellite comes with three types of Header:
The Fixed Header is a header that stays always on top of the page, even if scrolled down.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
The Scrollable Header is a header that scrolls with the text, rather than staying locked at the top
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
The Waterfall Header is a header that contracts as the page scrolls down.
<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp" />
</div>
</div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
Sidebar
The Sidebar contains some user information plus the main navigation of the website. To open the Sidebar just click the top-left button in the header. Listed below the code of the sidebar:
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
Grid
To create a more complex layout, Satellite comes with a Grid System. Listed below, a simple snipset of code that show how to create a grid.
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">6</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--2-col">2</div>
</div>
Grid cell should always be equal to 12.
Page Content
Page content is always inside the tag main, with the mdl-layout__content class.
There you can export all the page’s contents except for the main header navigation and the footer.
4. Make an App
Satellite can also be used to develop Web app.
In order to create a Web App you just need to copy the code below and paste it in the tag head. In this way it is also possible to save the app in the device main screen, to later open it in full screen mode.
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" sizes="196x196" href="img/touch/touch-icon-196x196.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!-- Tile icon for Windows 8+ -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
5. Components
Satellite comes with the following components:
Alerts
Satellite uses the Sweetalert plugin to keep the use of modal, dialog and alert easier.
The HTML code to create an alert is:
<button class="alert">Try me!</button>
Then call the plugin inside function.js:
$('.alert').on('click', function(){
swal({
title: "Alert!",
text: "That's pretty cool!",
type: "success",
confirmButtonText: "Yeah!"
});
})
Badges
Badges are small status descriptors for UI elements.
Number badge
<span class="mdl-badge" data-badge="4">Inbox</span>
Icon badge
<span class="mdl-badge" data-badge="♥">Mood</span>
Buttons
Buttons comes with or without Ripple Effect, to remove it delete the mdl-js-ripple-effect class.
Colored FAB button with ripple
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
Plain FAB button with ripple
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
Raised button with ripple
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>
Accent-colored raised button with ripple
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
Flat button with ripple
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>
Colored Icon button
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class="material-icons">mood</i>
</button>
Cards
Cards are self-contained pieces of paper with data.
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
Menus
Menus are lists of clickable actions. You can change the menu position with those classes: mdl-menu--bottom-left, mdl-menu--bottom-right, mdl-menu--top-left and mdl-menu--top-right.
<button id="demo-menu-lower-left"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-left">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
Sliders
Slider are needed for selecting a value out of a range.
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0"/>
Toggles
Toggles are need for choose between states.
Checkbox
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
<span class="mdl-checkbox__label">Checkbox</span>
</label>
Switch
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
<span class="mdl-switch__label"></span>
</label>
Table
Table are useful for organize data.
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
Text Fields
Text fields are textual input components.
Simple text data
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1" />
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
</form>
Text field with floating label
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" />
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
Floating textarea
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
</form>
6. Page Transitions
Satellite uses Animsition, a simple and easy jquery plugin for page transitions.
There are 58 page transitions available: fade-in, fade-out, fade-in-up-sm, fade-in-up, fade-in-up-lg, fade-out-up-sm, fade-out-up, fade-out-up-lg, fade-in-down-sm, fade-in-down, fade-in-down-lg, fade-out-down-sm, fade-out-down, fade-out-down-lg, fade-in-left-sm, fade-in-left, fade-in-left-lg, fade-out-left-sm, fade-out-left, fade-out-left-lg, fade-in-right-sm, fade-in-right, fade-in-right-lg, fade-out-right-sm, fade-out-right, fade-out-right-lg, rotate-in-sm, rotate-in, rotate-in-lg, rotate-out-sm, rotate-out, rotate-out-lg, flip-in-x-fr, flip-in-x, flip-in-x-nr, flip-out-x-fr, flip-out-x, flip-out-x-nr, flip-in-y-fr, flip-in-y, flip-in-y-nr, flip-out-y-fr, flip-out-y, flip-out-y-nr, zoom-in-sm, zoom-inzoom-in-lg, zoom-out-sm, zoom-out, zoom-out-lg, overlay-slide-in-top, overlay-slide-out-top, overlay-slide-in-bottom, overlay-slide-out-bottom, overlay-slide-in-left, overlay-slide-out-left, overlay-slide-in-right, overlay-slide-out-right.
HTML markup:
<div class="animsition">
<a href="./page1" class="animsition-link">animsition link 1</a>
<a href="./page2" class="animsition-link">animsition link 2</a>
</div>
If you want each "linkElement" to use a different animation:
<a
href="./page1"
class="animsition-link"
data-animsition-out="fade-out-right"
data-animsition-out-duration="2000"
>
animsition link 1
</a>
<a
href="./page2"
class="animsition-link"
data-animsition-out="rotate-out"
data-animsition-out-duration="500"
>
animsition link 2
</a>
And then call the plugin in your function.js file:
$(document).ready(function() {
$(".animsition").animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
loading: true,
loadingParentElement: 'body',
loadingClass: 'animsition-loading',
unSupportCss: [
'animation-duration',
'-webkit-animation-duration',
'-o-animation-duration'
],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body'
});
});
7. Credits
- jQuery
- Material Design Light
- Sweetalert
- Animsition
- Swipebox
- Unsplash