To use the PantherCDN css, put this in the head.

<link rel="stylesheet" href="@System.Configuration.ConfigurationManager.AppSettings["PantherCDN"]/CSS/Internal.css" />

Note: make sure this line comes before your @Styles.Render("~/Content/css") line.

Container sections go inside the HTML5 article tag.

Container content goes in a div or section with class of content, like this.

<section class="container">
	<h3>Container Title</h3>
	<div class="content">
		<p>Content goes here.</p>
	</div>
</section>

All content should be in a container.

These are the colors approved by ArcBest for use by Panther (the email confirming this can be found attached to the Planning iteration of Agent Mobile):

Varying tints of the blue are allowed. White and lighter grays are also allowed.

For more information, contact Aaron Ray (aray@arcb.com).

To add a toolbar to your page, first add a footer with the class footer-floating after your article closing tag.

Within that, add two more divs, one with class toolbar-tools-area, the other with toolbar-submit-area. Your markup should now look like this:

<footer class="footer-floating">
	<div class="toolbar-tools-area">
	</div>
	<div class="toolbar-submit-area">
	</div>
</footer>

The toolbar-tools-area div is for the quick filter and other tools, the toolbar-submit-area div is for the submit button. Any buttons or input fields should go into a div with class toolbar-section, like this:

<footer class="footer-floating">
	<div class="toolbar-tools-area">
		<div class="toolbar-section">
			<input type="text" placeholder="Quick Filter">
		</div>
	</div>
	<div class="toolbar-submit-area">
		<div class="toolbar-section">
			<button type="submit">Submit</button>
		</div>
	</div>
</footer>

You can also make control groups with the control-group class.

<footer class="footer-floating">
	<div class="toolbar-tools-area">
		<div class="toolbar-section">
			<input type="text" placeholder="Quick Filter">
		</div>
	</div>
	<div class="float-right">
		<div class="toolbar-section control-group">
			<button type="button">Cancel</button>
			<button type="submit">Submit</button>
		</div>
	</div>
</footer>

Site header

See Html.DisplayHeader for help on displaying the site header.

Page Header

Directly under the site header on every page should be the page header. On most pages this will contain the page title, though on pages with tabs it may contain information that is relelvant across all the tabs.

<header class="header-page">
	<h1>Page Title</h1>
</header>

Notes

• You can remove zebra-striping by adding the no-stripes class to your table
• You can add the layout-flex class to make the column widths more flexible

You can organize your data in columns using the column class, like so:

<section class="columns">
	<section class="column">Column 1</section>
	<section class="column">Column 2</section>
	<section class="column">Column 3</section>
</section>

The columns are responsive, resize your screen to see how they behave.

NOTE: Use a grid if you need to control the size of the individual columns, or if you know the number of columns you will be using.

If you know the number of columns you will have, or if you need to control the sized of the columns, the grid system should help you out.

To use the grid, first make a container with a grid class. Within this, put containers for each of your columns with a class of grid-n, where n is the fraction of 12 that you want the column to fill.

For instance, if you want a column that fills a half of the screen surrounded by two that fill 1/4 of the screen, you can do this

<div class="grid">
	<div class="grid-3">
		.grid-3
	</div>
	<div class="grid-6">
		.grid-6
	</div>
	<div class="grid-3">
		.grid-3
	</div>
</div>

And the result would look like this:

Buttons with 'submit' class are for actions that modify data on the server.

.submit

Buttons with 'deny' class are for actions that delete data on the server.

.deny

Buttons with 'approve' class are for actions that you wish to highlight.

.approve

Buttons with no class are for actions that do not have drastic consequences.

Nil

Buttons with 'disabled' class are for disabled actions (surprise, surprise).

.disabled

A button can be made inline by adding the inline class.

This is an inline button.

Font Awesome

To add alerts to your page, first add a section with class alert-box right before your opening article tag:

<div class="alert-box">
</div>
<article>
	<!-- the rest of your page -->

Within the alert-box you can now add your alerts, like this (close buttons are automatically added if you add the alert-closable class):

<div class="alert-box">
	<div class="alert-error">
		There was an error.
	</div>
	<div class="alert-success">
		The operation succeeded.
	</div>
</div>
<article>
	<!-- the rest of your page -->

