Introduction

The cap hpi Bootstrap makes front-end web development of cap hpi related products faster and easier, and is flexible enough to work perfectly for projects of all sizes. This system is based on Bootstrap version 3, so refer to their documentation for full details.

We provide all CSS and JavaScript files minified (*.min.css and *.min.js) and full-fat versions for development (*.css and *.js). DO NOT use the unminified versions on a production site.

This page uses the full-fat development files, see here for the same page using the minified files.

Usage

Production

Reference the assets within your projects directly from https://bootstrap.cap-hpi.com/v2.0.0/css/*.min.css or https://bootstrap.cap-hpi.com/v2.0.0/js/*.min.js. This allows us to roll out bugfixes and new features without having to deploy new versions of your applications.

Development

Reference the assets within your projects directly from https://bootstrap.cap-hpi.com/v2.0.0/css/*.css or https://bootstrap.cap-hpi.com/v2.0.0/scripts/*.js. This allows us to roll out bugfixes and new features without having to deploy new versions of your applications.

The core stylesheet

You must use the core stylesheet (also read the Increasing Performance section for making rendering faster):

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/core.min.css">

This core stylesheet gives you styles for the following:

• Grid system
• Typography
• Page header
• Page footer

This is enough to get a basic page styled correctly.

See a demonstration page

To use more specific styles you need to include other stylesheets (details below).

JavaScript

We have a core JavaScript file which initialises the page, loading some polyfills where required and setting some classes on the html and body elements to say that JavaScript is running and the custom web fonts have loaded. Include this script just above the closing </body> tag, but above any other scripts.

<script src="https://bootstrap.cap-hpi.com/v2.0.0/js/core.min.js"></script>

For development you should use the full-fat versions:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/scripts/fontfaceobserver.js"></script>
<script src="https://bootstrap.cap-hpi.com/v2.0.0/scripts/init.js"></script>

jQuery

Some of our Bootstrap components require jQuery, so if you are using those components you also need to include it. You should do this just above the closing </body> tag, so the loading and parsing of the file doesn't block rendering.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

We clearly mark which components require JavaScript below. If you're not using those components there is no need to include this JavaScript. In fact, in the interests of performance, we highly recommend you don't include JavaScript that you're not actually using on the page.

Additional styling

You can include other stylesheets for specific styling as required:

Forms

If you display forms and buttons on your page you need this stylesheet.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/forms.min.css">

See a demonstration page

Tables

As cap hpi often display a lot of data on web pages, we have a comprehensive set of table styles.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/tables.min.css">

See a demonstration page

Notifications and pagination

Provides styles for alerts, badges progress bars and pagination links.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/notification-pagination.min.css">

Navigation components [requires JavaScript]

Navigation components include breadcrumbs, tabs, dropdown (and dropups), and pills. These components require JavaScript.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/navigation-components.min.css">

Content components [requires JavaScript]

Content components include accordians, panels, list groups and wells. These components require JavaScript.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/content-components.min.css">

See a demonstration page

Partials [requires JavaScript]

Partials are sections of HTML designed to work as standalone units, such as modals. These components require JavaScript.

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/partials.min.css">

Unsupported browsers

While this system should work perfectly for the vast majority of modern browsers, there are some older browsers - notably IE9 and below - for which we don't offer full support. Rather than block any users unfortunate enough to be using these old browsers (they've got enough to deal with, poor things) we display a message to let them know that some things may not work as intended.

We also load a set of JavaScript polyfills which enhance the capabilities of those browsers so they won't completely fail. Here's the code you need to put just after your opening <body> tag.

<!--[if IE]>
    <p class="unsupported">You are using an unsupported browser, so some parts of this page may not display or work as intended. Visit <a href="https://browsehappy.com/">browsehappy.com</a> to upgrade your browser.</p>
<![endif]-->

The strange <!--[if IE]> bit is a conditional comment which is only supported by IE9 and below. Adding this code will render something like this:

If you use Angular, or another framework which has its own browser support requirements, then you are responsible for displaying this banner (or another suitable message).

JavaScript polyfills

Some older browsers do not support some of the JavaScript APIs we use such as dataset and classList. We have a set of polyfills to add these capabilities included in the core JavaScript file, which brings less-capable browsers somewhere nearer the functionality of modern browsers.

Increasing performance

Performance of pages is hugely important, and there is a huge amount of evidence that increasing performance of web pages - particularly on mobile devices - leads to increased engagement and use. There are many statistics and case studies available at wpostats.com if you'd like to dive into this big subject.

We attempt to increase performance in two main ways.

Faster rendering

To make pages faster to render we can inline the 'critical' CSS in the head of the page. The critical CSS is the CSS required to style the visible portion of the page - normally the top of the page, especially on smaller viewports. This technique is well explained here.

There is a critical CSS file available for you to use, which contains the following:

• Grid system
• Typography
• Page header

The file is available at https://bootstrap.cap-hpi.com/v2.0.0/css/critical.min.css. It is up to you as a developer to fetch the contents of this file and cache it locally for your app so you can include it in the head of your documents like this:

