iq-scm / project-tyson Goto Github PK

Project-Tyson
=============

A project about faking the UI of iOS 7 in HTML, CSS and Javascript.
More info: http://c2prods.com/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/


How to use this project
=======================
In your HTML, split your app into different views. Each view is made as follow:
<section class="{hidden|active}" id="view-{ID}">
	<header>
		<h1>{View Title}</h1>
		<button class="{right|left,bold,green,arrow}"  data-vin="view-{targetID}" data-sd="{sl|sr|popin|popout}">
			<div class="label">Button Label</div>
		</button>
	</header>
	<div class="scrollMask"></div>
	<div class="scrollWrap">
		<div class="scroll">
			<div class="content">
				{content}
			</div>
		</div>
	</div>
</section>

Additionnally, you can have a tabbar displayed at the bottom by adding a <nav> tag to the body's HTML. Here's the tabbar's structure:
<nav>
	<button id="btn{ID}" class="{active}" data-vin="view-{targetID}">
		<div class="btn-icon" style="-webkit-mask-image: url({url});"></div>
		<div class="label">{button label}</div>
	</button>
</nav>

Finally, views are linked together by the Slide() javascript function. Buttons in the header are automatically binded to this function but you can choose to bind it to other HTML elements. You just have to make sure they feature the following data- attributes:
data-vin: the ID of the view to load (for instance data-vin="view-home")
data-sd: to indicate the slide direction (sl, sr, popin, popout)
Note that the Slide function can take an optionnal callback parameter to specify a callback function that will be called when the transition starts.


This repo uses the Elusive Iconfont github project
==================================================
Tabbar's icons are from the Elusive icon pack. The Elusive Iconfont is an icons webfont, optimized for use with twitter's bootstrap.

For examples & usage see http://aristath.github.com/elusive-iconfont/

Licence: [SIL](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)