Coffin

Version 1.0.0-rc.2

About Coffin

Coffin is a UI component built on top of the Skeleton framework. It aims to provide a simple, collapsible left shelf. Coffin is fully responsive and automatically collapses in mobile views - allowing you to swipe away and toggle a nagivation in and out of view. It behaves similar to facebook/path's navigation UI.

Versioning

Coffin tries to adhere to semver as defined here http://semver.org/

Dependencies

Coffin's only dependency is skeleton. It has no js dependencies.

Browser Support

Currently only tested in Chrome and Safari on my iphone. Planning on adding more browsers as this tightens up though.

Getting Started

Using coffin is super easy. Just define a .coffin and a .page. A coffin is a collapsible drawer (you may have seen it implemented in facebook or path's iphone application). A page is a wrapper for your container. It's what slides over the top of your coffin.

Assets

To use coffin make sure you include skeleton's CSS. You'll want to have your assets loaded in a similar order as to what is shown directly below. You should include coffin.js at the bottom of your page, not in the head!

Markup

There are three main things to note when marking up a page with a coffin.

data-coffin="touch" & data-coffin="click" - these attributes will toggle the coffin in and out of view when at a mobile size. You can place these attributes on any element. The difference between touch and click is that touch will fire the toggle on touchstart (faster in mobile) and click will fire the toggle on click (useful for nav elements where you want the default click action to execute).
.page - a wrapper for the container element. Used to controll the sliding of the main content of a page. Note: Containers within a .page class work off a 10-column grid rather than a 16-column grid, which is different than a standard skeleton implementation and done in order to make space for an open coffin.
.coffin - the coffin is the side shelf. It can contain .pillow elements which are sectioning bars, as well as a ul.nav elements.

A simple implementation for the above markup might look something like this:

Contributing

This project is hosted on github. Feel free to file an issue or open a pull request against the project here.

If you are opening a bug, please provide a link to a reproducible test case - preferably in jsfiddle or jsbin. If you are submiting a pull request, please do so from a feature branch. Thanks!