Solas UI components

Home of the Solas UI components. v0.3.2

Getting started

Add this stylesheet to your HTML pages, and start styling

  <link rel="stylesheet" href="http://bcteam.github.io/Solas-UI/0.3.2/css/bc-theme.css">

Or start off with some boilerplate

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="http://bcteam.github.io/Solas-UI/0.3.2/css/bc-theme.css">
    </head>

    <body>
      <header class="navbar bc-navbar-default">
        <div class="container">
          <h2 class="navbar-header">
            <div class="navbar-brand bc-brand-has-secondary-logo-and-slogan">
              <a href="#" class="bc-brand-logo">British Council</a>
              <span class="bc-brand-slogan">Starter Page</span>
            </div>
          </h2>
        </div>
      </header>

      <div class="container">
        <div class="col-md-12">
            Content here
        </div>
      </div>

      <!-- Including the JS Core is optional, and comes pre-bundled with jQuery 1.11.3 -->
      <script src="http://bcteam.github.io/Solas-UI/0.3.2/scripts/main.js">
    </body>
  </html>

JS Components

In most cases, using the documented HTML markup will automatically trigger the appropiate JS for each individual component without needing to do anything extra. However there may be cases where content is dynamically added after page load. In such cases, the components would need to be invoked manually through the bcSui global object.

  // Initialise listings component
  bcSui.components.listings.init();

  // Initialise tabs component
  bcSui.components.tabs.init();