BookingSync Styleguide

Plugin dependency

This component requires BookingSync menu and Bootstrap collapse JS plugins.

<nav id="sidebar" class="menu menu-fixed flex-col">
  <header class="menu-header">
    <div class="menu-icon menu-header-icon">
      <i class="bs-icon-bookingsync"></i>
    </div>
    <div class="menu-body menu-header-body">
      <h4 class="menu-header-heading">Vacation Rentals</h4>
      <small>
        <a href="#menu-header-submenu"
           data-toggle="collapse"
           role="button"
           aria-expanded="false"
           aria-controls="menu-header-submenu"
           class="collapsed">
          Switch account
          <span class="caret"></span>
        </a>
      </small>
    </div>
    <nav id="menu-header-submenu" class="collapse menu-header-submenu">
      <ol>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-body menu-link-body">
              Bed and Breakfast
            </div>
          </a>
        </li>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-body menu-link-body">
              City Apartments
            </div>
          </a>
        </li>
      </ol>
    </nav>
  </header>
  <div class="menu-body flex-1">
    <ol>
      <li role="presentation" class="active">
        <a href="#" class="menu-link">
          <div class="menu-icon menu-link-icon">
            <i class="icon-calendar"></i>
          </div>
          <div class="menu-body menu-link-body">
            Bookings
          </div>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="menu-link">
          <div class="menu-icon menu-link-icon">
            <i class="icon-clients"></i>
          </div>
          <div class="menu-body menu-link-body">
            Clients
          </div>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="menu-link">
          <div class="menu-icon menu-link-icon">
            <i class="icon-rental"></i>
          </div>
          <div class="menu-body menu-link-body">
            Rentals
          </div>
        </a>
      </li>
    </ol>
  </div>
  <footer class="menu-footer">
    <ol>
      <li role="separator" class="divider"></li>
      <li role="presentation">
        <a href="#" class="menu-link">
          <div class="menu-icon menu-link-icon">
            <i class="icon-applications"></i>
          </div>
          <div class="menu-body menu-link-body">
            Apps
          </div>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="menu-link" data-toggle="menu-expand"
           data-menu="#sidebar" data-submenu="#sidebar-settings">
          <div class="menu-icon menu-link-icon">
            <i class="icon-settings"></i>
          </div>
          <div class="menu-body menu-link-body">
            Settings
          </div>
          <div class="menu-caret">
            <span class="caret-right"></span>
          </div>
        </a>
      </li>
      <li role="separator" class="divider"></li>
      <li role="presentation">
        <a href="#menu-footer-submenu"
           data-toggle="collapse"
           role="button"
           aria-expanded="false"
           aria-controls="menu-footer-submenu"
           class="collapsed menu-link">
          <div class="menu-icon menu-footer-icon">
            <img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
                 class="img-rounded">
          </div>
          <div class="menu-body menu-link-body">
            Jane Doe
          </div>
          <div class="menu-caret">
            <span class="caret"></span>
          </div>
        </a>
      </li>
    </ol>
    <nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
      <ol>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-icon menu-link-icon">
            </div>
            <div class="menu-body menu-link-body">
              Help Center
            </div>
          </a>
        </li>
        <li role="separator" class="divider"></li>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-icon menu-link-icon">
            </div>
            <div class="menu-body menu-link-body">
              Profile
            </div>
          </a>
        </li>
        <li role="presentation" class="active">
          <a href="#" class="menu-link">
            <div class="menu-icon menu-link-icon">
            </div>
            <div class="menu-body menu-link-body">
              Logout
            </div>
          </a>
        </li>
      </ol>
    </nav>
  </footer>
</nav>
<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
  <header class="menu-header">
    <div class="menu-body menu-header-body">
      <h4 class="menu-header-heading">Settings</h4>
    </div>
  </header>
  <div class="menu-body flex-1">
    <ol>
      <li role="presentation" class="active">
        <a href="#" class="menu-link">
          <div class="menu-body menu-link-body">
            General
          </div>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="menu-link">
          <div class="menu-body menu-link-body">
            Payments
          </div>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="menu-link">
          <div class="menu-body menu-link-body">
            Apps
          </div>
        </a>
      </li>
    </ol>
  </div>
</nav>

Plugin dependency

This component requires BookingSync menu and Bootstrap collapse JS plugins.

