Joshfire is a french company that offers an open source framework targeting multiple devices, such as mobiles, tablets, TVs and desktops. This framework uses only standards like HTML5 and JavaScript, and allows developers and integrators to quickly create native and dedicated web apps for browsers, Node.JS, desktops, smart phones, smartTVs and connected objects. The applications can run on server or client side depending on the device capabilities. Currently the framework has a good support for “content-based” applications, including text, audio and video browsing. Depending on user need, future releases may focus on form input and other areas.

Adapters

Several adapters are provided, one for each supported device. When an application is launched, it must choose an adapter matching the device it is currently running on.

Application Class

Joshfire has a default App implementation that allows others to inherit from, it provides initialization methods and general glue.

Data and User Interface

Each application manages two tree structures:

• Data Tree: contains all the data the application needs to load or use over time
• UI Tree: contains all the UI elements the user might see or interact with (buttons, lists, videos…)

The advantages include: clear separation of concerns (content and layout), each element is addressable with a unique path, simple mappings can be made with existing standards.

UI Elements

Basic UI elements are abstracted in base classes from which inherit device-specific implementations.

• In a browser: a simple <UL> – <LI> combo
• In a smartphone (iOS, Android, etc.): a scrollable, native-looking list
• In a shell: a list of choices in a command-line
• In a connected TV: a browseable ribbon

Inputs

Each adapter supports several input methods like “keyboard”, “mouse”, “touch”, “tvremote”, etc.

Each user interaction can be mapped to an event to which any part of the application can react.

Inputs can also be proxies for remote controllers, with a simple TCP packet firing an event in the app.

This content is originally published in the Joshfire website.

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Layouts description

• Default: 10 columns at 992 px. For desk­tops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width for long-form text;
• Mobile: 3 columns at 320 px. For iPhones, iPod Touches, and most other modern mobile devices. Has generous outer margins that let the layout breathe;
• Tablet: 8 columns at 768 px. For iPads and other tablets. Perfect for long-form reading when using centered, 6-column wide text;
• Wide mobile: 5 columns at 480 px. For large mobile devices, as well as iPhones and iPod Touches in landscape orientation. Quick to code, since it inherits styles from both the Default Layout and the Mobile Layout.

How it works

Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

The three sets of typography pre­sets are aligned to a 24 px baseline grid; one is based on 16 px body text, one on 17 px, and one on 18 px. Both sets contain several harmonious type sizes calculated using the Golden Ratio.

Further information can be found at: http://lessframework.com/