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. |
Colors
Core
Primary(#003057)
Secondary(#00ADA6)
ACCENTS
Warm Red(#EA6852)
Gold(#F4C55C)
SHADES
Blue(#004987)
Cool Grey(#DCE3EB)
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
Alerts
Dismissable Alert
Add the
Toast Alerts
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
- 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>
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
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
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
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.
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.
Name | Job Title | ||
---|---|---|---|
Details | John Doe | john.doe@email.com | Artist |
The modal always has the same
The first group is enclosed in a
Add the
In the same place that the modal is rendered also include a call to the JS function
<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'>×</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>
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',
});
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.
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:
- When using icons, text should be used alongside icons to meet accessibility standards
- Buttons should not contain icons
- 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
Sizes
Contextual
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
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
- 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.
Modals
- 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)
Context Modals
<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'>×</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'>×</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'>×</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'>×</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'>×</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>
Tables
Tables should incorporate bootstrap with DataTables
Rules:
-
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 - If a table requires any features that differ from the default settings above, they can be specified depending on the purpose of the table
- Buttons should be at the top of the table
- Table header should be the header color unless otherwise specified
- Header text should be aligned like the data below them.
- Numbers should be centered
- 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.
- One letter in the column (e.g. middle initial) should be centered
- Text should be left aligned
- Names should be in alpha order by last name
- All rows should sort except rows with more than one topic (like companies).
- Adding a new entry to the table should take place in the top row.
- 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
A
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.
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.
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
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>
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
Include a tag with