Switch Theme

SiteZeus^™ Brand Colors

Reference: source/variables/colors.scss

Grays

Multi-Colors

Default Color System
Primary Color System
Secondary Color System
Terciary Color System
Info Color System
Success Color System
Warning Color System
Danger Color System
Error Color System
Disabled Color System

Fonts and Typography

Reference: source/base/typography.scss

Main Font

R Roboto

In SASS variables/fonts.scss file we have the following:

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);

Main Text Elements

Display 1 (H1)

Thin 64 px

Display 2 (H2)

Thin 48 px

Display 3 (H3)

Thin 36 px

Display 4 (H4)

Thin 32 px

Title 1 (H5)

Thin 24 px

Title 2 (H6)

Regular 18 px

Paragraphs

Paragraph 3 (Sites)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus et velit pellentesque convallis fermentum eu ipsum. Etiam id ligula ultrices, viverra magna quis, varius quam. Suspendisse facilisis molestie libero. Curabitur auctor vulputate finibus. Pellentesque laoreet in sapien at elementum. In massa enim, dictum maximus nibh quis, aliquam sollicitudin nunc. Ut leo mauris, tincidunt ac bibendum id, dignissim sit amet orci. Nunc congue purus a nulla elementum pellentesque. Nulla ipsum metus, eleifend sit amet porttitor in, ullamcorper eu tortor.

Paragraph 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus et velit pellentesque convallis fermentum eu ipsum. Etiam id ligula ultrices, viverra magna quis, varius quam. Suspendisse facilisis molestie libero. Curabitur auctor vulputate finibus. Pellentesque laoreet in sapien at elementum. In massa enim, dictum maximus nibh quis, aliquam sollicitudin nunc. Ut leo mauris, tincidunt ac bibendum id, dignissim sit amet orci. Nunc congue purus a nulla elementum pellentesque. Nulla ipsum metus, eleifend sit amet porttitor in, ullamcorper eu tortor.

Paragraph STD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus et velit pellentesque convallis fermentum eu ipsum. Etiam id ligula ultrices, viverra magna quis, varius quam. Suspendisse facilisis molestie libero. Curabitur auctor vulputate finibus. Pellentesque laoreet in sapien at elementum. In massa enim, dictum maximus nibh quis, aliquam sollicitudin nunc. Ut leo mauris, tincidunt ac bibendum id, dignissim sit amet orci. Nunc congue purus a nulla elementum pellentesque. Nulla ipsum metus, eleifend sit amet porttitor in, ullamcorper eu tortor.

Supscripts

Sup script

SitePak ^TM

Decorated Text Elements

Underlaying text element will be between 96-144px, and overlaying text element will be between 36-60px.
Default is the one with 96px for underlaying text.
There are two presets:

.large with 128px for underlay text and 48px for overlay text.
.x-large with 144px for underlay text and 60px for overlay text.

Black 96 (default)

Blck Overlay

Black 128 .large

Blck Overlay

Black 144 .x-large

Blck Overlay

Alerts

Reference: source/elements/alerts.scss

Alerts with Icons

These are regular alerts that can be displayed by using the following code:

<div class="alert alert-default"> <i class="icon icon-headset"></i> Message Goes Here </div>

If you ever find yourself needing help, visit our virtual help desk for comprehensive FAQs and to chat to a specialist.

If you want to add a CTA, add the class alert-action

Did you know? When you click on this item you can generate Smart Comps™ to compare and contrast site.

Your Mobile Data trial will expire in 3 days.

<div class="alert alert-secondary alert-action"> <i class="icon icon-chat"></i> Your Message Here <button class="btn btn-light btn-outline">Purchase</button> </div>

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.ing help, visit our virtual help desk for comprehensive FAQs and to chat to a specialist.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

Alerts Outlines

These are regular alerts that can be displayed by using the following code:

<div class="alert alert-secondary alert-outline"> <i class="icon icon-chat"></i> Your Message Here </div>

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.ing help, visit our virtual help desk for comprehensive FAQs and to chat to a specialist.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

<div class="alert alert-primary alert-flat"> <i class="icon icon-notification_important"></i> <strong>New Release</strong> There is an upcoming new release that has these new changes and bug fixes for this and that. </div>

Alerts Flat

Add alert-flat to remove border. These alerts do not have a background or border and are best presented inside small areas/containers.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

Alerts Without Icon

Add the Class Iconless to remove icons alert-iconless

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

New Release There is an upcoming new release that has these new changes and bug fixes for this and that.

Menus and Lists

Reference: source/elements/menus.scss

Menu

Menu Inline

Menu No Arrow

Menu with Directions (Right or Left)

Menu with Category Icons

Menu with Scroll

Basic List

List Item 1
List Item 2
List Item 3

Basic Plain

List Item 1
List Item 2
List Item 3

Basic with Dots

List Item 1
List Item 2
List Item 3

List with Color Dots

List Item 1
List Item 2
List Item 3

List with Random Colors

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

List Inline

List Item 1
List Item 2
List Item with longer text
List Item 3 with a 2 line display on the block sdnkjns jlknds
List Item 4
List Item 5
List Item 6

List Pills

List Pill 1
List Pill 2
List Pill 3
List Pill 4

List Table

List Item 1
List Item 2
List Item with longer text
List Item 3 with a 2 line display on the block sdnkjns jlknds
List Item 4
List Item 5
List Item 6

Accordion

Accordion Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion Title 3 with a super long title in the header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion with Border

Accordion Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion Title 3 with a super long title in the header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SiteZeus^™ Icons

