Grid System

We use Bootstrap 4 as our primary framework consisting of various page elements necessary to build a basic page for iPro. Our grid system is composed of 12 flexible columns with a gutter between columns of 30px. We apply border-box so that the border and padding is included in the width of the grid columns.

Containers

Containers are required when using our default grid system. While containers can be nested, most layouts do not require a nested container. For more information on Bootstrap 4 grids and other layouts, click here.

Grid Gutter

Bootstrap 4 provides a constant gutter width 30 pixels. Each grid column has a 15px padding on either side which results in a 30px gutter between columns and a 15px gutter on edges. Our columns are fluid which keep the gutter at 30px.

Mixed Grids

The grid layout is easily extended by nesting and mixing different column sizes.

<div class="row">
	<div class="col">
		<div class="p-3">
			Example: Internal div with a padding 3 (.p-3) contained within a div with a column (.col) class.
		</div>
	</div>
</div>

<div class="row">
	<div class="col-6">
		Example: .col-6
	</div>
	<div class="col-6">
		Example: .col-6
	</div>
</div>

<div class="row">
	<div class="col-4">
		Example: .col-4
	</div>
	<div class="col-4">
		Example: .col-4
	</div>
	<div class="col-4">
		Example: .col-4
	</div>
</div>

<div class="row">
	<div class="col-3">
		Example: .col-3
	</div>
	<div class="col-3">
		Example: .col-3
	</div>
	<div class="col-3">
		Example: .col-3
	</div>
	<div class="col-3">
		Example: .col-3
	</div>
</div>

<div class="row">
	<div class="col-4">
		Example: .col-4
	</div>
	<div class="col-8">
		Example: .col-8
	</div>
</div>

<div class="row">
	<div class="col-2">
		Example: .col-2
	</div>
	<div class="col-8">
		Example: .col-8
	</div>
	<div class="col-2">
		Example: .col-2
	</div>
</div>

<div class="row">
	<div class="col-4">
		Example: .col-4
	</div>
	<div class="col-8">
		<div class="row">
			<div class="col-sm-6">
				Example: .col-6
			</div>
			<div class="col-sm-6">
				Example: .col-6
			</div>
		</div>
	</div>
</div>

Wrapper

A wrapper div, or a container div, has no semantic meaning. It’s a generic container. All content goes within the div wrapper. In the example below, class 'row' is your wrapper.

<div class="container">
  <div class="row">
    <div class="col">
      <p>Content</p>
    </div>
  </div>
</div>

Headers

Page Header

All page headers have a font size of 36px with a font weight of 400. The header color is hex: #333

All page headers belong to the font family Open Sans with a sub-font sans-serif. It is important to note that all page headers have a -13px margin bottom with a padding of 7px.

All H1 page headers have a margin-top of 0 and a margin-bottom of -13px marked as !important. All headers (h1, h2, h3, etc.) share a line-height of 100%.

<div class="row">
	<div class="col-sm-6 padding-top-15">
      <p><a href="#">Home</a> / <a href="#">Prior Page</a> / Page Name</p>
    </div>
	<div class="col-sm-6">
		<table class="margin-0 padding-0" style="background: none;">
			<tr>
				<td align="right" width="74%"><a href="#"><img src="images/ac-pg-header-icons_03.png" alt=""> Add to My Link</a></td>
				<td width="26%">
					<ul class="pgHeaderLink">
						<li><a href="#"><img src="images/ac-pg-header-icons_05.png" alt=""></a></li>
						<li><a href="#"><img src="images/ac-pg-header-icons_07.png" alt=""></a></li>
						<li><a href="#"><img src="images/ac-pg-header-icons_09.png" alt=""></a></li>
						<li><a href="#"><img src="images/ac-pg-header-icons_11.png" alt=""></a></li>
					</ul>				
				</td>
			</tr>
		</table>
    </div>
    <div class="col-sm-12 margin-bottom-30">
      <h1>Page Header</h1>
    </div>
	<div class="col-sm-12">
		<p>Optional page instructional text.</p>  
	</div>
</div>

Top Navigation

Quotit & AgentCubed share similiarities and are almost identical in terms of design. The code does not vary much. A screenshot is provided for visually comparing the two. To download iPro's top navigation visit page templates and be sure to select iPro within the style selector.

Quotit Header Example

Footer

Page Footer

The footer below is a temporary mockup of a footer that is currently in design. The UX Department will release a clean version in the near future.

<hr class="margin-bottom-5"/>
<div class="row footerV2BG">
  <div class="col-sm-8">
    <div class="footerV2">
      <a href="https://www.quotit.net/corporate/copyright.htm" target="_blank">Copyright, Privacy Policy, Disclaimers & Trademark Notices</a> | <a href="https://www.quotit.net/qiprom1/webPages/contact/contactUS.asp?brokerID=8881250&brokerIDHash=765408691" target="_blank">Contact Us</a> |  <a href="https://www.quotit.net/corporate/ServiceAgreement/agreement.asp" target="_blank">Service Agreement</a> | <a href="tel://1-866-478-6848">866-478-6848</a>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="footerV2">
      <span>&copy; 2018 Quotit Corporation, USA. All rights reserved.</span>
    </div>
  </div>
</div>

Pane Footer

The footer below is slide out panel footer that is currently being used in the commissions project. The panel footer is persistant in that it always sticks to the bottom of the panel in any view.

View Pane Example

<footer class="padding-top-30" style="width: 1057.5px;">
  <div class="row">
    <div class="col-sm-10"></div>
    <div class="col-sm-2 text-right">
      <button class="btn-md btn-block btn-primary margin-0">Save</button>
    </div>
  </div>
</footer>

Margins

We're using Bootstrap 4's spacing for margin and padding. Below is a brief overview of how it works, if you would like to learn more about Bootstrap, click here.

Spacing can be applied using margin classes for a variety of sizes around a 30 pixel gutter. Both margin and padding share the same sizing attributes.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

Example of Bootstrap 4 classes on a div:

<div class="row">
	<div class="col p-3">
		This is an example div with a class of .col and a padding class of p-3.
	</div>
</div>

Same example using Quotit's custom core classes on a div:

<div class="row">
	<div class="col padding-15">
		This is an example div with a class of .col and a padding class of padding-15.
	</div>
</div>

Paddings

Spacing can be applied using padding classes for a variety of sizes, padding is differs in that it increments by 5 upto 30 pixels.

<div class="py-5 px-3">
	This is a Bootstrap example div with a top/bottom padding class (.py-5) and a left/right padding class (.px-3).
</div>

<div class="padding-top-30 padding-right-15 padding-bottom-30 padding-left-15">
	This is a Quotit Native example div with a top and bottom padding of 30 pixels with a left and right padding of 15 pixels.
</div>

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

      <div class="jumbotron">
        <div class="wrapper padding-15">
          <h3 class="margin-bottom-15">Header</h3>
          <div class="card  padding-15">
            <p>Content of the jumbotron goes here.</p>
          </div>
        </div>
      </div>