Introduction

Welcome to Motif, the AutoPoint Front-end Framework

Version Notes

0.4 Beta - October 2015

  • NEW!

0.3 Beta - September 2015

  • 30 status colors for Route Sheet view in MP2 - See the new colors
  • You can now place multiple measurement controls into a single inspection line item
  • Added option to place abbreviated labels on measurement controls
  • Black color option for checkboxes

0.2 Beta - July 2015

  • Checked, disabled checkboxes and a corrected set of links for basic Motif files
  • Initial release including colors, typography, controls, form elements, and list styles
  • Focus is on the MP2 product in active development
  • Full set of inspection controls and initial list styles for the MP2 Inspection screen
  • Custom radio buttons, checkboxes, and buttons for forms

Motif is a comprehensive reference to the front end styles and code that have been designed for use in all AutoPoint web applications. All of the common controls, conventions, and markup required to build a consistent web application are included. Your feedback, including revisions and bug fixes, is highly encouraged.

Contact Trevor Curtis at trevor.curtis@autopoint.com or via instant message to submit additions, suggestions, or corrections to this guide. You can also see the status of items in progress by checking OnTime. Please refrain from coming to my desk to ask questions about Motif unless you have spoken with me via IM or email first.

Conventions

Motif displays markup and controls natively in HTML/CSS/JavaScript and also in context with sample data in some cases. Measurements are in pixels or other units are also specified. Any margin or padding that exists on controls or text is also indicated with lightly shaded areas and their measurements are given.

Margins are shown with shaded boxes in this color.

All examples in Motif are first outlined in text descriptions, followed by a code example, and then the actual markup item is displayed as shown in the example code. You can copy and paste the code example to begin using an element right away in your own markup. Below is a sample of how this looks:

This is an explanatory paragraph.

<p>This is a code sample</p>

This is the actual markup item for display purposes, with margins indicated.

How to start using Motif

The production URL for Motif is https://motif.autopoint.com. Motif has two project dependencies. Use the latest version of Bootstrap and jQuery that your project will allow. Generally you should try to use at least Bootstrap 3.x or jQuery 2.x for Motif to work well. The Motif example site uses Modernizer and AngularJS but there are currently no features of Motif that require those components. They may become required in the future as more components and styles are added.

To get up and running fast with Motif add the following files to your web application project template:

  1. Add <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> to your <head> element.
  2. Add <link href="https://motif.autopoint.com/0.4/content/motif.css" rel="stylesheet" /> to your <head< element.
  3. Add <script src="https://motif.autopoint.com/0.4/scripts/motif.js"></script> just before your closing </body> tag.

Motif 0.2 Beta and 0.3 Beta are still available! Use the appropriate folder to get the version of Motif you need: https://motif.autopoint.com/0.3/ is the path for Motif 0.3 Beta files.

Colors

Brand Colors

AutoPoint uses four brand colors and four shades of gray throughout its applications.
The brand colors are shown below in color blocks for reference:

Light Orange
@light-orange
#F29721

Solorange
@solorange
#F37D20

Light Red
@light-red
#E63D25

Dark Red
@dark-red
#CC2326

White
@white
#FFFFFF

Light Gray
@light-gray
#727272

Charcoal Gray
@charcoal-gray
#2E3032

Black
@black
#000000

Bootstrap Colors

You also have access to the standard Bootstrap background color palette, which has been modified slightly for the AutoPoint brand color scheme. The primary color has been replaced by Solorange throughout, overriding the typical blue Bootstrap primary color.

Primary
.bg-primary
#F37D20

Success
.bg-success
#F37D20

Info
.bg-info
#E63D25

Warning
.bg-warning
#CC2326

Danger
.bg-danger
#FFFFFF

Status and Indication Colors

AutoPoint also uses custom colors for displaying status and for additional indications.
The status and indication colors are shown below in color blocks for reference:

30 Color Status Palette

