Layout Demos

how we lay it out

Third party components: the A list

Origami components may have dependencies (via Bower) on third party components. This page documents which third party libraries are preferred where there may be multiple libraries that achieve the same goal.

Like the rest of the Origami spec (except for the developer guide) these guidelines do not apply to products, only to components.

This is a list

  1. This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae.
  2. This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae.
  3. This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae.
  4. This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae.
  5. This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae.
  6. This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae.

This is a table

For thisUse thisNot theseBecause
DOM manipulation o-dom (TBC) jQuery
Mootools
Dojo
Prototype
YUI
A general purpose DOM manipulation library is invariably a common request, but large DOM libraries should be avoided since they contain numerous other features beyond simple DOM manipulation. See also Why not jQuery
AJAX fetch jQuery, superagent Components should not use jQuery, fetch is better and will be supported natively by browsers. In the meantime a polyfill exists and is available through the Polyfill Service.
Event delegation ftdomdelegate jQuery Components should not use jQuery.
JavaScript utils Lodash Underscore, lodash-node Lodash V3 allows each method to be individually requireable e.g. require('lodash/function/defer'), which is more preferable than requiring the whole library. Lodash is roughly functionally equivalent to Underscore, but generally delivers faster performance, and includes some useful things not available in Underscore. Lodash-node was deprecated with the release of Lodash V3.
Throttle/debounce o-utils Lodash o-utils has its own throttle and debounce functions.
Template engine Hogan Mustache
Handlebars
It's compatible with Mustache templates, but offers additional features on top of Mustache's syntax. Origami has no opinion on how product developers should build applications, so when a component's purpose is to offer a raw template to the developer, it must use only fully Mustache-compatible syntax (but these components would also not actually require the template engine themselves).

Components that contain templates but only use them internally in order to render a UI element, may use the more advanced template syntax offered by Hogan, and prefer Hogan as the template engine.

Touch interactions Hammer.JS

It offers a highly extensible, well tested and lightweight way to interact with touch events, including both single- and multi-touch gestures.