For information on displaying alerts programmatically, see the JS section.

Inputs

Pill-style radio buttons

<div class="control-group">
	<input type="radio" value="1" id="pill-radio1" name="demoPillRadio" class="pill-select" checked>
	<label for="pill-radio1" class="pill-select">Option 1</label>
	<input type="radio" value="2" id="pill-radio2" name="demoPillRadio" class="pill-select">
	<label for="pill-radio2" class="pill-select">Option 2</label>
	<input type="radio" value="3" id="pill-radio3" name="demoPillRadio" class="pill-select">
	<label for="pill-radio3" class="pill-select">Option 3</label>
</div>

<div class="control-group">
	<input type="radio" value="y" id="pill-radio4" name="demoPillRadio2" class="pill-select" checked>
	<label for="pill-radio4" class="pill-select">Option 1</label>
	<input type="radio" value="n" id="pill-radio5" name="demoPillRadio2" class="pill-select">
	<label for="pill-radio5" class="pill-select deny">Option 2</label>
</div>

<p>
	<input type="checkbox" id="pill-check1" class="pill-select">
	<label for="pill-check1" class="pill-check"></label>
</p>

<p>
	<input type="checkbox" id="pill-check2" class="pill-select">
	<label for="pill-check2" class="pill-check" data-label-text="Coffee"></label>
</p>

Block elements can be aligned with the 'float-left' and 'float-right' classes

You should usually put floated or centered elements within a parent element with the 'group' class to prevent formatting issues.

You can center an element with the 'center' class

Elements can get padding with the 'padded' class

Elements can remove padding with the 'not-padded' class

You can decrease the font size with the 'fine-print' class

You can increase the font size with the 'large-print' class

You can use 'text-left', 'text-right', and 'text-center' to format text

You can force an element to scroll at 200px with 'scroll-box'

You can add a shadow to an element with 'shadow'

And you can remove it with 'no-shadow'

You can use the 'card' class for cards

You can use 'margin-bottom' to add margin to an element, and you can use 'no-margin-bottom' to remove it

You can use .border-left, .border-bottom, etc. to visually separate elements on a page.

                
                    <div class="timeline-container">
                        <div class="timeline-container-spacer">
                            <!-- Begin Container -->
                            <div class="transition-and-state-container">
                                <div class="state-container">
                                    <div class="state">State</div>
                                </div>
                                <div class="transition-container">
                                    <div class="transition-arrow">
                                        <div class="arrow"></div>
                                        <div class="transition-reason">Transition Reason</div>
                                        <div class="transition-change-info">
                                            <div>Change Info1</div>
                                            <div>Change Info2</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Container -->
                            <!-- Begin Container -->
                            <div class="transition-and-state-container">
                                <div class="state-container">
                                    <div class="state">Another State</div>
                                </div>
                                <div class="transition-container">
                                    <div class="transition-arrow">
                                        <div class="arrow"></div>
                                        <div class="transition-reason">Super Awesome Transition Reason</div>
                                        <div class="transition-change-info">
                                            <div>Change Info 2</div>
                                            <div>Change Info</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Container -->
                            <!-- Begin Container -->
                            <div class="transition-and-state-container">
                                <div class="state-container">
                                    <div class="state">Another State</div>
                                </div>
                                <div class="transition-container">
                                    <div class="transition-arrow">
                                        <div class="arrow"></div>
                                        <div class="transition-reason">Super Awesome Transition Reason</div>
                                        <div class="transition-change-info">
                                            <div>Change Info 2</div>
                                            <div>Change Info</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Container -->
                            <!-- Begin Container -->
                            <div class="transition-and-state-container">
                                <div class="state-container">
                                    <div class="state">Another State</div>
                                </div>
                                <div class="transition-container">
                                    <div class="transition-arrow">
                                        <div class="arrow"></div>
                                        <div class="transition-reason">Super Awesome Transition Reason</div>
                                        <div class="transition-change-info">
                                            <div>Change Info 2</div>
                                            <div>Change Info</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Container -->
                            <!-- Begin Container -->
                            <div class="transition-and-state-container">
                                <div class="state-container">
                                    <div class="state">Another State</div>
                                </div>
                                <div class="transition-container">
                                    <div class="transition-arrow">
                                        <div class="arrow"></div>
                                        <div class="transition-reason">Super Awesome Transition Reason</div>
                                        <div class="transition-change-info">
                                            <div>Change Info 2</div>
                                            <div>Change Info</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Container -->
                            <!-- Begin Container -->
                            <div class="transition-and-state-container">
                                <div class="state-container">
                                    <div class="state">Another State</div>
                                </div>
                                <div class="transition-container">
                                    <div class="transition-arrow">
                                        <div class="arrow"></div>
                                        <div class="transition-reason">Super Awesome Transition Reason</div>
                                        <div class="transition-change-info">
                                            <div>Change Info 2</div>
                                            <div>Change Info</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Container -->
                        </div>
                    </div>
                
            

