Overview

Systems currently using the styleguide

Client Service Center v2021.04.10
SkillBadge Locker v2021.04.10 (pending deployment)
Student Portal v2021.04.10 (pending deployment)
Single Sign On v2021.04.10

Statuses

Draft Developer is currently working on this component.
Pending Staff is reviewing this component and can request changes.
Approved Staff has approved this component. It can be applied to systems.
Approved

Colors

Core

Primary(#003057)

Secondary(#00ADA6)

ACCENTS

Warm Red(#EA6852)

Gold(#F4C55C)

SHADES

Blue(#004987)

Cool Grey(#DCE3EB)

Approved

Typography

Level Font Size Color Uses

Page Header (Heading Level 1)

 Titling Gothic FB Extended Bold 18pt Primary Top level page header

Heading Level 2

 Helvetica Neue Bold (All Caps) 18pt Primary 2nd Level Header

Heading Level 3

 Helvetica Neue Bold (All Caps) 16pt Primary 3rd Level Header

Heading Level 4

 Helvetica Neue Bold (All Caps) 14pt Primary 4th Level Header
Heading Level 5
 Helvetica Neue Bold (All Caps) 12pt Primary 5th Level Header
Heading Level 6
 Helvetica Neue Reg (All Caps) 10pt Primary 6th Level Header
Link Helvetica Neue Reg 12pt Blue Navigation Links
Specialty Link Helvetica Neue Reg 12pt Red Specialty Links (e.g., Learn More)
Paragraph Helvetica Neue Reg 12pt Black Everything else
Muted Text
 Any font Any size Light Help text, subtitles, etc.

Page Components

Approved

Alerts

Dismissable Alert

Add the data-dismiss="alert" attribute to allow the user to dismiss an alert.

Pending

Toast Alerts

Approved

Buttons

  • Action buttons should be the right most button in pop-ups and wizard pages.
  • There may be times where we have to deviate from the colors depending on the options on the page.
  • Examples of button titles are listed below each button category

Primary Action

The main action on a page
  • Access
  • Add
  • Apply
  • Checkout
  • Continue
  • Ok
  • Run
  • Save
  • Show
  • Submit
  • Update
  • Upload
  • View

Secondary Action

Alternative actions on a page
  • Next
  • Back
  • Cancel
  • Delete
  • Done
  • Download
  • Empty
  • Export
  • Print
  • Quote
  • Remove
  • Return
  • Yes

Navigation Button

Links to other pages (internal or external)
  • Landing page order form buttons
  • Scoring
  • Resources
  • Back Button (only if necessary)

Information

Other buttons for info, help, or other misc stuff
  • Learn More
  • Order History
    
    <button class='btn btn-primary'>Primary</button>
    <button class='btn btn-primary' disabled>Disabled</button>
    <button class='btn btn-outline-primary'>Secondary</button>
    <button class='btn btn-outline-primary' disabled>Disabled</button>
    <button class='btn btn-secondary'>Information</button>
    <button class='btn btn-secondary' disabled>Disabled</button>
    <button class='btn btn-light'>Light</button>
    <button class='btn btn-light' disabled>Disabled</button>
Approved

Checkbox

  • A single checkboxes should be used when a user needs to enable/disable a value
  • Multiple checkboxes should be used when a user can select multiple values from a list of multiple options. (for single selection, use Radio Buttons)
  • When a checkbox includes a label, clicking the label should toggle the checkbox.
  • When you only have 1 or 2 checkboxes, use horizontal alignment. For more than 2, stack them vertically.

Two or less options


Three or more options

Approved

Radio Buttons

  • Radio buttons should be used when a user must select only one value from a list of multiple options. (for multiple selection, use Checkboxes)
  • When you only have 2 radio buttons, use horizontal alignment. For more than 2, stack them vertically

Two Items



Three or more Items

Pending

Range/Slider

  • To be used when setting a value within a specified range
  • Must determine the minimum amd maximum values, as well as how many steps the slider allows
0
Approved

Date Picker

Bootstrap Datepicker supports single and range. If a date range picker is required to be limited by school year, include the note shown below.

to
Note: Date range selection is limited to an academic year (July through June).
Draft

Detail View

Actions for rows in a table should take place in a view modal with the option to edit and delete built in.

An action column should be included in the table and when clicked will display the initial modal showing that row's data along with the edit and delete buttons.

John Doe
john.doe@email.com
July 20, 1969
Artist
Bachelor's

Are you sure you want to delete this record?

Name Email Job Title
Details John Doe john.doe@email.com Artist

The modal always has the same modal-header, but contains three different groups of modal-body and modal-footer for viewing, editing, and deleting.

The first group is enclosed in a viewContent class which is used to hide the group based on the user's actions.

Add the detailView class to buttons to trigger a JS function when clicked to update the modal to display the group with the id supplied in the data-section attribute of the clicked button.

In the same place that the modal is rendered also include a call to the JS function RegisterDetailModalEvents() to registered the onclick events.


        
<div class='modal fade' id='DetailModalExample' tabindex='-1' role='dialog'>
    <div class='modal-dialog modal-dialog-centered' role='document'>
        <div class='modal-content'>
            <div class='modal-header'>
                <h5 class='modal-title' id='exampleModalLabel'>Modal Header</h5>
                <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                    <span aria-hidden='true'>&times;</span>
                </button>
            </div>
            <div class='viewContent'>
                <div class='modal-body'>
                    ...
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-outline-primary detailView' data-section='#EditSection'>Edit</button>
                    <button type='button' class='btn btn-outline-primary detailView' data-section='#DeleteSection'>Delete</button>
                </div>
            </div>
            <div id='EditSection' class='d-none'>
                <div class='modal-body'>
                    ...
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-outline-primary' data-dismiss='modal'>Cancel</button>
                    <button type='button' class='btn btn-primary' data-dismiss='modal'>Update</button>
                </div>
            </div>
            <div id='DeleteSection' class='d-none'>
                <div class='modal-body'>
                    ...
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-outline-primary' data-dismiss='modal'>Cancel</button>
                    <button type='button' class='btn btn-primary' data-dismiss='modal'>Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>
Approved

Dropdown

Dropdowns will use the Select2 framework which supports single and multiple item pickers. Use 'select custom-select' classes to support bootstrap validation classes.

If a dropdown is dependant on another field, the dropdown should show as disabled until it is able to be populated with items.

Select 2 Dropdown
Chosen Dropdown

    // https://select2.org/options
    $('.dropdown').select2({
        placeholder: 'Select an Item',                    
        dropdownAutoWidth: true,
        allowClear: true,
        multiple: true,
    });

    // https://harvesthq.github.io/chosen/options.html
    $('.dropdown').chosen({
        placeholder_text_single: 'Select an Item',
        placeholder_text_multiple: 'Select one or more Items',
        disable_search_threshold: 10,
        width: '95%'
        allow_single_deselect: true,
        no_results_text: 'No items available',
    });
Pending

Form Validation

Form validation should leverage bootstrap validation recommendations and forms should use [HTML 5 validation attributes]

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation.

All fields should include placeholder text and proper labels with for attributes to account for 508 compliance.

Please provide a valid first name
Please provide a valid last name
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
Approved

Icons

Icons will come from Font Awesome (only use free "solid" icons)

When specifying which icon to use, include the name of the icon so the developer can find it easily. Example: dollar-sign will produce this icon:

Rules:

  1. When using icons, text should be used alongside icons to meet accessibility standards
  2. Buttons should not contain icons
  3. When using thumbnail icons (large icons)- they should be simplified, line-art to match our brand. Additional icons may be created by graphics as needed. The weight of the lines is intended to mirror the weight of our monogram.

Loading Indicators options

  • Use the .spinner class to display a loading icon
  • Small, Large, and Extra-Large sizes are also available
Loading
Sizes
Small
Normal
Large (2x)
Extra-Large (3x)
Contextual
Primary
Secondary
Gold/Warning
Red/Danger
Light
Dark
Approved

Panels

  • Information panels such as on the CSC Landing Page
  • There may be times where we have to deviate from the colors depending on the options on the page.
  • A Panel example is listed below
Title
Subtitle (optional)

Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

  • All formatting is supported
Panel with colored separator
This example is using the "red" color as seen on the CSC homepage
  • 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 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.
Approved

Modals

Bootstrap Modal

  • If there are multiple buttons, the positive primary/positive/forward button should be on the right, and the secondary/negative/backward button should be on the left.
  • The positive/primary/forward button (e.g., Save) should be the primary color. Any other actions should use the secondary color (e.g, Cancel)
  • Display animation: slide down and fade in from the top of the page
  • Display scrollbar if the content becomes too long
  • Clicking off the pop-up or clicking the X in the header will close the popup (unless specified otherwise)
  • If there are links in the pop-up, they should open in a new window/tab (unless specified otherwise)
Simple Modal

A simple modal with no action buttons.

Action Modal

A simple modal with one or more action buttons.

Context Modals

Success Modal

Details about the successful action.

Warning Modal

Details about the warning.

Error Modal

Details about the error.


        
<div class='row'>
    <div class='col'>

        <!-- Simple Modal -->
        <div class='modal' tabindex='-1' role='dialog'>
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h5 class='modal-title'>Simple Modal</h5>
                        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        <p>A simple modal with no action buttons.</p>
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-primary' data-dismiss='modal'>Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class='col'>

        <!-- Action Modal -->
        <div class='modal' tabindex='-1' role='dialog'>
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h5 class='modal-title'>Action Modal</h5>
                        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        <p>A simple modal with one or more action buttons.</p>
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-outline-primary' data-dismiss='modal'>Cancel</button>
                        <button type='button' class='btn btn-primary' data-dismiss='modal'>Action</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<hr>
<h3>Context Modals</h3>

<div class='row'>
    <div class='col'>

        <!-- Success Modal -->
        <div class='modal' tabindex='-1' role='dialog'>
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header bg-primary'>
                        <h5 class='modal-title text-white'>Success Modal</h5>
                        <button type='button' class='close text-white' data-dismiss='modal' aria-label='Close'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        <p>Details about the successful action.</p>
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-outline-primary' data-dismiss='modal'>Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class='col'>

        <!-- Warning Modal -->
        <div class='modal' tabindex='-1' role='dialog'>
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header bg-warning'>
                        <h5 class='modal-title text-white'>Warning Modal</h5>
                        <button type='button' class='close text-white' data-dismiss='modal' aria-label='Close'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        <p>Details about the warning.</p>
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-outline-warning' data-dismiss='modal'>Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class='col'>

        <!-- Error Modal -->
        <div class='modal' tabindex='-1' role='dialog'>
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header bg-danger'>
                        <h5 class='modal-title text-white'>Error Modal</h5>
                        <button type='button' class='close text-white' data-dismiss='modal' aria-label='Close'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        <p>Details about the error.</p>
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-outline-danger' data-dismiss='modal'>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Approved

Tables

Tables should incorporate bootstrap with DataTables

Rules:

  1. Default features:
    Column sorting Enabled
    Search box Enabled
    Row hover highlight Disabled
    Paging Disabled
    Show total row count Disabled
    Export to PDF Disabled
    Export to Excel Disabled
    Print Disabled
  2. If a table requires any features that differ from the default settings above, they can be specified depending on the purpose of the table
  3. Buttons should be at the top of the table
  4. Table header should be the header color unless otherwise specified
  5. Header text should be aligned like the data below them.
  6. Numbers should be centered
  7. Checkboxes should be centered. If there is a need for a select all checkbox in the header, it should be located to the left of the header text.
  8. One letter in the column (e.g. middle initial) should be centered
  9. Text should be left aligned
  10. Names should be in alpha order by last name
  11. All rows should sort except rows with more than one topic (like companies).
  12. Adding a new entry to the table should take place in the top row.
  13. If the table has no data or is hidden, text (based on UI doc) should appear in its place. Default text should be: No data available.

Default Table

Action First Last
George Washington
John Adams
Thomas Jefferson
James Madison
James Monroe
John Quincy Adams
Andrew Jackson
Abraham Lincoln
Theodore Roosevelt

All Features Enabled

Action First Last
George Washington
John Adams
Thomas Jefferson

Dark Header

Action First Last
George Washington
John Adams
Thomas Jefferson

Export Buttons

Action First Last
George Washington
John Adams
Thomas Jefferson

Developer Notes:

Add the .datatable-default class to a <table> to initialize a default dataTable.

A <thead> is required by dataTables, but the default initializer will automatically convert the first row to a <thead> if there isn't already one. This allows the default class to work for asp.NET GridViews
Approved

Tooltips/Popovers

Tooltip

Used to show short text to a user (20 characters and under) when the user hovers over text. Text/word should be underlined in dots to indicate the hover. Tooltips can only contain text.

This is an example of a tooltip that will display on hover.

Popover

Used to show text to a user (between 20 and 99 characters) when the user clicks on an icon. Icons should be "info-circle" or "question-circle" from font awesome. In most cases, the icon will be at the end/right side of the button/word/image. The window should remain visible until they click again outside the popover. Popover can only contain text.

This is an example of a popover that will display on click.
Information Modal

Used to show text to a user (100+ characters) when the user clicks on an icon. Icons should be "info-circle" or "question-circle" from font awesome. In most cases, the icon will be at the end/right side of the button/word/image. The modal should remain open until they click outside of it. Modals can contain all types of content: links, images, buttons, text formatting, etc.

When defining an infomational modal, include the Title and Content.

This is an example of an information modal that will display on click.
Pending

Printing

  • Printing in the browser should use Print.js.
  • It can be used to print the whole page or sections of a page by passing in an element ID.
  • It also has a number of options and configuration available

Here is a simple example on how to print an entire page.
<button class='btn btn-primary' onclick="printJS('html', 'html')">Print</button>

Here is an example of printing a section of html by passing in an element ID.

    
        <div id='divToPrint'>
    <!-- Inner html will be printed -->
</div>

<button class='btn btn-primary' onclick="printJS('divToPrint', 'html')">Print</button>

Layout

Approved

Header & Navbar

  • When the application is shared between NOCTI/NBS, the system header should be white instead of teal.

        <nav class='navbar navbar-logo'>
            <a href='/'>
                <img src='https://styleguide.nocti.org/img/logos/NOCTI-Navy.png'>
            </a>
            <ul class='navbar-nav ml-auto'>
                <li class='nav-item mr-3'>
                    <a class='nav-link'>
                        <i class='fas fa-bell mr-2'></i>Notifications
                    </a>
                </li>
                <li class='nav-item dropdown'>
                    <a class='nav-link dropdown-toggle' href='#' id='navbarDropdownLinkUser' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                        <i class='far fa-user-circle mr-2'></i>User Name
                    </a>
                    <div class='dropdown-menu dropdown-menu-right' aria-labelledby='navbarDropdownLinkUser'>
                        <a class='dropdown-item' href='#'>Settings</a>
                        <a class='dropdown-item' href='#'>Change Password</a>
                        <a class='dropdown-item' href='#'>Manage Sites</a>
                        <a class='dropdown-item' href='#'>Log Out</a>
                    </div>
                </li>
            </ul>
        </nav>
        <nav class='navbar navbar-dark'>
            <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#myNavbar' aria-controls='myNavbar' aria-expanded='false' aria-label='Toggle navigation'>
                <span class='navbar-toggler-icon'></span>
            </button>
            <div class='collapse navbar-collapse' id='myNavbar'>
                <a href='/' class='navbar-brand'>System Name</a>
                <ul class='navbar-nav mx-auto'>
                    <li class='nav-item'>
                        <a class='nav-link' href='#'>Link 1</a>
                    </li>
                    <li class='nav-item active'>
                        <a class='nav-link' href='#'>Link 2 (active)</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link' href='#'>Link 3</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link disabled' href='#'>Link 4 (disabled)</a>
                    </li>
                    <li class='nav-item dropdown'>
                        <a class='nav-link dropdown-toggle' href='#' id='navbarDropdownMenuLink' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                            Dropdown link
                        </a>
                        <div class='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'>
                            <a class='dropdown-item' href='#'>Action</a>
                            <a class='dropdown-item' href='#'>Another action</a>
                            <a class='dropdown-item' href='#'>Yet another action</a>
                        </div>
                    </li>
                </ul>
                <ul class='navbar-nav ml-auto'>
                    <li class='nav-item'>
                        <a class='nav-link' href='#'>Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
Approved

Footer

A sticky footer will appear at the bottom of the page when the content doesn't fill the page and it will move to the bottom of the content when it exceeds the height of the page and requires scrolling.

  • Items can be added/removed based on what is needed for the specific system

Use the .footer class to position the footer at the bottom of the page and add .has-footer to the <body>

Include a tag with .container or .container-fluid if you wish to use the .row and .col classes.