Motif includes 30 named color classes to indicate status in lists and other UI. These status colors have been optimized for black text and white icons on top of the status color in the background. These color classes can be applied to both backgrounds and text. Avoid placing white text on top of these background colors. Background color classes are prefixed with bg-. Text color classes are prefixed with text-.

Priscilla
@priscilla
#ffbde7

Cheery
@cheery
#ff9cd0

Tuberose
@tuberose
#ff85ae

Radish
@radish
#ff6969

Daredevil
@daredevil
#ff7348

Invigorate
@invigorate
#ff8c3e

Mandarin
@mandarin
#ffa440

Kumquat
@kumquat
#ffbd48

Saffron
@saffron
#ffd150

Mellow
@mellow
#ffe05f

Daisy
@daisy
#f9e975

Picnic
@picnic
#c5e576

Overt
@overt
#8fd860

Envy
@envy
#63c647

Argyle
@argyle
#00d392

Poseidon
@poseidon
#00edbf

Aqueduct
@aqueduct
#80ffd1

Undercool
@undercool
#66dbff

Impromptu
@impromptu
#33c1ff

Sapphire
@sapphire
#339eff

Clematis
@clematis
#8080ff

Passionate
@passionate
#9071e2

Baroness
@baroness
#ac8fe5

Magical
@magical
#c4a9e0

Oak
@oak
#c49d80

Mocha
@mocha
#d3a989

Persimmon
@persimmon
#e5b89a

Cosmetic
@cosmetic
#efcaaf

Software
@software
#adadad

Lattice
@lattice
#bababa

There are also standard colors for pass, caution, and fail status. You can also indicate an override and outline areas where more details is available using the following color classes. You can use the prefixes bg- and text- to indicate how you want the color to be applied to a specific element.

Pass Color
@pass-color
#40AF48

Caution Color
@caution-color
#E8A543

Fail Color
@fail-color
#B20909

Override Color
@override-color
#31B0D5

Details Color
@details-color
#409148

Additional Text Colors

You can quickly add the branded Solorange color to any text by using the .text-solorange class. 

<span class="text-solorange"></span>

Paragraph text colored using the <span> tag.

You can also apply pass, caution, and fail colors to any text by using the .text-pass, .text-caution, and the .text-fail classes. This is particularly handy for coloring validation error text in forms.

Typography

Fonts

The AutoPoint standard web font for all applications is Lato, a typeface that is available through Google Fonts.

Two typeface weights are used in AutoPoint web applications: Regular and Bold, in 400 and 700 weight. Bootstrap styles for regular <h1> through <h6> tags are using a simulated 500 weight based on the Regular variant of the typeface.

Lato Regular - abcdefg ABCDEFG 1234567890
Lato Bold - abcdefg ABCDEFG 1234567890

Add the following code to the <head> of your master template or HTML page to use the hosted Lato web font.

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

Headlines

AutoPoint applications use two standard headline styles. The font weight for these headlines is heavier than the Bootstrap styles for <h1> through <h6>.

Large Headlines have 22px font size and a font weight of 700. They have 20px of top margin and 10px of bottom margin.

Use the <h2> tag and add the class .large-headline to use this headline style. 

<h2 class="headline-large"></h2>

Large Headline

Small Headlines have 16px font size and a font weight of 700. They have 10px of top margin and 10px of bottom margin.

Use the <h3> tag and add the class .small-headline to use this headline style. Small headlines are commonly used as control group titles. 

<h3 class="headline-small"></h3>

Small Headline

<h1> through <h6>

The standard Bootstrap headline sizes of <h1> through <h6> are also supported.

Headline 1, 2, and 3 have a font size of 36px, 30px, and 24px with 20px of top margin and 10px of bottom margin.

<h1></h1>
<h2></h2>
<h3></h3>

Headline 1 [36px]

Headline 2 [30px]

Headline 3 [24px]

Headline 4, 5, and 6 have a font size of 18px, 14px, and 12px with 10px of top margin and 10px of bottom margin.

<h4></h4>
<h5></h5>
<h6></h6>

Headline 4 [18px]

Headline 5 [14px]
Headline 6 [12px]

Orange Headlines