@Html.RenderJQueryScripts()

@Html.RenderPantherScripts()

@Html.RenderAllScripts()

JS

$(document).ready(function () {
	$('.popup').popup();
	$('#popup1-trigger').click(function () {
		$('#popup1').popup({ action: 'open' });
	});
});
					

HTML

<button id="popup1-trigger">Display popup</button>
<div id="popup1" class="popup" data-title="This is a popup">
	<p>This is some text</p>
</div>
					

Demo

Display popup

Options

Options can be passed in when initializing the popups, like this:

$('.popup').popup({width: 50});

List of options

width (number, default: undefined): width of popup in percent
type (string, default: popup): can be one of the following:
	- popup: a normal popup with overlay and title. can be closed by clicking off the popup or clicking the close button.
	- dialog: removes close button and does not allow clicking off to close popup. Can only be closed by explicitly calling popup({action: 'close'}). Also makes the popup width smaller.
allowClose (boolean, default: true): whether to allow user to close popup with close button or by clicking off the popup.
showOverlay (boolean, default: true): whether to show overlay.
disableScroll (boolean, default: false): whether to allow scrolling if content overflows

Note

If you are AJAXing content into a popup, make sure you target .content inside the popup instead of the popup itself.

$('#somespecialpopup .container').load('somedata.html');

When your popup has a form in it, you should use the jQueryUI dialog method instead.

HTML

<p>
	<button id="jquery-ui-dialog-trigger">Display dialog</button>
</p>
<div id="dialog" title="test"><input type="text"></div>

JS

$(document).ready(function () {
	$('#dialog').dialog(modal: true, autoOpen: false);
	$('#jquery-ui-dialog-trigger').click(function () {
		$('#dialog').dialog('open');
	});
});

Demo

Display dialog

Usage

displayAlert(message, type)

To display an alert with Javascript, you have to have an alert-box div directly below your page header, like this.

<div class="header-page">
	<h1>Page Name</h1>
</div>
<section class="alert-box"></section>
<article class="page">
	<!-- rest of page -->

Then you can display the alert like this:

displayAlert('something failed', 'error');
displayAlert('that succeeded', 'success');

Demo

Show success alert Show error alert

JS

$(document).ready(function () {
	$('select').chosen({ width: '200px' });
});

Example

Option 1 Option 2 Option 3 Option 4

Resources

Chosen.js Official Docs

The jQuery searcher plugin should be used for the "Quick Filter" input, as well as any other fields that filter items in the DOM.

Resources

Jquery-searcher Official Docs

Usage

To display a the loader with Javascript, you have to have a loader div and an img element located on the page, like this.

<div class="loader">
<img src="@(System.Configuration.ConfigurationManager.AppSettings["PantherCDN"])/images/Ajax-loader.gif">
</div>

Then you can show and hide the loader like this:

ShowLoader()
HideLoader()

Summary

Adds the Panther standard header.

Usage

Html.DisplayHeader(app_name, links, ...)

Example

@Html.DisplayHeader("My App", @Html.ActionLink("Home", "Index", "Home").ToHtmlString(), @Html.Action("About", "About", "Home").ToHtmlString())

Summary

Adds the Panther standard footer.

Usage

Html.DisplayFooter()

Summary

Returns script tags for PantherCDN scripts. Does not include jQuery validate as this may not be used on some sites.

Usage

Html.RenderPantherScripts()

Example

<head>
	<!-- title, css, etc. goes here -->
	@Html.RenderPantherScripts()
</head>