CAP Bootstrap v1.5.0

Overview

CAP Bootstrap v1.5.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_5_0/Content/CSS/index.css" />
    <!--[if lt IE 9]>
        <script type="text/javascript" src="http://bootstrap.cap.co.uk/Areas/v1_5_0/Content/JS/libraries/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://bootstrap.cap.co.uk/Areas/v1_5_0/Content/JS/libraries/respond.min.js"></script>
        <link href="http://bootstrap.cap.co.uk/Areas/v1_5_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_5_0/content/bundles/js"></script>
<!--OPTIONAL:-->
<script src="http://bootstrap.cap.co.uk/areas/v1_5_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
  • bootstrap.tooltip.js
  • bootstrap.drawer.js

Fonts

Google Fonts - Imported

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600,300|Open+Sans+Condensed:300|Didact+Gothic|Raleway:400,300,700,600:latin);

Open Sans

  • Used on CAP.co.uk as sub headings
  • font-family: 'Open Sans', sans-serif;

Open Sans Condensed

  • font-family: 'Open Sans Condensed', sans-serif;

Didact Gothic

  • font-family: 'Didact Gothic', sans-serif;

Lato

  • Valuation Anywhere headings
  • font-family: 'Lato', sans-serif;

Raleway

  • Headings and text on cap-hpi.com
  • font-family: 'Raleway', sans-serif;

Fonts

Brandon Grotesque Regular Italic

  • font-family: 'BrandonGrotesque-RegularItalic', sans-serif;

Brandon Grotesque Regular

  • Used on buttons on CAP.co.uk
  • font-family: 'BrandonGrotesque-Regular', sans-serif;

Brandon Grotesque Light Italic

  • font-family: 'BrandonGrotesque-LightItalic', sans-serif;

Brandon Grotesque Light

  • Used as headings on CAP.co.uk
  • font-family: 'BrandonGrotesque-Light', sans-serif;

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

Table - Data Grid

The Data Grid table requires 2 tables. One for the head and one for the body. The body table also uses a hidden THEAD element, this is used to keep the same widths as the parent table.

Example

Lorem
Lorem
Lorem
Lorem		 Lorem Lorem Lorem Lorem
         
Heading
Sub Section
lorem ipsum dolarlorem ipsum dolarlorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
Sub Section
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
Sub Section
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
Sub Section
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar
lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar

Table Classes

Classes are added via the JS plugin - see JS Fiddle example for more info.

Sample Code

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;
  }
}