<head>
    ...
    <style>
        /* the contents of /v2.0.0/css/critical.min.css go here */
    </style>
    ...
</head>

This will load the critical CSS in the fastest way possible. You then need to load the other CSS files you need later in the page lifecycle. The easiest way to do this is by adding <link> elements in the head of the page with the rel attribute set to preload:

<!-- Tell the browser to download the core.min.css file in the background, then when the page is loaded set it as a stylesheet -->
<link rel="preload" href="https://bootstrap.cap-hpi.com/v2.0.0/css/core.min.css" as="style" onload="this.rel='stylesheet'">
<!-- In case JavaScript is disabled or fails, have a fallback -->
<noscript><link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/core.min.css"></noscript>

Using this technique means the initial render of the page is much faster, which matters on mobile devices under dodgy network conditions.

See a demonstration page using critical CSS.

Preventing the "Flash of Invisible Text"

We use custom fonts to render header and body text. However, most modern browsers will hide the text until the custom font is available for rendering. This means users can get a "Flash of Invisible Text" (FOIT). This can be disconcerting for the user, and if the custom font file takes a while to load (for instance if the user is on a poor network) then this can make the page look as though it is broken.

To counter this we ensure the page is rendered using the default system font, then enhance it using the custom font when the custom font file is available. This is done by including the /v2.0.0/js/core.min.js file at the foot of your page.

    <script src="https://bootstrap.cap-hpi.com/v2.0.0/js/core.min.js"></script>
</body>

For even better performance you can inline the contents of this file, just like you can do with the critical CSS:

    <script>
        /* the contents of /v2.0.0/js/core.min.css go here */
    </script>
</body>

See a demonstration page using which avoids FOIT.

What difference does this performance tuning make?

Simulating a regular 3G network connection in Chrome shows the difference this performance tuning can make. Here's the initial page weight and filmstrip of the core demonstration page:

The page is only 5.4KB and loads in just 164ms, however the first paint is at 995ms while the page finishes rendering at 2.21 seconds. Not bad, but if we look at that first paint we see the text is actually invisible.

It's not until 1.93 seconds that the text is visible and the user can interact with the page.

So we've got two problems: the gap between the 164ms load time of the page and the first render, and the fact the text isn't visible for nearly 2 seconds.

This is why we've built the performance improvements. The critical CSS demonstration page has a larger initial page weight - because of the inlined CSS - and the final render time is similar:

However we can see the first paint is at just 483ms and contains the fully rendered text:

Those milliseconds matter when the user is on a less-than-wonderful network connection.

Usage with Angular

See guide

Demonstration apps

We've prepared some demonstration apps which combine many of the components displayed below into more realistic-looking scenarios.

• Vehicles app
• Reports app
• Forms app

Themes

CSS

To enable backwards compability, the default theme files are in https://bootstrap.cap-hpi.com/v2.0.0/css/*.css

Other themes are in their own folder, for example https://bootstrap.cap-hpi.com/v2.0.0/css/fleet-leasing-rental/*.css

Images

Images for the default theme are in https://bootstrap.cap-hpi.com/v2.0.0/img/

Other themes are in their own folder, for example https://bootstrap.cap-hpi.com/v2.0.0/img/fleet-leasing-rental/

Grid system

We use the Bootstrap Grid System as a base. See their documentation for full details, or use the following simple examples.

Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

Typography

Typography is at the core of every web page or app. It may sound incredibly simple, but it will help your users if you choose the right typographic elements to render your content.

Display headings

Display headings are larger headings for the main headings on the page.

Standard headings

Standard headings are for smaller headings, such as breaking up long blocks of content.

Text sizing

Lead

Useful for a larger textual description, often nested in a well (as in this example).

Text size increase

Useful when you want to make text bigger, but not make it look like a heading.

Paragraph

Inline text elements

Abbreviations

Blockquotes

Naming a quote source

Reverse layout

Inline quotations

Useful for short quotations to be displayed inline.

Definition list

Lists

Unordered list

Ordered list

Reverse ordering

Starting at a number different to 1

List Groups

Used to display a list in a more visually pleasing format...

List Group States

...which is especially useful when the items can have different states...

Disabled List Group

...or be disabled...

List Group Labels

...or need some additional data.

List Group Cards

If you need a each item in a list group to be slightly more separated, you can add the class list-group-cards. This works especially well in a well.

Code

When displaying code you should escape <, > and " characters.

Inline code snippets

Block of code

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

Variables

User input

Sample output

Icons

Font awesome icons are used. You can find a list of icons on the Font Awesome Cheatsheet.

Basic Icons

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

Larger Icons

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

Custom icons

We also have a set of custom icons specifically for cap hpi use. To use these you must reference the custom font CSS file:

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/css/custom-icons.min.css">

There is also a development version available:

<link rel="stylesheet" href="https://bootstrap.cap-hpi.com/v2.0.0/build/custom-icons.css">

Add the CSS class for the icon you want to an element, for example:

<i class="icon-accident"></i>

There are many icons for you to choose from:

You can also make these custom icons larger:

icon-outstanding-finance icon-lg

icon-outstanding-finance icon-2x

icon-outstanding-finance icon-3x

