IRS Style Guide

Navigation

• Menu is toggled via a hamburger menu. Adding id=“sidebarToggle” will apply the hamburger menu bar
• Navigation links will be coloured white if it’s against a dark background and bg-dark against a white background.
• Navigation font will be using the ‘font-family: ‘Font Awesome 5 Free’
• The header bar uses bg-dark
• The hamburger menu will toggle a sidebar (not a drop down menu)
• Navigation links at the top right corner of the menu bar will toggle a dropdown menu

Sidebar (hamburger menu): [img]

Dropdown Menu: [img]

Background

• Use bg-dark for dark backgrounds against a white login card.
• Should only be used on welcome and login screens
• Dashboard interface and all other screens should be against a white background.

Buttons

btn btn-primary btn-block

Is our standard button for the management portal dashboard

** will create css in the future so we can have different styled buttons for certain things like a green confirmation button, red buttons for deleting or destructive actions etc.

List of usable colors

// Color Variables
// Bootstrap Color Defaults
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;

On top of that there are bootstrap colors which are to be used for certain things such as success, indicate danger or error etc.

 --gray: #6c757d;
 --gray-dark: #343a40;
 --primary: #007bff;
 --secondary: #6c757d;
 --success: #28a745;
 --info: #17a2b8;
 --warning: #ffc107;
 --danger: #dc3545;
 --light: #f8f9fa;
 --dark: #343a40;

Spacing Variables

The following spacing is applied to the sidebar and the footer to keep things nice and pretty

// Spacing Variables $navbar-base-height: 56px;

// Width of the sidenav $sidebar-base-width: 225px;

// Width of the sidenav when collapsed $sidebar-collapsed-width: 90px;

// Height of the sticky footer $sticky-footer-height: 80px;

Cards

Apply the .card-header class to your html to apply the card header style. This needs to be wrapped in a .card class.

Apply the .card-body class to the card content div. This needs to be wrapped in a .card class at the same level as .card-header.

The cards bring focus to the content. If there is only a single focus i.e. the login page, center the card over a dark background (bg-dark) to draw attention and highlight the main content. Example: Login page

Modals

The modals will use standard bootstrap modals. You can find more information on how to use it here.

Icons

Classnames for icons follow this format: fas fa-fw fa-table You can select appropriate icons from https://fontawesome.com/v4.7.0/icons/ (or fontawesome 5 icons if you wish, just import into the css file). Icons from that site can be added and referenced on our site by follow the above format. We import fontawesome icons so we can use them.