Core CSS

This is a demonstration of the core CSS used on every page.

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.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

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.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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.

Display heading 1

Display heading 2

Display heading 3

Display heading 4

Standard headings

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text sizing

Lead

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Text size increase

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

A third bigger than normal text text-1-3x

Two thirds bigger than normal text text-1-6x

Twice as big as normal text text-2x

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Abbreviations

attr

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Naming a quote source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Reverse layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Inline quotations

Useful for short quotations to be displayed inline.

The quotation started with Lorem ipsum dolor sit amet and continued in that vein.

Definition list

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Lists

Unordered list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered list

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Reverse ordering

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Starting at a number different to 1

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

List Groups

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

List Group States

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

  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Disabled List Group

...or be disabled...

  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

List Group Labels

...or need some additional data.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

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.

  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Code

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

Inline code snippets

For example, <section> should be wrapped as inline.

Block of code

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

Variables

y = mx + b

User input

To switch directories, type cd followed by the name of the directory.

To edit settings, press ctrl + ,

Sample output

The API will give a message stating: You must provide a valid derivative ID

Icons

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

Basic Icons

fa-camera-retro

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).

  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger Icons

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

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:

icon-accident
icon-cruise-control
icon-dab
icon-last-service-date
icon-number-of-keys
icon-heated-seats
icon-heated-windscreen
icon-extended-warranty
icon-radio
icon-start-stop-button
icon-outstanding-finance
icon-paint-fabric-cover
icon-upholstery
icon-service-plan

icon-alloys
icon-paintwork-carried-out
icon-service-history
icon-metallic-paint
icon-panoramic-windscreen
icon-v5-present
icon-dashboard-lights
icon-parking-sensors
icon-rain-sensor-wipers
icon-dashboard-photo
icon-mileage-discrepancy
icon-sunroof
icon-towbar

icon-mileage
icon-odometer-change
icon-air-con
icon-aux-usb
icon-bluetooth
icon-climate-control
icon-sat-nav
icon-spare-tyre-type
icon-tyre-alloy-cover
icon-xenon-lights
icon-tyre-treads
icon-test-drive
icon-add-notes

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

  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.