<nav class="menu menu-fixed flex-col menu-submenu menu-app">
  <header class="menu-header">
    <div class="menu-body menu-header-body">
      <h4 class="menu-header-heading">Awesome App</h4>
      <small>
        <a href="#menu-header-submenu"
           data-toggle="collapse"
           role="button"
           aria-expanded="false"
           aria-controls="menu-header-submenu"
           class="collapsed">
          San Francisco
          <span class="caret"></span>
        </a>
      </small>
    </div>
    <nav id="menu-header-submenu" class="collapse menu-header-submenu">
      <ol>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-body menu-link-body">
              French riviera
            </div>
          </a>
        </li>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-body menu-link-body">
              New York
            </div>
          </a>
        </li>
      </ol>
    </nav>
  </header>
  <div class="menu-body flex-1">
    <ol>
      <li role="presentation" class="active">
        <a href="#" class="menu-link">
          <div class="menu-body menu-link-body">
            General
          </div>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="menu-link">
          <div class="menu-body menu-link-body">
            Payments
          </div>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="menu-link">
          <div class="menu-body menu-link-body">
            Apps
          </div>
        </a>
      </li>
    </ol>
  </div>
  <footer class="menu-footer">
    <ol>
      <li role="separator" class="divider"></li>
      <li role="presentation">
        <a href="#menu-footer-submenu"
           data-toggle="collapse"
           role="button"
           aria-expanded="false"
           aria-controls="menu-footer-submenu"
           class="collapsed menu-link">
          <div class="menu-body menu-link-body">
            Settings
          </div>
          <div class="menu-caret">
            <span class="caret"></span>
          </div>
        </a>
      </li>
    </ol>
    <nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
      <ol>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-body menu-link-body">
              Help Center
            </div>
          </a>
        </li>
        <li role="presentation">
          <a href="#" class="menu-link">
            <div class="menu-body menu-link-body">
              Videos
            </div>
          </a>
        </li>
      </ol>
    </nav>
  </footer>
</nav>

List group

<div class="panel panel-default">
  <ul class="list-group list-unstyled">
    <li class="active">
      <a href="#" class="list-group-item">Vacation Rentals</a>
    </li>
    <li>
      <a href="#" class="list-group-item">City Apartments</a>
    </li>
  </ul>
</div>

List group with icons

<div class="panel panel-default">
  <ul class="list-group list-unstyled">
    <li class="active">
      <a href="#" class="list-group-item">
        <i class="icon-reservation icon-fw"></i>
        &nbsp; Reservations
      </a>
    </li>
    <li>
      <a href="#" class="list-group-item">
        <i class="icon-clients icon-fw"></i>
        &nbsp; Clients
      </a>
    </li>
    <li>
      <a href="#" class="list-group-item">
        <i class="icon-rental icon-fw"></i>
        &nbsp; Rentals
      </a>
    </li>
    <li>
      <a href="#" class="list-group-item">
        <i class="icon-reviews icon-fw"></i>
        &nbsp; Reviews
      </a>
    </li>
  </ul>
</div>

Nested list group

Reservations
- Planning
- Calendrier
- List
Clients
Rentals
Reviews

<div class="panel panel-default">
  <ul class="list-group list-unstyled">
    <li class="expanded active">
      <a href="#" class="list-group-item">Reservations</a>
      <ul class="list-group list-unstyled">
        <li>
          <a href="#" class="list-group-item">Planning</a>
        </li>
        <li>
          <a href="#" class="list-group-item">Calendrier</a>
        </li>
        <li>
          <a href="#" class="list-group-item">List</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" class="list-group-item">Clients</a>
    </li>
    <li>
      <a href="#" class="list-group-item">Rentals</a>
    </li>
    <li>
      <a href="#" class="list-group-item">Reviews</a>
    </li>
  </ul>
</div>

Nested list group with icons

Reservations
- Planning
- Calendars
- List
Clients
Rentals
Reviews

<div class="panel panel-default">
  <ul class="list-group list-group-with-icon list-unstyled">
    <li class="expanded">
      <a href="#" class="list-group-item">
        <i class="icon-reservation icon-fw"></i>
        &nbsp; Reservations
      </a>
      <ul class="list-group list-unstyled">
        <li><a href="#" class="list-group-item">Planning</a></li>
        <li class="active">
          <a href="#" class="list-group-item">Calendars</a>
        </li>
        <li><a href="#" class="list-group-item">List</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="list-group-item">
        <i class="icon-clients icon-fw"></i>
        &nbsp; Clients
      </a>
    </li>
    <li>
      <a href="#" class="list-group-item">
        <i class="icon-rental icon-fw"></i>
        &nbsp; Rentals
      </a>
    </li>
    <li>
      <a href="#" class="list-group-item">
        <i class="icon-reviews icon-fw"></i>
        &nbsp; Reviews
      </a>
    </li>
  </ul>
</div>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
          id="dropdownMenu1" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Action</a></li>
    <li class="disabled"><a href="#">Disabled link</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"> </li>
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Alerts

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Warning! Better check yourself, you're not looking too good.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Links in alerts

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message.</a>
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

Sheet

Highly inspired from the panel component, the sheet will auto scale and have a relative position to ease children positioning.

Text...

<div class="sheet">
  <p>Text...</p>
</div>

Sheet with header

Header

Text...

<div class="sheet">
  <div class="sheet-header">
    <h2>Header</h2>
  </div>
  <p>Text...</p>
</div>

Sheet with tabs

Text...

