Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 64 lines (39 sloc) 3.306 kB
e01a865 @pfiller Markdown, dummy.
pfiller authored
1 #Sidetap
e9de0de @pfiller Do what you want!
pfiller authored
2
3a8e799 @pfiller Update Readme
pfiller authored
3 We built Sidetap to be an easy-to-use implementation of the side navigation pattern popularized by apps like Sparrow and Facebook. It solves many common mobile development problems right out of the box. Here are some of the specific things we like about it:
4464d88 @pfiller Readme needs another header.
pfiller authored
4
3a8e799 @pfiller Update Readme
pfiller authored
5 - **Lightweight**: Sidetap only weighs 2k when minifyied and gzipped!
6 - **Device Support**: Sidetap aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices.
7 - **Less Decisions to Make**: By embracing convention over configuration, Sidetap let’s you start building your mobile interfaces right away.
8 - **Simple**: Sidetap provides a flexible foundation for navigating between content panels on mobile devices using an easy-to-use syntax.
ddc2e33 @pfiller Update readme with demo link.
pfiller authored
9
10 [See it in action](http://harvesthq.github.com/Sidetap/demo/stonehenge/index.html).
11
be12873 @pfiller Update Sidetap README
pfiller authored
12 ##How to Use Sidetap
13
14 1. **Build the HTML Structure**
15
a4ee54d @pfiller Update Readme link to skeleton.
pfiller authored
16 Sidetap uses a very specific HTML structure which can be found in the [skelton.html](https://github.com/harvesthq/Sidetap/blob/master/src/skeleton.html) file
be12873 @pfiller Update Sidetap README
pfiller authored
17
18 2. **Instantiate Sidetap**
19
20 Create a reference to Sidetap from within your app.
21
3a8e799 @pfiller Update Readme
pfiller authored
22 ``var my_sidetap = new sidetap();``
be12873 @pfiller Update Sidetap README
pfiller authored
23
24 3. **Call Animations**
25
26 Any time you want to show a new section, you just tell Sidetap which content element to animate. Sidetap will take care of clearing the stage using whatever animation is appropriate for the situation.
27
8ec8649 @pfiller Try to fix some broken code highlighting.
pfiller authored
28 ```javascript
3a8e799 @pfiller Update Readme
pfiller authored
29 my_sidetap.show_section(element, options);
8ec8649 @pfiller Try to fix some broken code highlighting.
pfiller authored
30 ```
be12873 @pfiller Update Sidetap README
pfiller authored
31
3a8e799 @pfiller Update Readme
pfiller authored
32 **show_section options:**
8ea272c @pfiller Update master
pfiller authored
33 ``callback``: a function to fire when the switch is complete
34 ``animation``: an animation style to use (ios 5+ only). Current animations are upfrombottom, downfromtop, infromright, infromleft
8ec8649 @pfiller Try to fix some broken code highlighting.
pfiller authored
35
3a8e799 @pfiller Update Readme
pfiller authored
36 ##Dependency
37
38 Requires jQuery (only tested with 1.7.2) or Zepto.js.
39
15a6727 @pfiller Introduce Grunt build system.
pfiller authored
40 ##Building Files Using Grunt
41
e09e605 @pfiller Forgot to include links in the Readme
pfiller authored
42 Sidetap's javascript and css are written using coffeescript and less respectively. Each of these file types must be compiled before they can be used by the browser. To do this easily, we're using the excellent [grunt build system](https://github.com/cowboy/grunt). To use the build system, you must first install [node](http://nodejs.org/) and [npm](http://npmjs.org/).
15a6727 @pfiller Introduce Grunt build system.
pfiller authored
43
173c4b8 @pfiller Seems like Grunt might need to be installed globally.
pfiller authored
44 1. Install grunt: ``npm install -g grunt``
15a6727 @pfiller Introduce Grunt build system.
pfiller authored
45 2. Install grunt-contrib: ``npm install grunt-contrib``
46 3. That's it.
47
48 There are a few available commands.
49
50 - ``grunt`` or ``grunt build``: build the css & js files
51 - ``grunt watch``: build the css & js files whenever the less or coffee files change
7c5239c @pfiller Reorder Readme sections
pfiller authored
52
bb6f37b @pfiller Update Readme (Issues / contribution)
pfiller authored
53 ##Reporting Issues & Contributing
54
55 We welcome your input, but strongly encourage you to read Nicolas Gallagher's excellent [issue guidelines](https://github.com/necolas/issue-guidelines/blob/master/README.md) before filing an issue or opening a pull request. While these are guidelines are his projects specifically, they would serve as an excellent guide for contributing to any open source project.
56
7c5239c @pfiller Reorder Readme sections
pfiller authored
57 ##Development Roadmap
58
59 As with any software project, there's always room for improvement. These are some of the things we'd like to get added to Sidetap in the future.
60
61 - More iOS-like header animations
62 - Better touch support
63 - Leaving side navigation open on larger screen devices (hello, iPad)
64 - Bringing polished version to more devices.
Something went wrong with that request. Please try again.