• This repository has been archived on 05/Aug/2020
  • Stars
    star
    140
  • Rank 261,473 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A responsive, mobile-first accordion UI module for progressive disclosure on the web.

Mobify Bellows

A mobile-first accordion UI module for progressive disclosure on the web.

NPM Dependency Status Build Status

Bellows in action

Demo

You can find a simple demo on the Documentation page. More demos can be found inside the examples folder in the repo. Run grunt examples to see them in Chrome (mobile device emulation is recommended).

Requirements

Zepto Support

Bellows supports Zepto up until v5.1.2 but is not actively developed for it. While we don't actively support Zepto for Bellows, we welcome any and all issues and PRs to help us make it work.

Installation

Bellows can be installed using NPM:

npm install bellows-ui

Usage with Require.js

To use with require.js, after installing through NPM you merely have to reference bellows in your require config file (Note: If your project already has these external dependencies, and the versions are compatible, it's recommended that you use the one in your project to reduce duplication):

{
    'paths': {
        '$': 'node_modules/bellows-ui/node_modules/jquery/dist/jquery.min',
        'plugin': 'node_modules/bellows-ui/node_modules/mobify-plugin/dist/plugin.min',
        'velocity': 'node_modules/bellows-ui/node_modules/velocity-animate/velocity'
        'bellows': 'node_modules/bellows-ui/dist/bellows.min',
    }
}

And then require bellows in as needed:

define(
    ['$', 'bellows'],
    function($) {
        $('.bellows').bellows();
    }
);

Usage

At a bare minimum, your markup structure should follow the above structure. You should have at least one bellows__item. Content within bellows__header and bellows__content can be whatever you want. You may also style either of those however you need. Our default theme will give you some standard styling for those sections but, if you want to theme Bellows yourself, we recommend not including the theme file and starting from scratch.

<!-- Include the CSS -->
<link rel="stylesheet" href="bellows.min.css">

<!-- Optionally include the Theme file -->
<link rel="stylesheet" href="bellows-style.min.css">

<!-- Include the markup -->
<div class="bellows">
    <!-- The Accordion Items -->
    <div class="bellows__item">
        <div class="bellows__header">
            <!-- Item Header - Content can be whatever you want -->
        </div>
        <div class="bellows__content">
            <!-- Item Content - Content can be whatever you want -->
        </div>
    </div>
    <div class="bellows__item">
        <div class="bellows__header">
            <h3>Header</h3>
        </div>
        <div class="bellows__content">
            <p>Content</p>
        </div>
    </div>
    <!-- Use the disabled class if you want items to not respond to open/closed events -->
    <div class="bellows__item bellows--is-disabled">
        <div class="bellows__header">
            <h3>Header</h3>
        </div>
        <div class="bellows__content">
            <p>Content</p>
        </div>
    </div>
</div>

<!-- Include dependencies -->
<script src="jqueryin.js"></script>
<script src="node_modules/velocity-animate/velocity.min.js"></script>
<script src="node_modules/mobify-plugin/dist/plugin.min.js"></script>

<!-- Include bellows.js -->
<script src="bellows.min.js"></script>

<!-- Construct Bellows -->
<script>$('.bellows').bellows()</script>

Initializing the plugin

bellows()

Initializes the bellows.

$('.bellows').bellows();

bellows(options)

Initialize with options.

$('.bellows').bellows({
    singleItemOpen: false,
    duration: 200,
    easing: 'swing',
    open: function(e, ui) {},
    opened: function(e, ui) {},
    close: function(e, ui) {},
    closed: function(e, ui) {}
});

Options

singleItemOpen

default: false

When set to true will force only one item open at a time.

$('.bellows').bellows({
    singleItemOpen: true
});
duration

default: 200

Sets the duration for the animation.

$('.bellows').bellows({
    duration: 600
});
easing

default: swing

Sets the easing for the animation. Bellows takes all of the same easing properties that Velocity.js accepts.

  • jQuery UI's easings and CSS3's easings ("ease", "ease-in", "ease-out", and "ease-in-out"), which are pre-packaged into Velocity. A bonus "spring" easing (sampled in the CSS Support pane) is also included.
  • CSS3's bezier curves: Pass in a four-item array of bezier points. (Refer to Cubic-Bezier.com for crafing custom bezier curves.)
  • Spring physics: Pass a two-item array in the form of [ tension, friction ]. A higher tension (default: 600) increases total speed and bounciness. A lower friction (default: 20) increases ending vibration speed.
  • Step easing: Pass a one-item array in the form of [ steps ]. The animation will jump toward its end values using the specified number of steps.

For more information, check out Velocity's docs on easing.

$('.bellows').bellows({
    easing: 'ease-in-out'
});
open

default: function(e, ui) {}

Triggered every time the selected bellows item is starting to open.

Parameters

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('.bellows').bellows({
    open: function(e, ui) {
        // ui.item contains the item opening
    }
});
opened

default: function(e, ui) {}

Triggered every time the selected bellows item has finished opening.

Parameters

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('.bellows').bellows({
    opened: function(e, ui) {
        // ui.item contains the item that opened
    }
});
close

default: function(e, ui) {}

Triggered every time an bellows item is starting to close.

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('.bellows').bellows({
    close: function(e, ui) {
        // ui.item contains the item closing
    }
});
closed

default: function(e, ui) {}

Triggered every time an bellows item is finished closing.

Parameter name Description
e An Event object passed to the callback
ui An object containing any associated data for use inside the callback
$('.bellows').bellows({
    closed: function(e, ui) {
        // ui.item contains the item that closed
    }
});

Methods

open

Open the selected bellows item by element reference

$bellows.bellows('open', $('.bellows__item'));

or by index

$bellows.bellows('open', 1);

openAll

Opens all the bellows items

$bellows.bellows('openAll');

close

Close the selected bellows item by element reference

$bellows.bellows('close', $('.bellows__item'));

or by index

$bellows.bellows('close', 1);

closeAll

Closes all the bellows items

$bellows.bellows('closeAll');

toggle

Toggle the selected bellows item by element reference

$bellows.bellows('toggle', $('.bellows__item'));

or by index

$bellows.bellows('toggle', 1);

toggleAll

Toggles all the bellows items

$bellows.bellows('closeAll');

add

Adds new items to bellows, and correctly wraps their content elements. Optional third parameter allows you to replace all existing elements with the ones specified.

$bellows.bellows('add', items);

or replacing existing elements

$bellows.bellows('add', items, true);

Known Issues and Workarounds

When the singleItemOpen configuration option is selected and the bellows items contain content that is larger than the overall viewport, closing an item can leave the user disoriented. This is due to the way singleItemOpen works; it closes all open items, then animates the selected one open. This can cause the positioning of the active item in the viewport to shift either up or down, resulting it it not being in the same position as when it was clicked.

To get around this, you can scroll to the item once the animation finishes. To do so, you just need to add the following to the opened event:

$('.bellows').bellows({
    singleItemOpen: true,
    opened: function(e, ui) {
        Velocity.animate(ui.item, 'scroll');
    }
});

This will scroll the viewport to the opened bellows item, restoring its position in the viewport.

Browser Compatibility

Browser Version Support
Mobile Safari 4.0.x Degraded. No transitions.
Mobile Safari 5.0+ Supported.
Android Browser 4.0+ Supported.
Android Browser 2.3.x Degraded. No transitions.
Chrome (Android) 1.0+ Supported.

Building a distribution

Requirements

Steps

  1. npm install
  2. grunt build

The dist directory will be populated with minified versions of the css and javascript files for distribution and use with whatever build system you might use. The src directory has our raw unminified Sass and Javascript files if you prefer to work with those.

License

MIT License. Bellows is Copyright © 2016 Mobify. It is free software and may be redistributed under the terms specified in the LICENSE file.

More Repositories

1

mobifyjs

Mobify.js was a JavaScript framework for optimizing sites for mobile. It is no longer actively maintained.
JavaScript
646
star
2

pikabu

Off-Canvas flyout menu
HTML
453
star
3

iterstuff

Useful tools for working with iterators
Python
169
star
4

branching-strategy

🔀 Branching strategies! For Git!
135
star
5

scooch

A mobile-first JavaScript-driven content and image carousel
JavaScript
125
star
6

mobify-code-style

📚 Mobify's coding style and standards!
Python
117
star
7

handbooks

A collection of Mobify's internal handbooks and styleguides
90
star
8

developer-values

🙌 Principles to follow when building software.
76
star
9

commercecloud-ocapi-client

Salesforce Commerce Cloud Open Commerce API (OCAPI) for Node and browsers 🛒
JavaScript
70
star
10

nightwatch-commands

A set of Mobify specific custom commands for Nightwatch.js
JavaScript
60
star
11

magnifik

An image zooming module for mobile
JavaScript
54
star
12

sass-sleuth

Adapts Webkit Web Inspector to handle Sass line number debugging information
36
star
13

mobify-client

Mobify CLI and Tools for use with the Mobify.js Adaptation Framework
JavaScript
23
star
14

pinny

A mobile-first content fly-in UI plugin
JavaScript
23
star
15

mobify-modules

DEPRECATED! See https://github.com/mobify/mobify.github.io
CSS
23
star
16

meowbify

🐈 Meowbify
CoffeeScript
17
star
17

mobifyjs-demos

Demo mobile sites created using Mobify.js
JavaScript
15
star
18

hijax

XHR Proxy to intercept AJAX calls independent of libraries.
JavaScript
13
star
19

spline

⚠️ DEPRECATED. Spline is a mixin and function library for Sass. It makes writing stylesheets for mobile-first builds faster and easier. Spline provides methods to manipulate text, use web & icon fonts, create CSS3 shapes, and much more.
CSS
11
star
20

ui-kit

📱 Quickly and efficiently design PWAs for ecommerce brands.
10
star
21

hybris-occ-client

🛍 Hybris Omni Commerce Connect (OCC) client for Node and browsers.
HTML
9
star
22

capturejs

Transform your DOM to be your API for your front-end application
JavaScript
9
star
23

mobify-data-guide

📚 List of readings that would be useful in getting started on with working with any data set.
7
star
24

vellum

Default project styles for a mobile-first AdaptiveJS build.
HTML
5
star
25

redux-runtypes-schema

Redux store validation via runtypes
TypeScript
5
star
26

deckard

Device OS and Browser detection
HTML
5
star
27

astro-scaffold

🏗 Starting point for building Astro applications!
JavaScript
4
star
28

split-test

An A/B split test library for persisting split choices
JavaScript
4
star
29

stencil

DEPRECIATED - The latest Stencil development is currently taking place in the Adaptive.js repo.
CSS
4
star
30

imageresize-client

Client code for the Mobify image resizing API
HTML
4
star
31

hora.js

Hora.js: Custom Google Analytics Tracking
HTML
3
star
32

lockup

A mobile first scroll blocking plugin.
HTML
3
star
33

navitron

A mobile optimized sliding navigation plugin.
JavaScript
3
star
34

tozee

Alphabet scroll jumping
HTML
3
star
35

python-appfigures

API wrapper for the appfigures.com
Python
3
star
36

webpush-payload-encryption

Python code to handle the encryption of push notifications for Firefox and Chrome
Python
3
star
37

calypso

A set of tools for better Docker deployments to AWS Elastic Beanstalk.
Python
3
star
38

multiple-service-workers

Experimenting with multiple service workers
HTML
2
star
39

shade

A mobile-first plugin for creating scroll and touch blocking overlays for content
JavaScript
2
star
40

jazzcat-client

Client code for Mobify's javascript optimization service
JavaScript
2
star
41

level

⚠️ DEPRECATED. CST's own personal Normalize
CSS
2
star
42

styleandclass-planning

Style & Class Meetup Public Site
2
star
43

css-optimize

The client-library for optimizing CSS using the Jazzcat service
JavaScript
2
star
44

webpayments-test

💳 PaymentRequest browser API demo.
JavaScript
2
star
45

schemer

Schema comparison tool for Adaptive projects
JavaScript
2
star
46

dmit

Wrap docker-machine in useful functionality
Shell
2
star
47

descript

Manage desktop scripts in a simple way in Adaptive.js
HTML
2
star
48

heroku-buildpack-openssl

Buildpack for OpenSSL 1.0.2e on Heroku
Shell
2
star
49

selector-utils

Selector utility functions that can be selectively included in your Adaptive.js builds.
JavaScript
1
star
50

generator-nightwatch

A yeoman generator for Nightwatch testing framework
JavaScript
1
star
51

deprecated-mobify-tech-prtnr-na03-dw

The Demandware Demonstration Integration
CSS
1
star
52

stencil-fancy-select

A fancier select replacement component using Javascript
CSS
1
star
53

generator-progressive-web

❗️DEPRECATED❗️-- Generator for creating Progressive Web projects
Shell
1
star
54

adaptivejs-split-test-examples

Split test examples for Adaptive.js!
JavaScript
1
star
55

depot

A collection of mobile-focused lo-fi wireframe components built in Photoshop.
1
star
56

stencil-tabs

JavaScript
1
star