<div class="sheet">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
  <div>
    <p>Text...</p>
  </div>
</div>

Sheet with stacked tabs

Text...

<div class="sheet">
  <ul class="nav nav-tabs">
    <li><a href="#">Tab 1</a></li>
    <li class="active"><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li class="dropdown pull-right">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        More <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
      </ul>
    </li>
  </ul>
  <div>
    <p>Text...</p>
  </div>
</div>

Sheet with auto-stackable tabs

Plugin dependency

This component requires customized bootstrapStackable JS plugin provided by the bootstrap-bookingsync-sass gem.

Text...

<div class="sheet">
  <ul class="nav nav-tabs" data-toggle="stackable"
      data-target=".stackable-dropdown">
    <li><a href="#">Tab 1</a></li>
    <li class="active"><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    <li><a href="#">Tab 5</a></li>
    <li><a href="#">Tab 6</a></li>
    <li><a href="#">Tab 7</a></li>
    <li><a href="#">Tab 8</a></li>
    <li><a href="#">Tab 9</a></li>
    <li><a href="#">Tab 10</a></li>
    <li><a href="#">Tab 11</a></li>
    <li><a href="#">Tab 12</a></li>
    <li><a href="#">Tab Last</a></li>
    <li class="dropdown pull-right stackable-dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        More <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
      </ul>
    </li>
  </ul>
  <div>
    <p>Text...</p>
  </div>
</div>

Sheet with alerts

Well done! You successfully read this important alert message.

Text...

Well done! You successfully read this important alert message.

Text...

Well done! You successfully read this important alert message.

<div class="sheet">
  <div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
  <p>Text...</p>
  <div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
  <p>Text...</p>
  <div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
</div>

Chosen Select

External dependency

This component requires the Chosen library.

Custom styles for select boxes provided by Chosen.

Destination

<div class="select">
  <div class="form-group">
    <label for="destination">Destination</label>
    <select class="form-control chosen">
      <option value=""></option>
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
      <option value="Four">Four</option>
    </select>
  </div>
</div>

<div class="select">
  <div class="form-group">
    <label for="destination">Destination</label>
    <select class="form-control chosen">
      <option value="One" selected>One (selected)</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
      <option value="Four">Four</option>
    </select>
  </div>
</div>

Chosen Multiple Select

External dependency

This component requires the Chosen library.

Custom styles for select boxes provided by Chosen.

Destination

<div class="select">
  <div class="form-group">
    <label for="destination">Destination</label>
    <select class="form-control chosen" multiple>
      <option value=""></option>
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
      <option value="Four">Four</option>
    </select>
  </div>
</div>

<div class="select">
  <div class="form-group">
    <label for="destination">Destination</label>
    <select class="form-control chosen" multiple>
      <option value=""></option>
      <option value="One" selected>One (selected)</option>
      <option value="Two" selected>Two (selected)</option>
      <option value="Three">Three</option>
      <option value="Four">Four</option>
    </select>
  </div>
</div>

Switch

Turns checkboxes and radio buttons in toggle switches

Plugin dependency

This component requires customized bootstrapSwitch JS plugin provided by the bootstrap-bookingsync-sass gem.

Sizes

BootstrapSwitch plugin provides various size variants. The only variant currently supported by bootstrap-bookingsync-sass is the switch-small.

<div class="make-switch switch-small">
  <input type="checkbox" checked>
</div>

Disabled Switch

Plugin dependency

This component requires customized bootstrapSwitch JS plugin provided by the bootstrap-bookingsync-sass gem.

Sizes

BootstrapSwitch plugin provides various size variants. The only variant currently supported by bootstrap-bookingsync-sass is the switch-small.

<div class="make-switch switch-small">
  <input type="checkbox" checked disabled>
</div>

A rendered modal with header, body, and set of actions in the footer.

Caution

The close button need to replace the close class with btn-modal-close.

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn btn-sm btn-secondary-inverse btn-round btn-modal-close"
                data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h3 class="modal-title">Modal title</h3>
      </div>
      <div class="modal-body">
        <p>...</p>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-xs-6">
            <button type="button" class="btn btn-default btn-block" data-dismiss="modal">
              Close
            </button>
          </div>
          <div class="col-xs-6">
            <button type="button" class="btn btn-primary btn-block">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Menu

Plugin dependency

Menu for Apps

Plugin dependency

List group

List group with icons

Nested list group

Nested list group with icons

Dropdown

Alerts

Dismissible alerts

Ensure proper behavior across all devices

Links in alerts

Ensure proper behavior across all devices

Sheet

Sheet with header

Header

Sheet with tabs

Sheet with stacked tabs

Sheet with auto-stackable tabs

Plugin dependency

Sheet with alerts

Chosen Select

External dependency

Chosen Multiple Select

External dependency

Switch

Plugin dependency

Sizes

Disabled Switch

Plugin dependency

Sizes

Modal

Caution