SIOUX

About

Sioux is a collection of modules, that helps create apps for the mobile web. It tries to follow in some ways, how the programming for iOS works, but takes advantage of the benefits of javascript, CSS and nodejs. These projects are node modules that can be installed via npm and run in the browser using browserify. It targets mainly the popular mobile browsers (safari, and chrome for android).

The projects main goal to give developers tools that makes it easy to create great apps specific to the mobile web.

Modules

sioux-global

$ npm install sioux-global

This module is essential for every sioux module. It's not a dependency to any of them, because it has to be required by the user once at the start of the app. It uses node-touch to apply special, touch specific behaviour and events, to the elements that have the class touch. It also can serve as a jQuery-like selector query tool, so it's easy to add events to elements this way.

var $ = require('sioux-global');

$('.foo').on('tap', function(event) {
  console.log('Tapped!');
}).on('swipestart', function (event) {
  if (event.direction === 'RIGHT') {
    console.log('Swipe started to the left!');
  }
});

sioux-segue

$ npm install sioux-segue

Push and modal segue for sioux. The push type will perform a right to left wind and a left to right unwind. The modal type will animate a window from the bottom when winding, and back when unwinding.

var $ = require('sioux-global');
var Segue = require('sioux-segue');

var segue = new Segue($('.foo'), 'push');
segue.wind(function () {
  var button = document.createElement('button');
  button.innerText = 'Click';
  return button;
}, function () {
  console.log('Content loaded!');
});

sioux-navigation

$ npm install sioux-navigation

Similar to the iOS one. It uses a stack, that stores the navigation objects. These objects have a title, a content (which is a function that returns DOM) and a complete property. With this, it's easy to create apps with multiple windows.

var $ = require('sioux-global');
var Navigation = require('sioux-navigation');

var navObj = {
  title: 'Home window'
  , content: function () {
    var h1 = document.createElement('h1');
    h1.innerText = 'Home';
    return h1;
  }
  , complete: function () {
    console.log('Home window loaded!');
  }
};

var nav = new Navigation($('.foo'), { initWith: navObj });
nav.push(otherNavObj);
nav.pop();

sioux-offscreen

$ npm install sioux-offscreen

An off screen navigation item. Similar to the menu of the Facebook and Path app. It requires two parts: an offscreen elem which is hidden behind the other onscreen element.

var $ = require('sioux-global');
var Offscreen = require('sioux-offscreen');

var off = new Offscreen($('.foo'), $('.bar'));
off.toggle(function () {
  console.log('Toggled!');
})

How

install

To install the modules, use the nodejs package manager, npm:

$ npm install sioux-global

To use the modules in the browser and create a bundle, use browserify:

$ npm install browserify -g

You can use browserift in command line:

$ browserify main.js > bundle.js

Or use it in code:

var browserify = require('browserify');
var b = browserify();

b.add('./main.js');
b.bundle().pipe(process.stdout);

The other important part is to create a bundle from the used .css files that are in the modules. You can create this bundle easily using cascadify:

$ npm install -g cascadify

Command line:

$ cascadify ./main.js > style.css

In code:

var cascadify = require('cascadify')();

cascadify.add('./main.js');
cascadify.bundle().pipe(process.stdout);

use

To start use the modules, in your .html file there has to be a div with the class screen, all the action goes on in there:

<html>
  <head>
    <link rel="stylesheet" href="./style.css">
    <script src="./bundle.js"></script>
  </head>
  <body>
    <div class="screen"></div>
  </body>
</html>

In your .js file, you just use them as regular node modules:

var $ = require('sioux-global');
window.$ = $; // it is optional to make it global, but useful
var Offscreen = require('sioux-offscreen');

var off = new Offscreen($('.foo'), $('.bar'));
off.show();

get involved

There are still a lot to do to make it easy to create apps for the mobile web. These modules are just the beginning, I have more ideas for modules, that will be done in the near future. And make your own idea, if you beleive, that it is possible to create apps for the mobile web that can live up to the quality of native apps.

If you have any question, feedback, problem with project or modules: