Style Guide

DNN Skins
DNN Containers
Button Styles
Headers
Basic Typography Styles
Special Text Styles
List Styles
Images
Tables
Form Elements
Simple Grid

DNN Skins

**Home** - Special skin which should be used only for the home page of Smartbus.org

**Inside** - Generic inside page skin which has a pane for a left sidebar.

**InsideFull** - Generic inside page skin which is full width, no sidebar.

**InsideNarrow** - A narrow version of the full width skin, useful if you have a form or module that you do not want to span the entire full width.

**Map** - Special skin that should only be used for the full screen map modules.

DNN Container Styles

**Plain** - No title, no extra styles. Good for blocks of text or content of any size.

**PlainTitle** - H2 Title, with no extra styles. Good for blocks of text or content of any size.

**InfoBox** - No title, should mostly be used for adding a small 'i' info icon next to a small bit of text.

**DashboardBlock** - A gray background bordered box, with a small title. Good for small amounts of text or modules.

**RedTitle** - Title with a red border. Good for placing more emphasis on a title.

**OrangeTitle** - Title with a orange border. Good for placing more emphasis on a title.

**InsideMenu** - Special container style for the inside menu. This pulls the page title and link to the root parent of the page you are on.

Button Styles

These classes can be applied to links, buttons, and submit input types to create different styled buttons.

Primary Button

<a class="button-primary">Primary Button</a>

Secondary Button

<a class="button-secondary">Secondary Button</a>

The different colored buttons below can be used to add an accent colored button when needed.

Blue Button

<a class="button-blue">Blue Button</a>

Button Red

<a class="button-red">Button Red</a>

Button Orange

<a class="button-orange">Button Orange</a>

Modifying classes can be added to buttons to change their size and width.

Primary Button

<a class="button-primary button-mini">Primary Button</a>

Primary Button

<a class="button-primary button-small">Primary Button</a>

Primary Button

<a class="button-primary button-medium">Primary Button</a>

Primary Button

<a class="button-primary button-block">Primary Button</a>

Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

Basic Typography Styles

Paragraph

A Basic Paragraph Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>A Basic Paragraph Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

Blockquote

A Basic Blockquote Style Maecenas sed diam eget risus varius blandit sit amet non magna.

<blockquote><strong>A Basic Blockquote Style</strong> Maecenas sed diam eget risus varius blandit sit amet non magna.</blockquote>

Blockquote with Text Floated Left

A Blockquote With Text Floated to the Left

Here is some text floated to the left. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.

<div class="group"><blockquote class="float-left">A Blockquote With Text Floated to the Left</blockquote>
<p>Here is some text floated to the left. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>

Blockquote with Text Floated Right

A Blockquote With Text Floated to the Right

Here is some text floated to the right. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.

<div class="group"><blockquote class="float-right">A Blockquote With Text Floated to the Right</blockquote>
<p>Here is some text floated to the right. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>

Strong Text

Strong Text - Text can also be strongly emphasized

<strong>Strong Text</strong> - Text can also be strongly emphasized

Text Alignment Styles

This text is center aligned.

<p class="align-center">This text is center aligned.</p>

This text is right aligned.

<p class="align-right">This text is right aligned.</p>

This text is left aligned. Only needed if you are resetting other-aligned text.

<p class="align-left">This text is left aligned.</p>

Special Text Styles

Page Title

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

Emphasized Text

<h3 class="em">Emphasized Text</h3>

Small text Nulla vitae elit libero, a pharetra augue.

<p class="small-text">Small text Nulla vitae elit libero, a pharetra augue.</p>

Small Italic Text Nulla vitae elit libero, a pharetra augue.

<p class="small-italic">Small Italic Text Nulla vitae elit libero, a pharetra augue.</p>

A Special note, often used on forms.

<p class="form-note">A Special note, often used on forms.</p>

List Styles

An Unordered List (Can be Nested)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Vestibulum auctor dapibus neque.

<ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    </li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

An Ordered List

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

<ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ol>
    </li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ol>

A Plain List (No Margins or Bullets)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

<ul class="plain-list">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

A Link Block List Links span the full width and they are in a plain list.

<ul class="link-block">
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
    <li><a href="#">Vestibulum auctor dapibus neque.</a></li>
</ul>

Special Dashboard List - Blocky links with a special style.

<ul class="dashboard-list">
    <li><a href="#">Link Example</a></li>
    <li><a href="#">Link Example</a></li>
    <li><a href="#">Link Example</a></li>
</ul>

Image Styles

Center Aligned Image

<img alt="" src="/portals/0/StyleGuide/example-image.jpg" class="align-center"/>

Image Floated Left of Content

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="group">
<img alt="" src="/portals/0/StyleGuide/example-image.jpg" class="float-left"/>
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
<p>
</div>

Image Floated Right of Content

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="group">
<img alt="" src="/portals/0/StyleGuide/example-image.jpg" class="float-right"/>
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
<p>
</div>

Image that spans the Full Width of container

<img alt="" src="/portals/0/StyleGuide/example-image.jpg" class="max-width"/>

Tables

Tables should only be used for tabular data, not for layout purposes. They should be accompanied with proper table headings, and if necessary, a table footer. They should be kept to as few columns as possibly for publicly facing information so that they show up more optimally on smaller devices.

Basic Table

Heading A	Heading B	Heading C
A Very Basic Table Example
Text 1	Text 2	Text 3
Text 4	Text 5	Text 6
Text 7	Text 8	Text 9

<table>
    <thead>
        <tr>
            <th>Heading A</th>
            <th>Heading B</th>
            <th>Heading C</th>
        </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="3">A Very Basic Table Example</td>
    </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Text 1</td>
            <td>Text 2</td>
            <td>Text 3</td>
        </tr>
        <tr>
            <td>Text 4</td>
            <td>Text 5</td>
            <td>Text 6</td>
        </tr>
        <tr>
            <td>Text 7</td>
            <td>Text 8</td>
            <td>Text 9</td>
        </tr>
    </tbody>
</table>

Form Inputs

A Basic Text Input

These are how form elements are marked up in Smart's custom modules.

Form Label

<div class="form-entry">
<label for="input-type">Form Label</label>
<input class="form-input" placeholder="Placeholder Text" id="input-type" />
</div>

Simple Grid

Half

<div class="row">
<div class="half col mobile-collapse">[Content]</div>
<div class="half col mobile-collapse">[Content]</div>
</div>

Third

Two-Third

<div class="row">
<div class="third col tablet-collapse">[Content]</div>
<div class="two-third col tablet-collapse">[Content]</div>
</div>

Fourth

<div class="row">
<div class="fourth col">[Content]</div>
<div class="fourth col">[Content]</div>
<div class="fourth col">[Content]</div>
<div class="fourth col">[Content]</div>
</div>

Fourth

Three-Fourth

<div class="row">
<div class="fourth col">[Content]</div>
<div class="three-fourth col">[Content]</div>
</div>

Fifth

<div class="row">
<div class="fifth col">[Content]</div>
<div class="fifth col">[Content]</div>
<div class="fifth col">[Content]</div>
<div class="fifth col">[Content]</div>
<div class="fifth col">[Content]</div>
</div>

Three-Fifth

Two-Fifth

<div class="row">
<div class="three-fifth col">[Content]</div>
<div class="two-fifth col">[Content]</div>
</div>

Three-Tenth

Seven-Tenth

<div class="row">
<div class="three-tenth col">[Content]</div>
<div class="seven-tenth col">[Content]</div>
</div>

Bus Tracker

Fare & Passes

Schedules

New to Riding

Style Guide

DNN Skins

DNN Container Styles

Button Styles

Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

Basic Typography Styles

Paragraph

Blockquote

Blockquote with Text Floated Left

Blockquote with Text Floated Right

Strong Text

Text Alignment Styles

Special Text Styles

Page Title

Emphasized Text

List Styles

Image Styles

Center Aligned Image

Image Floated Left of Content

Image Floated Right of Content

Image that spans the Full Width of container

Tables

Basic Table

Form Inputs

A Basic Text Input

Simple Grid

SMART Homepage. Plan your trip with SMART and read the latest service bulletins and announcements.

Bus Tracker

Fare & Passes

Schedules

New to Riding

Style Guide

DNN Skins

DNN Container Styles

Button Styles

Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

Basic Typography Styles

Paragraph

Blockquote

Blockquote with Text Floated Left

Blockquote with Text Floated Right

Strong Text

Text Alignment Styles

Special Text Styles

Page Title

Emphasized Text

List Styles

Image Styles

Center Aligned Image

Image Floated Left of Content

Image Floated Right of Content

Image that spans the Full Width of container

Tables

Basic Table

Form Inputs

A Basic Text Input

Simple Grid