Flotilla_JS_Rails

Flotilla JS - Lightweight tab system.

Etymology

In the same way content is made up of several tabs, a flotilla is a fleet made up of several small ships.

Installation

Add this line to your application's Gemfile:

gem 'flotilla_js_rails'

And then execute:

$ bundle

Usage

Importing files

application.scss

 @import 'flotilla';

application.js

//= require flotilla

Sample markup

<div class="Flotilla-tab-wrap">
  <div class="Flotilla-tab active">Tab title 1</div>
  <div class="Flotilla-tab">Tab title 2</div>
  <div class="Flotilla-tab">Tab title 3</div>

  <div class="Flotilla-content active">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iusto fugit autem unde incidunt eos ut quos aspernatur facilis corporis possimus obcaecati, et molestiae sint vero optio quia dignissimos commodi!
  </div>
  <div class="Flotilla-content">
    Libero nisi quasi vero laborum dolorem sequi. Tenetur eaque officiis, corporis! Adipisci sit qui corporis fugit, veritatis omnis facere accusamus nihil quas, rem saepe iusto non ea nostrum aliquam laborum
  </div>
  <div class="Flotilla-content">
    Delectus error doloribus. Sint id itaque perspiciatis harum minus magni quaerat dolore quam earum illo velit ipsam facilis, aliquid sapiente numquam atque!
  </div>
</div>

Overriding colors

Create some sass variables to overwrite the gem defaults. See below:

$flotilla-active-background-color: white;
$flotilla-active-border-color: #ff7c14;
$flotilla-border-color: #e4e4e4;

Contributing

If you'd like to contribute a feature or bug fix, please post a pull request and describe what you've done and why you've done it.

Licence & Legals

The contents of this repository are copyright © 2016 PwC. All rights are reserved. PwC refers to the Australian member firm and may sometimes refer to the PwC network. Each member firm is a separate legal entity. Please see www.pwc.com/structure for further details.

It is open source software and may be redistributed under the MIT-License terms (the licence file can be found in the root directory of this repository).

About PwC Ventures

We're hiring! Contact our Group Product Manager at ben@pwcventures.com to find out more.