Orange headlines are reserved for list sections within the Inspection, Estimate, and Parts views of MP2. These headlines are variants of the Small Headline shown earlier with the Solorange brand color applied. Orange headlines have 10px of bottom and top margin.

Use the <h3> element and apply the .headline-small and .text-solorange classes.

<h3 class="headline-small text-solorange">Original Customer Requests</h3>

Original Customer Requests

Paragraphs <p>

Paragraphs have a font size of 14px, a calculated line height, and 10px of bottom margin.

<p>This is a paragraph.</p>

This is a paragraph.

Controls

Custom Controls

AutoPoint web applications use several custom controls based on Bootstrap designs. Several custom CSS styles have been applied to these controls to make front-end development easier and to create consistency for custom user interface elements.

MP2 Inspection Form Controls

The following examples show several custom controls designed for the MP2 Inspection Form view.

Pass-Caution-Fail Control

The Pass-Caution-Fail control button group is a common element in the Inspection Form view. This button group and others like it have 10px of bottom margin. 

<div class="pcf-control">
    <div class="btn-group" role="group">
        <button class="btn btn-default btn-pass" type="button">Pass</button>
        <button class="btn btn-default btn-caution" type="button">Caution</button>
        <button class="btn btn-default btn-fail" type="button">Fail</button>
        <button class="btn btn-default btn-not-done" type="button">Not Done</button>
    </div>
</div>

Add the .selected class to the button that has been chosen to lock in the selected style. When loading a form with pre-selected conditions make sure that you add the .selected class to the appropriate buttons as the view is built. 

<button class="btn btn-default btn-fail selected" type="button">Fail</button>

You can also disable one or all of the buttons in a custom control by adding the disabled attribute to the <button> element(s) you want to disable. 

<button class="btn btn-default btn-fail" type="button" disabled>Fail</button>

Pass-Caution-Repair-Replace Control

The Pass-Caution-Repair-Replace control button group is similar to the Pass-Caution-Fail button group.

<div class="pcrr-control">
    <div class="btn-group" role="group">
        <button class="btn btn-default btn-pass" type="button">Pass</button>
        <button class="btn btn-default btn-caution" type="button">Caution</button>
        <button class="btn btn-default btn-repair" type="button">Repair</button>
        <button class="btn btn-default btn-replace" type="button">Replace</button>
        <button class="btn btn-default btn-not-done" type="button">Not Done</button>
    </div>
</div>

Yes/No Control and Yes Button

The Yes/No control button group and Yes button are similar to the Pass-Caution-Fail control button group. The colors are derived from the Pass and Fail buttons respectively. 

<div class="yes-no-control">
    <div class="btn-group" role="group">
        <button class="btn btn-default btn-yes" type="button">Yes</button>
        <button class="btn btn-default btn-no" type="button">No</button>
    </div>
</div>
<div class="yes-control">
    <button class="btn btn-default btn-yes" type="button">Yes</button>
</div>

Text Input

The inspection form controls allow for simple text input. This control is a regular text input element with a maximum width of 322px to match the width of the Pass-Caution-Fail control. Add the .text-control class to a <div> element to use the control styles for the inspection form. This control has 10px of bottom margin. 

<div class="text-control">
    <input type="text" class="form-control">
</div>

Measurement Control

A custom control has been designed for the quick entry of measurements within a specified range during for an inspection. Sometimes these ranges consist of custom values or include a secondary measurement like /32. The secondary measurement is optional and the <div class="measure-unit"> element is not required as part of the control design. The measurement control has 10px of bottom margin and a maximum width of 430px before wrapping occurs. Each wrapping line has 10px of bottom margin as well. 

<div class="measure-control">
    <div class="btn-group" role="group">
        <button class="btn btn-default fail">1</button>
        <button class="btn btn-default fail">2</button>
        <button class="btn btn-default fail">3</button>
        <button class="btn btn-default fail">4</button>
        <button class="btn btn-default caution">5</button>
        <button class="btn btn-default caution">6</button>
        <button class="btn btn-default caution">7</button>
        <button class="btn btn-default caution">8</button>
        <button class="btn btn-default pass">9</button>
        <button class="btn btn-default pass">10</button>
        <button class="btn btn-default pass">11</button>
        <button class="btn btn-default pass">12</button>
        <div class="measure-unit">/32</div>
    </div>
</div>
/32

You can add a three-character label ahead of the measurement value buttons to accomodate things like tire measurements. Below is an example of a measurement control with the prefix FL for Front Left. When a label is applied to a measurement control only 11 measurement value buttons will display before wrapping occurs.

To add a label to the measurement control apply the .measure-label class to the first <button> element in the button group. You can place a label of up to three characters in the button. All labels have click, hover, and selected styles disabled via CSS and JavaScript, and clicking them will not change any measurement value presently selected. You can also add any number of measurement controls to a single line item as needed. 

<div class="measure-control">
    <div class="btn-group" role="group">
        <button class="btn btn-default measure-label">FL</button>
        <button class="btn btn-default fail">1</button>
        ...
        <button class="btn btn-default pass">11</button>
        <div class="measure-unit">/32</div>
    </div>
</div>
/32

The specification for this control allows for a maximum of 100 measurement choices to be displayed. At least two measurements are required to use the control. Each measurement box allows for a three-digit number to be displayed (0 to 999). Units for the measurement values will always appear to the upper right of the measurement blocks if they begin wrapping. Measurement blocks wrap in increments of 12.

Measurement Control Extreme Example
<div class="measure-control">
    <div class="btn-group" role="group">
        <button class="btn btn-default measure-label">OIL</button>
        <button class="btn btn-default fail">1</button>
        ...
        <button class="btn btn-default fail">100</button>
        <div class="measure-unit">oz</div>
    </div>
</div>
oz

Page Styles

AutoPoint Page Styles

All AutoPoint web applications have a similar basic page format that includes a header, the application area, and a footer. The header contains any application branding as well as menus and icons for other functionality depending on the program. The footer contains a basic copyright notice and version information. Motif includes basic page styles to accomodate these areas and some special styles for placement of the copyright notice and version number for your application.

Header

An AutoPoint web application header include logos, branding, menus, and icons relating to application functionality. The application logo should always be coded as a link that returns to a home page, or in the case of a single-page application, should return the user to a default or "home" view.

The header is 90px in height and is 100% width with relation to the browser window. The <header> is always outside of the application frame and may be wider than the actual application area allowed by Bootstrap. The header does not have any margin or padding. The <header> element must immediately follow the <body> tag in your HTML template. No additional classes or styles need to be applied. 

<body>
    <header>
    ....
    </header>

More guildelines and styles for application branding and standardized menus will be coming in future versions of Motif.

Application Area Styles

Your application area is bound by a Bootstrap container with an id="" attribute of your choice. Motif adds two additional container styles that are nested inside the Bootstrap container called the Gray Surround and the White Surround. These two <div> containers provide a styled background for your web application and its components.

The application area should immediately follow the <header> element. The application area does not contain any margins or padding. The maximum width that is provided by Bootstrap in the non-fluid layout is 1200px (1170px with applied margins) and this width is adjusted through media queries provided by Bootstrap.

The Gray Surround has 10px of padding in all directions and a corner radius of 10px to produce a clear application area border. The Gray Surround has no margin applied. A subtle shadow has been added to the Gray Surround to make the application area appear to float.

The White Surround has 15px of padding in all directions and a corner radius of 7px to provide an inner border for your application elements and controls. Your application containers and controls can use 100% of the width inside the White Surround, or you can add Bootstrap rows and divide the interior of the White Surround into percentage-based columns with a responsive grid. The White Surround has no margin applied. 

<header>....</header>
    <div class="container" id="">
        <div class="gray-surround">
            <div class="white-surround">
            ....
            </div>
        </div>
    </div>
This is an example of the Gray Surround and White Surround, which are reusable within the application area.

Footer

An AutoPoint web application footer should contain a copyright notice and an application version number. Special id="" attributes are provided for the copyright notice and the version number. Just apply these ids to a <p> paragraph element and they will be positioned on the left and right in the footer area at the bottom of your web page template.

The footer has a height of 70px and a width of 100% and should be placed outside the Bootstrap container so it will span the entire width of the browser window. The footer has no applied margins, but it does have 20px of top, left, and right padding, with no bottom padding. 

<div id="container">....</div>
<footer>
    <p id="copyright">Copyright © AutoPoint, a Solera Company, 2015.</p>
    <p id="version">Version 0.2 Beta - July 2015</p>
</footer>

Forms

Simple Forms

Forms are composed of various controls like input fields, buttons, checkboxes, and radio buttons. The example below is a basic form you can interact with. Notice the focus and hover colors as well as other additions that come with Bootstrap. Colors have been adjusted to match the AutoPoint brand color scheme.

Form Elements

Checkboxes

Checkboxes have been customized for the AutoPoint look and feel. AutoPoint checkboxes have 10px of margin on the top and bottom. Nest a checkbox input and label inside a <div> element that has a class of .ap-checkbox. 

<div class="ap-checkbox">
    <input type="checkbox" id="" name="" value="">
    <label for="">AutoPoint Checkbox</label>
</div>

It is important to apply a distinct id="" property to the checkbox <input> element and add a for="" property to the <label> element in order for the checkbox to work properly. If the id="" and for="" properties do not match, the checkbox will not work. The <input> element is visually hidden and clicking the <label> element is what actually triggers a click event and checks the checkbox. This design improves the user experience for touch-enabled devices. When coding click events attach your JavaScript to the <label> element unless you are listening for the checked attribute on the <input> element. 

<div class="ap-checkbox">
    <input type="checkbox" id="checkbox1" name="" value="" checked>
    <label for="checkbox1">AutoPoint Checkbox</label>
</div>

To stack checkboxes for forms create additional <div class="ap-checkbox"> elements with an input/label element inside. The 10px of top and bottom margin will collapse when the <div class="ap-checkbox"> elements are stacked. 

<div class="ap-checkbox">
    <input type="checkbox" id="checkbox1" name="" value="">
    <label for="checkbox1">AutoPoint Checkbox 1</label>
</div>
<div class="ap-checkbox">
    <input type="checkbox" id="checkbox2" name="" value="">
    <label for="checkbox2">AutoPoint Checkbox 2</label>
</div>
<div class="ap-checkbox">
    <input type="checkbox" id="checkbox3" name="" value="">
    <label for="checkbox3">AutoPoint Checkbox 3</label>
</div>

To create inline checkboxes just continue adding more label/input element combinations inside a single <div class="ap-checkbox"> element. A right margin of 14px is automatically applied between each checkbox. Right margin is not applied to the last checkbox displayed in the group. 

<div class="ap-checkbox">
    <input type="checkbox" id="checkbox1" name="" value="">
    <label for="checkbox1">AutoPoint Checkbox 1</label>
    <input type="checkbox" id="checkbox2" name="" value="">
    <label for="checkbox2">AutoPoint Checkbox 2</label>
    <input type="checkbox" id="checkbox3" name="" value="">
    <label for="checkbox3">AutoPoint Checkbox 3</label>
</div>

There are color variations of the AutoPoint checkbox including pass, caution, fail, and disabled. To use the color variations add the classes .checkbox-pass, .checkbox-caution, and .checkbox-fail to an <input type="checkbox"> element. Add the disabled attribute to the <input type="checkbox"> element to override the default brand color style and disable the checkbox. 

<div class="ap-checkbox">
    <input type="checkbox" class="checkbox-pass" id="checkboxPass" name="" value="">
    <label for="checkboxPass">Pass Checkbox</label>
    <input type="checkbox" class="checkbox-caution" id="checkboxCaution" name="" value="">
    <label for="checkboxCaution">Caution Checkbox</label>
    <input type="checkbox" class="checkbox-fail" id="checkboxFail" name="" value="">
    <label for="checkboxFail">Fail Checkbox</label>
    <input type="checkbox" class="checkbox-black" id="checkboxBlack" name="" value="">
    <label for="checkboxBlack">Black Checkbox</label>
    <input type="checkbox" id="checkboxDisabled" name="" value="" disabled>
    <label for="checkboxDisabled">Disabled Checkbox</label>
    <input type="checkbox" id="checkboxCheckedDisabled" name="" value="" checked disabled>
    <label for="checkboxCheckedDisabled">Disabled Checked Checkbox</label>
</div>

What about long wrapping labels and responsive behavior when inline checkboxes fill up a container horizontally? You're already covered. You can use a massive label and you'll have an automatic width limit of 300px for each individual checkbox and label, a tighter line-height of 1.2em, and vertical alignment at the top of each inline checkbox. If your inline checkboxes start wrapping there is a 10px bottom margin on the label that will ensure your checkboxes don't bump up against each other. Check out these extreme examples (both inline and stacked).

Checkbox Extreme Example
<div class="ap-checkbox">
    <input type="checkbox" id="checkbox1" name="" value="" checked>
    <label for="checkbox1">Simple checkbox</label>
    <input type="checkbox" id="checkbox2" name="" value="" checked>
    <label for="checkbox2">This is a really long checkbox label just so you can see how text wrapping will occur for the labels when they are excessive and seem to run on for ever and ever</label>
    <input type="checkbox" id="checkbox3" name="" value="" checked>
    <label for="checkbox3">Simple checkbox</label>
    <input type="checkbox" id="checkbox4" name="" value="" checked>
    <label for="checkbox4">This is a really long checkbox label just so you can see how text wrapping will occur</label>
    <input type="checkbox" id="checkbox5" name="" value="" checked>
    <label for="checkbox5">Simple checkbox</label>
    <input type="checkbox" id="checkbox6" name="" value="" checked>
    <label for="checkbox6">This is a really long checkbox label just so you can see how text wrapping will occur</label>
    <input type="checkbox" id="checkbox7" name="" value="" checked>
    <label for="checkbox7">Simple checkbox</label>
</div>
<div class="ap-checkbox">
    <input type="checkbox" id="checkbox1" name="" value="">
    <label for="checkbox1">This is a really long checkbox label just so you can see how text wrapping will occur for the labels when they are super-long and seem to run on for ever and ever</label>
</div>
<div class="ap-checkbox">
    <input type="checkbox" id="checkbox2" name="" value="">
    <label for="checkbox2">Simple checkbox</label>
</div><div class="ap-checkbox">
    <input type="checkbox" id="checkbox3" name="" value="">
    <label for="checkbox3">This is a really long checkbox label just so you can see how text wrapping will occur</label>
</div>

To add a title to a group of checkboxes create a <div class="form-control"> container with a headline and the checkboxes for the group. Add a title for the group using the <h3 class="headline-small"> element and then follow with the checkboxes. The .headline-small class produces a title with 10px of top and bottom margin that will collapse with the checkboxes in the group. 

<div class="form-group">
    <h3 class="headline-small">Checkbox Group</h3>
    ....
</div>

Checkbox Group

Radio Buttons

Radio buttons are also customized for the AutoPoint brand. Radio buttons have 10px of margin on the top and bottom. Nest a radio button input and label inside a <div> element that has a class of .ap-radio. 

<div class="ap-radio">
    <input type="radio" id="" name="" value="">
    <label for="">AutoPoint Radio Button</label>
</div>

It is important to apply a distinct id="" property to the radio button <input> element and add a for="" property to the <label> element in order for the radio button to work properly. If the id="" and for="" properties do not match, the radio button will not work. The <input> element is visually hidden and clicking the <label> element is what actually triggers a click event and checks the radio button. This design improves the user experience for touch-enabled devices.

You must also add a value for the name="" attribute so the radio buttons will be grouped together. Radio buttons allow the user to choose just one option from a list of choices, and the name="" attribute links the radio buttons together as a group. If the user will make several selections within a group you should use checkboxes instead. When coding click events attach your JavaScript to the <label> element unless you are listening for the checked attribute on the <input> element. 

