Getting started

Install with Bower

> bower install moff --save

If you don't use bower you can download development or minified version with the map.

Include

Include Moff into page body.

<body>
...
<script src="bower_components/moff/dist/moff.min.js"></script>
</body>

Setting up

Moff is initialized automatically when DOM is ready with default settings. But you can pass your settings value for initialization in window.moffConfig object.

<body>
...
<script src="bower_components/moff/dist/moff.min.js"></script>
<script>
window.moffConfig = {
	// Website CSS breakpoints.
	// Default values from Twitter Bootstrap.
	// No need to set xs, because of Mobile first approach.
	breakpoints: {
		sm: 768,
		md: 992,
		lg: 1200
	},
	loadOnHover: true,
	cacheLiveTime: 2000
};
</script>
</body>

Setting options

  • breakpoints - Sets break points which are used by framework to determine screen size. Default value of each break point is the same like in Twitter Bootstrap. If you customized Bootstrap break points don't forget to change them in window.moffConfig too. You don't need to set xs breakpoint because of mobile first approach.
  • loadOnHover - Enables instant click effect. On mouse over it pre-loads data and stores in cache. And on click data will be loaded from cache. It works only for non mobile devices.
  • cacheLiveTime - Sets live time for cached data loaded on element hover. Default is 2 seconds. If you increase the value it will use more memory and may the cause of showing old, expired data.

Browser support

Moff framework supports major of modern web browsers.

  • Internet Explorer 9+
  • Mozilla Firefox
  • Google Chrome
  • Opera 12+
  • Apple Safari