CAP Bootstrap v1.4.0

Overview

CAP Bootstrap v1.4.0 is build on top of Bootstrap v3.3.5 and provides a common look and feel for CAP applications.

Your Project

Example Master Page

Internet Explorer 8 requires the use of Respond.js to enable media query support. Using Respond.js with CSS hosted on a different (sub)domain requires extra configuration. "/Scripts/respond.proxy.gif" & "/Scripts/respond.proxy.js" need to be hosted within the source project.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Your Project</title>
<link rel="stylesheet" type="text/css" href="http://bootstrap.cap.co.uk/Areas/v1_4_0/Content/CSS/index.css" />
    <!--[if lt IE 9]>
        <script type="text/javascript" src="http://bootstrap.cap.co.uk/Areas/v1_4_0/Content/JS/libraries/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://bootstrap.cap.co.uk/Areas/v1_4_0/Content/JS/libraries/respond.min.js"></script>
        <link href="http://bootstrap.cap.co.uk/Areas/v1_4_0/Content/JS/libraries/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
        <link href="/Scripts/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
        <script src="/Scripts/respond.proxy.js"></script>
    <![endif]-->
    @RenderSection("head", required: false)
</head>
<body>
    @RenderBody()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/path/to/jquery.min.js">\x3C/script>')</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>window.angular || document.write('<script src="/path/to/angular.min.js"><\/script>');</script>
<script src="http://bootstrap.cap.co.uk/areas/v1_4_0/content/bundles/js"></script>
<!--OPTIONAL:-->
<script src="http://bootstrap.cap.co.uk/areas/v1_4_0/content/bundles/capangularcommon"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Example Bower.json

Use the following bower.json snippet to easily install popular libraries in your new project.

{
  "name": "Project Name",
  "version": "0.0.0",
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "dependencies": {
    "angular": "~1.4.7",
    "bootstrap": "~3.3.5",
    "angular-ui-router": "~0.2.15",
    "angular-bootstrap": "~0.14.1",
    "angular-toastr": "~1.5.0",
    "angular-loading-bar": "~0.8.0",
    "angular-local-storage": "~0.2.3",
    "angular-animate": "~1.4.7",
    "angular-sanitize": "~1.4.7",
    "underscore": "~1.8.3",
    "components-font-awesome": "~4.4.0",
    "slick-carousel": "~1.5.8",
    "angular-cookies": "~1.4.8"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

CAP Bootstrap 3rd Party Libraries

CAP Bootstrap v1.4.0 no longer bundles 3rd party libraries wihtin the JS. The only things in the JS are bootstrap.min.js and tooltip.js

Components

Buttons

Example

Sample Code

<button class="btn btn-lg cap-btn-green">Button</button>

JSFiddle: CAP Buttons Playground

Tabs

Example

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.

Sample Code


<ul class="nav nav-tabs  nav-justified" role="tablist">
    <li class="active"><a href="#events" role="tab" data-toggle="tab">Events</a></li>
    <li><a href="#attending" role="tab" data-toggle="tab">Form e.g.</a></li>
    <li><a href="#colleagues" role="tab" data-toggle="tab">Colleagues</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="events">
    <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.</p>
    </div>
    <div class="tab-pane" id="attending">
    <p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.</p>
    </div>
    <div class="tab-pane" id="colleagues">
    <p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.</p>
    </div>
</div>

JSFiddle: CAP Tabs

Bootstrap Drawer

Functionality from Bootstrap Drawer

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus luctus ex in mollis. Donec iaculis ornare dictum. Vestibulum tincidunt varius ipsum. Praesent egestas ex eget tortor cursus tincidunt. Phasellus porttitor sem arcu. Duis vehicula felis eros, non rhoncus velit gravida vel. Sed ut nisl convallis, porttitor sem sit amet, accumsan nisl. Nunc sed magna eget quam dapibus ornare sed ac lacus. Ut laoreet ultricies dui, ut fermentum enim maximus non. Curabitur nulla urna, rhoncus eu bibendum at, lobortis at neque. Donec mollis urna at velit dictum sodales quis et risus. Curabitur hendrerit convallis tristique. Nullam ac iaculis nibh, quis vulputate tortor. Sed in quam enim. Nullam risus magna, congue non neque in, hendrerit elementum enim.

Open

Supporting Documentation

These are the drawer contents

Sample Code


    <div class="row has-inner-drawer">
        <div class="col-sm-12">
            <h3>New Derivative Specification</h3>
            <p>This is the content present in the main window...</p>
        </div>
        <div id="exampleDrawer" class="drawer drawer-right drawer-inside dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="exampleDrawer">
            <div class="drawer-controls">
                <a href="#exampleDrawer" data-toggle="drawer" aria-foldedopen="false" aria-controls="exampleDrawer" class=""><i class="fa fa-file-pdf-o"></i></a>
            </div>
            <div class="drawer-contents">
                <div class="drawer-body">
                    <h3>Supporting Documentation</h3>
                    <p>These are the drawer contents</p>
                </div>
            </div>
        </div>
    </div>

Collapsible Panel

Themes available: "theme-orange" and "theme-blue". Functionality requires the "capRetailValuesCommon" AngularJs module.

Example

Changed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis pretium arcu, vitae molestie neque. In quis mauris cursus, hendrerit ante ut, accumsan justo. Duis quis ligula quis risus eleifend vulputate nec viverra dolor. Etiam nec enim magna. Nullam lacus turpis, feugiat a lacinia sed, interdum et mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vestibulum rhoncus commodo. Etiam convallis tincidunt orci, vitae vulputate ligula eleifend eget.

Sample Code

<div class="collapsible-panel theme-orange" collapsible-panel>
    <h2>Changed</h2>
        <div class="collapsible-panel-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis pretium arcu, vitae molestie neque. In quis mauris cursus, hendrerit ante ut, accumsan justo. Duis quis ligula quis risus eleifend vulputate nec viverra dolor. Etiam nec enim magna. Nullam lacus turpis, feugiat a lacinia sed, interdum et mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vestibulum rhoncus commodo. Etiam convallis tincidunt orci, vitae vulputate ligula eleifend eget.</p>
        </div>
    </div>

Data Tables

Example

LoremIpsum
LoremIpsum
LoremIpsum

Sample Code

<ul class="data-table">
    <li><span>Lorem</span><span>Ipsum</span></li>
    <li><span>Lorem</span><span>Ipsum</span></li>
    <li><span>Lorem</span><span>Ipsum</span></li>
</ul>

Misc

CAPID

Example

65738

Sample Code

<span class="capid">65738</span>

Table Key

Example

Colours for each item will be specified in the CSS of the project.

Approved
Subject to Query
Changed spec

Sample Code

<div class="key-list">
    <ul>
        <li class="approve">Approved</li>
        <li class="query">Subject to Query</li>
        <li class="change">Changed spec</li>
    </ul>
</div>

Lists

Example

List Item
List Item
List Item
List Item
List Item

Sample Code

<ul class='icon-list'>
    <li><i class='fa fa-check'></i><span>List Item</span></li>
    <li><i class='fa fa-check'></i><span>List Item</span></li>
    <li><i class='fa fa-check'></i><span>List Item</span></li>
    <li><i class='fa fa-check'></i><span>List Item</span></li>
    <li><i class='fa fa-check'></i><span>List Item</span></li>
</ul>

Scrollbars

Example

Use the following SASS for custom scrollbars

Sample Code

@include scrollbars(.5em, $blue_va);

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  // For Google Chrome
  ::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }
  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }
  ::-webkit-scrollbar-track {
      background: $background-color;
  }
  // For Internet Explorer
  body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}