<div class="ap-radio">
    <input type="radio" id="radioButton1" name="radioGroup1" value="" checked>
    <label for="radioButton1">AutoPoint Radio Button 1</label>
</div>
<div class="ap-radio">
    <input type="radio" id="radioButton2" name="radioGroup1" value="">
    <label for="radioButton2">AutoPoint Radio Button 2</label>
</div>

To stack radio buttons for forms create additional <div class="ap-radio"> elements with an input/label element inside. The 10px of top and bottom margin will collapse when the <div class="ap-radio"> elements are stacked. 

<div class="ap-radio">
    <input type="radio" id="radioButton1" name="radioGroup1" value="">
    <label for="radioButton1">AutoPoint Radio Button 1</label>
</div>
<div class="ap-radio">
    <input type="radio" id="radioButton2" name="radioGroup1" value="">
    <label for="radioButton2">AutoPoint Radio Button 2</label>
</div>
<div class="ap-radio">
    <input type="radio" id="radioButton3" name="radioGroup1" value="">
    <label for="radioButton3">AutoPoint Radio Button 3</label>
</div>

To create inline radio buttons just continue adding more label/input element combinations inside a single <div class="ap-radio"> element. A right margin of 14px is automatically applied between each radio button. Right margin is not applied to the last radio button displayed in the group. 

<div class="col-sm-12">
    <div class="ap-radio">
        <input type="radio" id="inputRadio5" name="inputRadio2" value="" checked>
        <label for="inputRadio5">AutoPoint Radio Button 1</label>
        <input type="radio" id="inputRadio6" name="inputRadio2" value="">
        <label for="inputRadio6">AutoPoint Radio Button 2</label>
        <input type="radio" id="inputRadio7" name="inputRadio2" value="">
        <label for="inputRadio7">AutoPoint Radio Button 3</label>
    </div>
</div>

There are color variations of the AutoPoint radio button including pass, caution, fail, and disabled. To use the color variations add the classes .radio-pass, .radio-caution, and .radio-fail to an <input type="radio"> element. Add the disabled attribute to the <input type="radio"> element to override the default brand color style and disable the radio button. 

<div class="ap-radio">
    <input type="radio" class="radio-pass" id="" name="" value="">
    <label for="">Pass Radio Button</label>
    <input type="radio" class="radio-caution id="" name="" value="">
    <label for="">Caution Radio Button</label>
    <input type="radio" class="radio-fail id="" name="" value="">
    <label for="">AutoPoint Radio Button</label>
    <input type="radio" id="" name="" value="" disabled>
    <label for="">AutoPoint Radio Button</label>
</div>

To add a title to a group of radio buttons create a <div class="form-control"> container with a headline and the radio buttons for the group. Add a title for the group using the <h3 class="headline-small"> element and then follow with the radio buttons. The .headline-small class produces a title with 10px of top and bottom margin that will collapse with the checkboxes in the group. 

<div class="form-group">
    <h3 class="headline-small">Radio Button Group</h3>
    ....
</div>

Radio Button Group

Labels

Input elements should have labels above and to the left when there are only one or two inputs in a form group. If there are at least three input boxes in a form group like name, address, city, etc you should use input group styles to include the field names on the same line as the input element. 

<form>
    <div class="form-group">
        <label for="inputEmail1">Email Address</label>
        <input type="email" value="" class="form-control" id="inputEmail1" />
    </div>
    <div class="form-group">
        <label for="inputPassword1">Password</label>
        <input type="password" value="" class="form-control" id="inputPassword1" />
    </div>
</form>
<form>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">First Name</div>
            <input type="text" class="form-control" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">Last Name</div>
            <input type="text" class="form-control" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">Address</div>
            <input type="text" class="form-control" value="" />
        </div>
    </div>
     <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">City</div>
            <input type="text" class="form-control" value="" />
        </div>
    </div>
</form>
First Name
Last Name
Address
City

