Meet Bisma

Meet Bisma

A beautiful, modern WordPress theme.

My premium WordPress theme featuring Slidebars is now available. I set out to create a clean, focused theme that provides a consistent experience for users across all platforms and devices. Bisma prioritizes your content, equipping your website with a superior level of readability and usability.

Purchase Bisma Preview Bisma

Usage

Implementing Slidebars into your project is easy. First of all, you'll need to download Slidebars.

Basic Steps

These are the basic steps in order to get Slidebars working on your site. There are also more in-depth descriptions and API usage further down the page.

  1. Add to your meta viewport tag to your head.
  2. Wrap your entire page design in an element with id #sb-site.
  3. Create elements for your Slidebars, giving them a base class of .sb-slidebar.
  4. Set the side of your Slidebars by adding modifier classes.
  5. Add control classes to elements to use the Slidebars.
  6. Include jQuery, slidebars.min.js and slidebars.min.css in your pages.
  7. Call the $.slidebars() method.

Translated Instructions

日本手順

Basic Template

If your just starting, here is a bare minimum template to help. This file is included with the download.

<!doctype html>
<html>
<head>
<title>Slidebars Basic Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- Slidebars CSS -->
<link rel="stylesheet" href="path/to/slidebars.min.css">
</head>

<body>
<div id="sb-site">
<!-- Your main site content. -->
</div>

<div class="sb-slidebar sb-left">
<!-- Your left Slidebar content. -->
</div>

<div class="sb-slidebar sb-right">
<!-- Your right Slidebar content. -->
</div>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Slidebars -->
<script src="path/to/slidebars.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>

In Depth Instructions

01) Viewport

You'll need to include the meta viewport tag in your <head> to ensure your page renders correctly.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

02) Site Container

All of your site content (except Slidebars) should be wrapped in an element with id #sb-site which should be a direct child of the <body>.

<div id="sb-site">
<!-- Your main site content. -->
</div>

03) Adding the Slidebars

Each Slidebar should be direct child of the <body> and must have a base class of .sb-slidebar and a modifer class to set its side.

<div class="sb-slidebar sb-left">
<!-- Your left Slidebar content. -->
</div>

Base Class

Add base class .sb-slidebar to all Slidebars.

Modifier Classes

You can add modifier classes to your Slidebars to alter their behaviour and style. Each Slidebar must have a side set.

.sb-left Sets the Slidebar to the left hand side.

.sb-right Sets the Slidebar to the right hand side.

.sb-static Unfixes the Slidebar so it scrolls naturally with the site. Introduced in version 0.8

.sb-style-push Slidebar is located off-canvas and pushes the site across when opened. Introduced in version 0.9

.sb-style-overlay Slidebar is located off-canvas and overlays the site when opened. Introduced in version 0.9

.sb-width-thin An adaptive width, 15% thinner than the standard width. Introduced in version 0.9

.sb-width-wide An adaptive width, 15% wider than the standard width. Introduced in version 0.9

Custom Widths Introduced in version 0.8

To set a custom width for a Slidebar, add class .sb-width-custom and pass a width as a data attribute data-sb-width. You can pass a pixel width for a fixed layout, or a percentage for fluid. See example below:

<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="15%">
<!-- Your left Slidebar content. -->
</div>

.sb-momentum-scrolling Take advantage of iOS native smooth scrolling by adding this to a Slidebar. Introduced in version 0.10

04) Add Control Classes

There are optional classes which when applied to elements, can be used control the Slidebars. If you do not wish to use these, you can set your own elements to control the Slidebars using the API.

.sb-toggle-left can be used to toggle the left Slidebar. If clicked when the Slidebar is closed, it will open, if clicked when open, it will close.

.sb-toggle-right can be used to toggle the right Slidebar. If clicked when the Slidebar is closed, it will open, if clicked when open, it will close.

.sb-open-left can be used to open the left Slidebar when clicked.

.sb-open-right can be used to open the right Slidebar when clicked.

.sb-close can be used to close either Slidebar when clicked.

If you add the closing class to a link, or parent of a link within a Slidebar, the Slidebar will close before following the link.

05) Including Core Files

You should include slidebars.min.css or slidebars.css in the <head> of your document. You should include this before your own stylesheets.

<link rel="stylesheet" href="path/to/slidebars.min.css">

Before your closing </body> tag, you need to include jQuery (1.8+), followed by either slidebars.min.js or slidebars.min.js.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path/to/slidebars.min.js"></script>

06) Initiate Slidebars

After including jQuery and Slidebars, you need to call $.slidebars() to start it. You may copy and paste this code.

<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>

Options

There are a couple of options which you can set when initiating Slidebars.

<script>
(function($) {
$(document).ready(function() {
$.slidebars({
siteClose: true, // true or false
disableOver: 480, // integer or false
hideControlClasses: true, // true or false
scrollLock: false // true or false
});
});
}) (jQuery);
</script>

siteClose Enables closing of a Slidebar by clicking on the site. Options: true, false. Default: true. Introduced in version 0.7.1

disableOver Disable Slidebars over specified screen width. Options: integer, false. Default: false. Introduced in version 0.8

hideControlClasses Hide Slidebar control classes over width specified in disableOver. Options: true, false. Default: false. Introduced in version 0.8

scrollLock Prevent site content scrolling whilst a Slidebar is open. Options: true, false. Default: false. Introduced in version 0.10

API

Slidebars has a few API methods. You'll need to create your own instance of Slidebars when initiating the plugin. You can then use the following to control your Slidebars:

As of version 0.10 all Slidebars API methods are prefixed with .slidebars

.slidebars.open(side) Opens either Slidebar, specify the side: .open('left') or .open('right')

.slidebars.toggle(side) Toggles either Slidebar, specify the side: .toggle('left') or .toggle('right')

.slidebars.close() Closes whichever Slidebar is open.

.slidebars.init Returns true if Slidebars has been initiated and is operating. Introduced in version 0.9

.slidebars.active(side) Returns true if Slidebar is open, specify a side: .active('left') or .active('right') Introduced in version 0.9

.slidebars.destroy(side) Removes Slidebar from the DOM, specify a side: .destroy('left') or .destroy('right') Introduced in version 0.10

Here is an example of initiating Slidebars for use with the API:

<script>
(function($) {
$(document).ready(function() {
var mySlidebars = new $.slidebars();
$('.my-button').on('click', function() {
mySlidebars.slidebars.open('left');
});
$('.my-other-button').on('click', function() {
mySlidebars.slidebars.toggle('right');
});
$('.my-third-button').click(mySlidebars.slidebars.close);
});
}) (jQuery);
</script>

Animation Class

You can add class .sb-slide to other elements you wish to slide. This is useful if you have elements with fixed positions, such as a top navigation bar.

Helper Classes

Slidebars adds a few classes which can aid you when styling your site.

html.sb-init is present when Slidebars has been initiated and is running. Introduced in version 0.8

html.sb-active is present when either Slidebar is open.

html.sb-active-left is present when the left Slidebar is open.

html.sb-active-right is present when the right Slidebar is open.

html.sb-android is present when Android Browser version 2.* is being used. You can use this to unfix elements with position fixed. Depreciated as of 0.9, see below.

html.sb-static is present when Android Browser < 3 or iOS < 5 is being used. You can use this to unfix elements with a fixed position. Introduced in version 0.9

Apply class .sb-disable-close to a link within a Slidebar to prevent it from closing on click. Depreciated as of 0.10.