https://github.com/domchristie/drawer

A starting point for building 2-column responsive layouts that implement a smooth (jank free) sliding sidebar
https://github.com/domchristie/drawer

Last synced: 12 days ago
JSON representation

A starting point for building 2-column responsive layouts that implement a smooth (jank free) sliding sidebar

• Host: GitHub
• URL: https://github.com/domchristie/drawer
• Owner: domchristie
• Created: 2013-11-17T19:37:16.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2013-12-05T16:14:31.000Z (almost 11 years ago)
• Last Synced: 2024-11-01T19:07:37.373Z (12 days ago)
• Language: CSS
• Homepage: http://domchristie.github.io/drawer/
• Size: 336 KB
• Stars: 4
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Drawer: jank free sliding sidebar layouts

## What?

**Drawer** is a starting point for building 2-column responsive layouts that implement a smooth sliding sidebar (or _drawer_).

The default behaviour is as follows:

**On smaller viewport sizes**: the drawer is hidden by default. When the drawer is shown, the content is shifted to the right, whilst maintaining its width.

**On larger viewport sizes**: the drawer is always shown (toggling makes no difference). Content fills the remaining space.

## Why?

The project was created to fulfil the following requirements:

*   It should include **jank free sliding transitions**, by making use of hardware accelerated properties (i.e. CSS transforms).

*   It **should not break native scrolling controls**: the main content should be scrollable using page up/down keys, as well as by using the _tap-status-bar-to-return-to-top_ behaviour.

*   **Very few (if any) external dependencies**, to keep it lightweight and easy to customise.

*   Leave most of the interaction/visual design to the implementer.

There are a few other implementations of the general UI pattern, but it was difficult to find one that fulfilled all of the above.

## Usage

1.  Add the following meta viewport tag:

        

2.  Include the `drawer.css` stylesheet

3.  Wrap your sidebar content in an element with a class of `drawer`

4.  Wrap any content that “butts up” to the drawer in an element with a class of `drawer-butt`. (This will usually be your main content, but it may also be a header, for example. See [simple example](http://domchristie.github.io/drawer/examples/simple.html).)

5.  Read the `drawer.css` source code, and customise as you wish.

6.  Toggle the drawer by adding/removing the `drawer-open` class to the body element

    For example, if you had a toggle element with a `data-drawer-toggle` attribute, you might toggle the drawer with jQuery, as follows:

        $(document).on('click touchstart', '[data-drawer-toggle]', function() {

          $('body').toggleClass('drawer-open');

        });

## Browser Support

Drawer has been designed to work with _modern browers_ i.e. **recent versions** of **Chrome**, **Firefox**, **Safari**, **Opera**, and **Internet Explorer** (although sliding animations will not work in IE9). IE 7/8 users will see the two-column version of the site (toggling will have no effect).

## Examples

*   [A basic fixed header and toggle example](http://domchristie.github.io/drawer/examples/simple.html)

*   [A responsive navigation bar example](http://domchristie.github.io/drawer/examples/navigation.html)

## Bibliography

Drawer uses ideas from the following resources:

*   [Mailchimp Pattern Library](http://ux.mailchimp.com/patterns)

*   [Multi-Device Layout Patterns](http://www.lukew.com/ff/entry.asp?1514) by Luke Wroblewski

*   [Off Canvas: A Multi-Device Web Layout Pattern](http://jasonweaver.name/lab/offcanvas/) by Jason Weaver

*   [Jank Free](http://jankfree.org/)

## Licence

Drawer is copyright © 2013 [Dom Christie](http://domchristie.co.uk) and is released under the MIT licence.