sidebar

Getting started

Getting started

NIGHTLY works alongside jQuery Mobile version 1.4 and above. If you want to use NIGHTLY properly you must follow official jQuery Mobile code.

NIGHLTY is built on jQuery Mobile and supports majority of mobile devices.

Useful stuff

When working in NIGHTLY you will find useful list of examples that comes with the template. Also you can use official jQuery Mobile Docs and Demos page.

Site building

There are few rules you need to follow in order to keep all the functionalities.

  1. Always check in <head> if there are all nercessary libraries and correct spelling.
  2. Every page must follow basic jQM structure (see below).
  3. Check step 1 and 2.

HTML Head

Mobile devices markup

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Import jQuery Mobile CSS

<link rel="stylesheet" href="css/jqeury.mobile.theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.min.css" />

Import NIGHTLY styles

<link rel="stylesheet" href="css/nightly.css" />

Import nercessary Google Fonts

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic|Oswald:400,700' rel='stylesheet' type='text/css'>

Load Font Awesome icons

<link rel="stylesheet" href="css/font-awesome.min.css">

Load jQuery (JS)

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Load jQuery Mobile (JS)

<script src="js/jquery.mobile.min.js"></script>

HTML Page Structure

You can create your own HTML page using this basic structure.

<body>
  <div data-role="page" data-theme='a'>
    <div data-role="header">
    </div>
    
    <div data-role="content">  
    </div>   
    
    <div data-role="footer">  
    </div>
  </div>
</body>

Very useful - check examples page for markup examples.

NIGHTLY 2014. All rights reserved.