clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

How to build a custom zepto

Filed under: JavaScript— Tagged with: jquery

Here's a quick guide on building a custom zepto from comfort of your command line.

Either install Zepto to your project with Bower:

$ bower install zepto

Or clone it from Git:

$ git clone https://github.com/madrobby/zepto.git

cd into the Zepto's dir:

$ cd zepto/

Then, (from the Zepto dir) get the tools needed for the custom build process:

$ npm install

Finally the actual build process:

$ MODULES="zepto event ajax form ie" ./make dist

This will make a Zepto with the chosen modules in it, in this case: zepto, event, ajax, form, and ie. The newly created file can found from the dist directory.

Below are the available modules. At least the defaults should be installed in order for Zepto to work.

module	default	description
zepto	✔	Core module; contains most methods
event	✔	Event handling via `on()` & `off()`
ajax	✔	XMLHttpRequest and JSONP functionality
form	✔	Serialize & submit web forms
ie	✔	Add support for Internet Explorer 10+ on desktop and Windows Phone 8.
detect detect		Provides `$.os` and `$.browser` information
fx		The `animate()` method
fx_methods		Animated `show`, `hide`, `toggle`, and `fade*()` methods.
assets		Experimental support for cleaning up iOS memory after removing image elements from the DOM.
data		A full-blown `data()` method, capable of storing arbitrary objects in memory.
deferred		Provides `$.Deferred` promises API. Depends on the "callbacks" module. When included, [`$.ajax()`](#$.ajax) supports a promise interface for chaining callbacks.
callbacks		Provides `$.Callbacks` for use in "deferred" module.
selector		ExperimentaljQuery CSS support for functionality such as `$('div:first')` and `el.is(':visible')`.
touch		Fires tap– and swipe–related events on touch devices. This works with both `touch` (iOS, Android) and `pointer` events (Windows Phone).
gesture		Fires pinch gesture events on touch devices
stack		Provides `andSelf` & `end()` chaining methods
ios3		`String.prototype.trim` and `Array.prototype.reduce` methods (if they are missing) for compatibility with iOS 3.x.

There's also a one page app to do to the build for you.

Comments would go here, but the commenting system isn’t ready yet, sorry.