Text Input

Regular text input elements have no margins because it is normally provided by the <div class="form-group"> element. If you enclose a text input into a <div> element with the .form-group class you will get 15px of bottom margin. 

<input type="text" class="form-control" placeholder="Text input">

Text Area

Text area elements have similar styles to text input elements. You should code text area elements with 4 rows. Text area elements have no margins since these are provided by the .form-group class applied to a parent <div> element. 

<textarea class="form-control" rows="4"></textarea>

Buttons

There are three buttons sizes commonly used in AutoPoint web applications. The large size, default size, and the small size. Avoid using the large button size unless you are developing a touch-first application. Enclose buttons in a form-group even if they are standing alone. This will add the proper margin to the button. Form-group <div> elements have 15px of collapsing bottom margin. 

<button class="btn btn-lg btn-primary">Large Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-sm btn-primary">Small Button</button>

Two button styles are commonly used through AutoPoint web applications. The primary button has been styled to use Solorange, the brand color used throughout our web applications. This should be the default button for most actions involving forms. If the user hits enter in a dialog or after filling a form the primary button should be the default action taken. All other buttons should be styled using the default button class.

Buttons that navigate to a new screen or panel should be styled using the primary button class. The primary button should always be the right-most button in a group of buttons on the same line. This is a mobile convention that allows a typical user to select the primary button by touch without having to reach too far on a tablet or mobile screen. Buttons should be right-aligned in all modals and on most application views. You can right-align buttons in a <div> element with a .form-group class by simple adding the .text-right class from Bootstrap, as in the example below. 

<div class="form-group text-right">
    <button class="btn btn-default">Cancel</button>
    <button class="btn btn-primary">Save</button>
</div>

Selects

Select elements are a basic way to choose from a list of options. Motif adds a Solorange-colored hover select but the user's web browser is responsible for setting the selected item's line color. Select elements have 15px of bottom margin like other form elements in Bootstrap. 

<select class="form-control">
    <option selected>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

Lists

AutoPoint List Standards

List styles for all AutoPoint applications come in two varieties: HTML Lists and HTML Tables. The visual design for lists is very similar despite the different markup. AutoPoint lists are styled with a bottom border on each list item, vertical and horizontal centering, and accomodation for various controls and other form elements.

Inspection List Styles

The AutoPoint MP2 Inspection Entry form contains a number of inspection items in a list as well as accompanying controls to allow for inspection result input. A technician marks the test result for each line item on the right. Inspection lists are created from standard <ul> and <li> elements. Special CSS rules are applied to inspection controls when they are presented in list form so it is important to follow the Motif list conventions as you write your HTML.

Start by opening a <ul> element with a class of .inspection-list followed by a series of <li> elements for your list items. Each <li> item can contain a <p> paragraph element for the inspection item description followed by a <div> element containing the inspection control needed to enter a result for that line. Styles are inherited for all the inspection controls if you open a <ul> with the approriate class. 

<ul class="inspection-list">
    <li>
        <p>Inspect instrument panel warning lamps</p>
        <div class="pcf-control">
        ....
        </div>
    </li>
</div>

  • Inspect instrument panel warning lamps

Here is an example of all the inspection controls in a simple list displaying the custom styles that are part of Motif for the Inspection Entry form. All of the list description text for each item is indented and the controls are right-justified with the bottom border applied as a separator. The list itself has 10px of top and bottom margin applied. There is no margin between each list item. Controls have 5px of top and bottom margin inside the <li> element.

Please note in this example that the tire tread depth line item contains four measurement controls that are labelled. The inspection list styles permit only one control per line item with the exception of the measurement control. You can add multiple measurement controls to a single line item and they will stack vertically.

Complete Inspection Entry Form List Example

  • Inspect instrument panel warning lamps

  • Inspect brake light operation

  • Inspect hazard light operation

  • Inspect back-up light operation

  • Inspect dash and interior lights

  • Measure tire tread depth

    /32
    /32
    /32
    /32

  • Heated Seats

  • Indicate Engine Type