a small framework for authoring mobile apps with native-like performance. full unit test coverage.
JavaScript CSS Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
coffee
demo
dist
js
stylus
test
.gitignore
Gruntfile.coffee
README.md
package.json

README.md

bo

a small (1.6k gzipped) mvv framework for authoring mobile apps with native-like performance. full unit test coverage.

screenshot

demo

http://eighttrackmind.github.io/bo/demo/

what?

  • barebones mvv (fully tested)
  • smooth paging and sliding animation

usage

html

  • <div bo-pane="foo">...</div> - set a pane's ID to foo (works with any tag, not just div)
  • <a bo-trigger="foo">...</div> - slide to the pane with ID foo when clicked/tapped (works with any tag, not just a)

coffee (or js if you prefer)

see https://github.com/eighttrackmind/bo/tree/master/coffee

usage

Put your pages into a single HTML file. Each pane ("screen") should have a unique data-bo-pane attribute. To trigger another pane when clicked/tapped, give the trigger a data-bo-trigger-pane attribute.

<div bo-pane="paneId">
	<button bo-trigger="anotherPaneId">Next</button>
</div>

Link to bo.css in your <head>:

...
<head>
	<link rel="stylesheet" href="bo.css" />
...

Then install dependencies:

npm install

Finally, link to dependencies followed by bo.js at the bottom of your <body>:

	...
	<script src="node_modules/izzy/izzy.js"></script>
	<script src="node_modules/umodel/umodel.js"></script>
	<script src="bo.js"></script>
</body>

api

# create a new Bo instance
bo = new Bo
Method Arguments Description Example
on "event1...", handler Attach a DOM event listener bo.on "mousedown touchstart", (event) -> ...
register DOMElement Register a DOM Element as a Bo pane bo.register document.querySelector "#id"
hideAll - Hide all Bo panes do bo.hideAll
show "id" Show pane with the given ID bo.show "myPaneId"

options

# create a new Bo instance, passing in a custom options dictionary
new Bo options
Option Type Default Description
paneAttribute String "bo-pane" Attribute indicating that an element is a Bo pane
change Function (PaneInstance) -> Callback fired when a Bo pane is shown

building it yourself

npm install
grunt