Sidr

Sidr is a jQuery plugin for creating side menus. It is the library that I use to create “Previous” and “Next” post button on my Open Sourced WordPress theme (the one you are using right now): ShprinkOne.

Sidr is able to load content from the DOM, through a callback or via an Ajax request. It also propose Responsive menus that are perfect to create a great mobile app.

Sidr is Open Sourced and available on Github.

More about Sidr…

You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). Fill the sidrs normally, with existent content, remote content,… or what you want.http://www.berriart.com/sidr

Installation

Download the lastest version and include the .js and .css (the dark or light version) to your page:

<!DOCTYPE html>
<html>
  <head>
    <!-- Your stuff -->
 
    <!-- Include Sidr bundled CSS theme -->
    <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
  </head>
  <body>
    <!-- Your stuff -->
 
    <!-- Include jQuery -->
    <script src="javascripts/jquery.js"></script>
    <!-- Include the Sidr JS -->
    <script src="javascripts/sidr/jquery.sidr.min.js"></script>
  </body>
</html>

Content loaded from the DOM

HTML

<a id="existing-content-menu" href="#existing-content-menu">Existing content</a> 
<header id="demoheader">
    <h1>Demos &amp; Usage</h1>
</header>
 
<div id="demo-content">
    <p>Here are described different ways of usage for this plugin, you can read and adapt them to your website's requirements. Below are described all options with details.</p>
</div>

JavaScript

$(document).ready(function() {
    $('#existing-content-menu').sidr({
      name: 'sidr-existing-content',
      source: '#demoheader, #demo-content'
    });
});

Content loaded via an Ajax request

HTML

<a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a> 

JavaScript

$(document).ready(function() {
    $('#remote-content-menu').sidr({
      name: 'sidr-remote-content',
      source: 'http://www.example.com/remote-menu.html'
    });
});

Content loaded via a callback

HTML

<a id="callback-menu" href="#callback-menu">Callback loaded</a>

JavaScript

    $('#callback-menu').sidr({
      name: 'sidr-callback',
      source: function(name) {
        return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
      }
    });

Bower

Bower is about to become the best friend of any Frond End developer! It allow us to easily manage Frond End packages and their dependencies. A little bit like what Composer does with PHP packages.

Bower keeps you focus on what’s really important: The code you create, the added value that you generate from third party librairies. Starting a project then becomes real quick and painless as Bower manages dependencies and put them into a dedicated bower_components folder.

More about Bower…

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.http://bower.io/

How to install

In order to install Bower in your machine you will need to have NodeJs and NPM installed. I invite you to install them before going further. Luckily I have written a post about it: How to install Node.js, CoffeeScript, LESS and Uglify-js on Ubuntu

Now you are able to run the following command to install Bower globally:

$ sudo npm install -g bower

Install a package

Using Bower you can install easily the lastest version of a package (and its dependencies) using a single command:

# Using a local or remote package
$ bower install <package>

Example

In this example I want to install the latest version of Bootstrap and its dependency (JQuery).

$ bower install bootstrap

bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.0.0
bower bootstrap#*             validate 3.0.0 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower bootstrap#~3.0.0         install bootstrap #3.0.0
bower jquery#>= 1.9.0          install jquery#2.0.3

bootstrap#3.0.0 bower_components/bootstrap
??? jquery#2.0.3

Here within the bower_components folder Bower created two more folders: bootstrap and jquery.

Install a specific version of a package

# Using a specific version of a package
bower install <package>#<version>

Example

In this example I want to install Bootstrap v2.3.2 (the one just before 3.0.0).

$ bower install bootstrap#2.3.2

bower bootstrap#2.3.2       not-cached git://github.com/twbs/bootstrap.git#2.3.2
bower bootstrap#2.3.2          resolve git://github.com/twbs/bootstrap.git#2.3.2
bower bootstrap#2.3.2         download https://github.com/twbs/bootstrap/archive/v2.3.2.tar.gz
bower bootstrap#2.3.2          extract archive.tar.gz
bower bootstrap#2.3.2         resolved git://github.com/twbs/bootstrap.git#2.3.2
bower jquery#>=1.8.0 <2.1.0     cached git://github.com/components/jquery.git#2.0.3
bower jquery#>=1.8.0 <2.1.0   validate 2.0.3 against git://github.com/components/jquery.git#>=1.8.0 <2.1.0

Install several packages from bower.json

If you want to install several packages at once you will need to create a bower.json file at the root of your project. You can do so by running bower init the result could look like the following file:

{
   "name":"your project name",
   "version":"0.0.0",
   "dependencies":{
      "bootstrap":">= 3.0.0",
      "jquery":">= 1.9.0"
   }
}

Now that you have specified the dependencies you can run the installation:

$ bower install

bower bootstrap#>= 3.0.0        cached git://github.com/twbs/bootstrap.git#3.0.0
bower bootstrap#>= 3.0.0      validate 3.0.0 against git://github.com/twbs/bootstrap.git#>= 3.0.0
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower bootstrap#>= 3.0.0       install bootstrap#3.0.0
bower jquery#>= 1.9.0          install jquery#2.0.3

How to use packages?

Now that you have installed required packages it is easy to reference them in your HTML.

Example

<script src="bower_components/jquery/jquery.min.js"></script>