Reference: source/elements/icons.scss

Icons Options / Usage

Main Icon Sizes

Default (Medium) Size	24px
Small Size	16px
Extra Small Size	12px
Large Size	32px

Category Icons Specs

All categories icons have a 3-circle background with gradient fill on partial transparency.

HTML, SVG, and SASS (CSS) Specifications

We'll use a Data URIs embredded in the SCSS to generate icons. All of the icons are a combination of Material Design icons and custom SiteZeus icons. Data URIs can be generated here. For more complex icons we'll use composition of different shapes (circles for background, etc). All Google Material icons are also included.

Icons will be rendered with the following html:

<i class="icon icon-more_horiz"></i>

For smaller sizes just add class icon-xsmall icon-small or icon-large

<i class="icon icon-more_horiz icon-small"></i>

Icons

These are the new icons we will be using through out the app

Color Icons

To make the icons darker your can add icon-dark and icon-light for white icons. For color icons just add designated color class icon-blue or icon-pink

Color Icons - No Background

To make the icons darker your can add icon-dark and icon-light for white icons. For color icons just add designated color class icon-blue or icon-pink

Categories

We have a special set of icons that represent categories.

Alternative Styles

For color icons in different sizes, add the usual classes icon-large or icon-small

<i class="icon icon-homes icon-terciary icon-large"></i>

To remove the rings on a color icon, just add the class icon-plain

<i class="icon icon-homes icon-primary icon-plain"></i>

To remove the gradient and have a flat color add icon-flat then the icon goes from to this

<i class="icon icon-homes icon-secondary icon-flat"></i>

To make the icon a pin, add icon-pin

<i class="icon icon-location_on icon-error icon-pin"></i>

Buttons

Reference: source/elements/buttons.scss

Buttons Specs

General Specifications

HTML and SASS (CSS) Specifications

General Button Styles

Buttons will be rendered with the following html:

<button class="btn btn-primary"></button>

Flat buttons add btn-flat

If you want to add icons, insert the icon tag along with the icon-type There is no need to specify by icon class.

<button class="btn btn-primary"><i class="icon-homes"></i></button>

Button Outline Styles

Buttons will be rendered with the following html just add the following class btn-outline

<button class="btn btn-default btn-outline"></button>

<button class="btn btn-success btn-outline"><i class="icon-homes"></i></button>

Button Icon Styles

To make a button that contains only an icon, add btn-icon so it looks like this:

<button class="btn btn-terciary btn-icon"><i class="icon-homes"></i></button>

Borderless Buttons

Enclose buttons in a btn-group div to get a button group layout.

Small Sizes

To make a button different sizes, add btn-large or btn-small or btn-xlarge

Large Sizes

XLarge Sizes

Button Group

Enclose buttons in a btn-group div to get a button group layout.

Form Elements

Inputs

Reference: source/elements/inputs.scss

Input Types

<input type="text" placeholder="Input Text"/>

<input type="email" placeholder="Input Email"/>

<input type="tel" placeholder="Input Telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>

<input type="password" placeholder="Input Password"/>

<input type="search" placeholder="Input Search"/>

<input type="url" placeholder="Input URL"/>

<input type="number" placeholder="Input Number"/>

<input type="date" value="1980-08-26"/>

<input type="datetime-local"/>

<input type="month"/>

<input type="week"/>

<input type="time"/>

<input type="range" min="0" max="10"/>

<label class="input-color-picker"> <input type="color" /> </label>

<input type="file" />

<input type="radio" />

<input type="checkbox" />

<select> <option>Option</option> </select>

<select multiple> <option>Select Option</option> </select>

Input Groups - Recommended

Text Input with Label - 300px Max

<div class="input-group"> <label>Text Input </label> <input type="text" placeholder="Text Input with Label - 300px Max" /> </div>

Input Groups - Recommended

Wrap and checkbox or radio in a label tag.

Checkbox 1 Checkbox 2 Checkbox 3

<div class="checkbox-group"> <label><input type="checkbox"/> Checkbox 1</label> <label><input type="checkbox"/> Checkbox 2</label> <label><input type="checkbox"/> Checkbox 3</label> </div>

Add class inline to make the groups inline.

Checkbox 1 Checkbox 2 Checkbox 3

<div class="radio-group inline"> <label><input type="radio"/> Radio 1</label> <label><input type="radio"/> Radio 2</label> <label><input type="radio"/> Radio 3</label> </div>

Input Groups with Animated Labels

In order for the animation to work, label must be placed after the input. Placeholder and Label must match. (JS Not Required)

Text Input with Animated Label

<div class="input-group input-animated"> <input type="text" placeholder="Text Input with Animated Label" /> <label>Text Input with Animated Label</label> </div>

Adding the class input-light to invert the color.

<input type="text" placeholder="Input Text" class="input-light"/>

The submit button can have a class of btn btn-priamry. Any of the button styles will work on this button.

Error Handling

Menus and Lists

Menus

Reference: source/elements/inputs.scss

Reference: source/elements/buttons.scss

Button with Text Only

Button with Text Only (default size)

Button with Left Icon (default size)

Icon only buttons (plain)

Delete Confirmation (default)

Delete Confirmation (plain)

Delete Confirmation (icon only)

Delete Confirmation (outline icon only)

Report Outline Icon-Only (like in Report Wizard Download/Export/Share)

Report Outline Icon-Only (like in Report Wizard Download/Export/Share) with text below

Excel

Share

Download

Same as above but with less-opacity by default

Excel

Share

Download