icon-outstanding-finance icon-4x

icon-outstanding-finance icon-5x

Images

Responsive images

Aligning images

Tables

We deal with lots of tabular data, so having a comprehensive set of table styles can make an app really easy to use.

Default table with row states

Small table with row hover effect

For smaller tables add the table-condensed, and for a hover effect add the table-hover class.

Row boxes

You can encase a table row in a box to give it more prominence using the row-boxed CSS class.

Responsive tables

If you have wide tables that need to be scrollable on smaller screens (mobile devices, for instance) you can add the table-responsive class to the container element.

Scrollable tables

It's possible to fix headers and on or more columns in order to create a scrollable table like this:

Note: although the code above shows class="fixed-header" and class="fixed-cell" on elements you do not have to add these yourself. They are shown because of a quirk with the code demo system.

There are a few things to do to make this work. Firstly create a container element around your table with a defined height; this will be the scrollable element: <div class="scrollable" style="max-height:500px"> (the height can be set in a separate CSS file or <style> block).

Secondly you need to tell the table how many columns you want to fix on the left hand side. You do this with a data attribute: <table class="table" data-fixed-columns="2">. This tells the table to keep the first two columns fixed in the view at all times.

Thirdly you need to include the JavaScript that makes this work. The minified version for production is here:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/js/tables.min.js"></script>

And the full version for development is here:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/scripts/tables.js"></script>

Tables with row group headers

Useful when displaying complex data which has a primary piece of information (such as a derivative name and code), with secondary information shown on subsequent rows.

Nested tables

You may need to display nested data in a table, for example brand > model > trim > derivative rows. Because nesting actual <table> elements inside each other gets very messy very quickly, there are some CSS classes you can apply to give the impression of nesting. Here's a simple example (with a couple of rows styled with the row-boxed class):

To make this work you need to give the table a class of table-nested:

<table class="table table-nested">

Then each nested row you need to give a class of row-nested:

<tr class="row-nested">

You can then specify the level of indentation for the column you want to look nested. There are three indentation levels: level-1, level-2 and level-3. Apply them to the cell in each row you want to be indented:

If you want the user to be able to trigger showing/hiding of the nested rows you should add elements (buttons or links) to allow them to do that, and wire up some JavaScript to make it work. If there isn't a lot of data then it may be more efficient to render all the rows and hide the ones that need to be hidden with CSS. Here's a quick example of that (with some dirty, hacky JavaScript that doesn't work properly, but you get the idea):

Setting the width of table columns

You may want to set the width of different table columns. For this you can use the grid system classes such as .col-xs-4 which gives you a 12 column grid to use. You apply these in a <colgroup> element which is the first child of the <table> element, like this:

<colgroup>
    <col class="col-xs-1">
    <col class="col-xs-7">
    <col class="col-xs-2">
    <col class="col-xs-2">
</colgroup>

Assuming there are 4 columns in your table this will set the first column to be one twelfth of the total width, the second column to be seven twelfths, and the last two columns to both be two twelfths. Here's the whole thing in action (this table contains checkboxes, so we also need to include the forms CSS file):

Notifications

Alerts

Consistent, clear notifications help draw users attention to messages they need to see. Don't overuse them or users will ignore them. Instead put them in a consistem place and only display them when you really need to.

Progress Bars

To make these progress bars move you'll need to update the aria-valuenow="0" and style="width: 0%" values with your task progress percentage.

Animated Progress Bars

Labels / Pills

These labels are great for quick notifications, or drawing the users attention to particular elements. Like with notifications, try not to overuse them or your page will look like an explosion in a Fisher Price factory.

Tooltips

Pagination

Pagination Active

Pagination Disabled

Pagination Sizes

Forms

Buttons

Outline Buttons

Disabled Buttons

Button Sizes

Large

Small

Block Button

Multi Option Set

Disabled Multi Option Set

Multi Option Set Sizes

Large

Small

Radio Buttons

Checkboxes

Fieldsets and legends

Use <fieldset> elements to group related form fields together. Give each <fieldset> a <legend> to use as a title.

Full form example

Hidden Labels

Input Sizes

Defining States

Input States

Checkbox States

File Upload

Navigation components

Breadcrumbs

Tabs

Dropdowns

Dropdown Outline

Dropdown Sizes

Large

Small

Pills

Stacked Pills

Content components

Components to help display content.

Accordian Rows

Wells

Well title

Some quick example text to build on the well title and make up the bulk of the well's content.

Go somewhere

App Icon

App Icon (No Shadow)

Tables in wells

When putting a table inside a well the styling for the table changes slightly. To make this work you'll also need to include the tables CSS file. Here's an example:

Partials

Modals

Layout

Header

You must add a conditional comment containing a warning message for unsupported versions of IE. This is the code:

<!--[if IE]>
    <p class="unsupported">You are using an unsupported browser, so some parts of this page may not display or work as intended. Visit <a href="https://browsehappy.com/">browsehappy.com</a> to upgrade your browser.</p>
<![endif]-->

(Sometimes the conditional comment tags <!--[if IE]> and <![endif]--> don't show up in the example code below, but you do need them.)

Footer