SSC Atomic Classes and General Style Guide

Background Colors!

.bg-primary
Primary
.bg-secondary
Secondary
.bg-tertiary
Tertiary
.bg-accent1
Accent 1
.bg-accent2
Accent 2
.bg-primary-light
Primary Light
.bg-secondary-light
Secondary Light
.bg-tertiary-light
Tertiary Light
.bg-accent1-light
Accent 1 Light
.bg-accent2-light
Accent 2 Light
.bg-success
Success
.bg-warning
Warning
.bg-danger
Danger
.bg-success-light
Success
.bg-warning-light
Warning
.bg-danger-light
Danger
.bg-lightgray
Lightgray
.bg-gray
Gray
.bg-darkgray
Darkgray
.bg-black
Black

Buttons

.btn .btn-primary
.btn .btn-secondary
.btn .btn-tertiary
.btn .btn-accent1
.btn .btn-accent2
.btn .btn-default
.btn .btn-success
.btn .btn-info
.btn .btn-warning
.btn .btn-light
.btn .btn-dark
.btn .btn-outline-primary
.btn .btn-outline-secondary
.btn .btn-tertiary
.btn .btn-outline-accent1
.btn .btn-outline-accent2
.btn .btn-outline-success
.btn .btn-outline-info
.btn .btn-outline-warning
.btn .btn-outline-light
.btn .btn-dark
.btn .btn-primary .btn-lg
.btn .btn-primary .btn-sm
.btn .btn-primary .btn-block

Font Styling and Overrides

.text-primary

Primary Text

.text-secondary

Secondary Text

.text-tertiary

Tertiary Text

.text-accent1

Accent 1 Text

.text-Accent2

Accent 2 Text

.text-success

Success Text

.text-warning

Warning Text

.text-danger

Danger Text

.text-gray

Dark Text

.text-dark

Dark Text

.text-white
White Text
NOTE: You will want to default to markup to assist screen readers. 
.mark or <mark>...</mark>
Highlighted Text
<del>...</del> or <s>...</s>
Strikethrough or Deleted Text
<u>...</u>
Underlined Text
<em>...</em>
Emphasised Text
.ff-primary

Primary Font - Merriweather

.ff-secondary

Secondary Font - Fira Sans Extra Condensed

.ff-tertiary

Tertiary Font - Open Sans

Light

.ff-primary .fw-light

Primary Font - Merriweather


.ff-tertiary .fw-light

Secondary Font - Open Sans

Regular

.ff-primary .fw-regular

Primary Font - Merriweather

.ff-secondary .fw-regular

Secondary Font -Fira Sans Extra Condensed

.ff-tertiary .fw-regular

Secondary Font - Open Sans

Bold

.ff-primary .fw-bold

Primary Font - Merriweather

.ff-secondary .fw-bold

Secondary Font - Fira Sans Extra Condensed

.ff-tertiary .fw-bold

Secondary Font - Open Sans

.fs-xs

Extra Small Font Size (.75rem)

.fs-sm

Small Font Size (.875rem)

.fs-md

Medium/Regular Font Size (1rem)

.fs-lg

Large Font Size (1.125rem)

.fs-xl

Extra Large Font Size (1.25rem)

.fs-xxl

Extra Extra Large Font Size (1.5rem)

.fs-xxxl

Extra Extra Extra Large Font Size (2rem)

Atomic Common Recipes

Float Right Example

Float Right

Our styling lets this div become a maximum of 50% width. When the screen is below 768px, this the float-right goes full width. 

NOTE: The float should always be above the div it is floating next to. For easier editing, avoid adding styling classes to the float-right div and instead add children, like this example.

The classes

float-md-right ml-md-3 mb-3
Copy Float Right Classes Copy Float Right Div

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere finibus luctus. Maecenas mollis ac dolor non ullamcorper. Cras consectetur sem diam. Phasellus id tellus imperdiet, sollicitudin ligula eu, sagittis ante. Etiam placerat nulla eget elit suscipit, a molestie nulla imperdiet. Nunc quis congue nunc, a eleifend nisl. Nulla placerat aliquet imperdiet. Donec id sapien euismod magna mattis sodales eget et erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere finibus luctus. Maecenas mollis ac dolor non ullamcorper. Cras consectetur sem diam. Phasellus id tellus imperdiet, sollicitudin ligula eu, sagittis ante. Etiam placerat nulla eget elit suscipit, a molestie nulla imperdiet. Nunc quis congue nunc, a eleifend nisl. Nulla placerat aliquet imperdiet. Donec id sapien euismod magna mattis sodales eget et erat.


Social Links

Copy Facebook Markup Copy Twitter Markup Copy YouTube Markup Copy LinkedIn Markup Copy Instagram Markup Copy Flicker Markup

Copy Heading Markup
H2 Negative Margin-bottom
H3 Negative Margin-bottom
H4 Negative Margin-bottom

When headings are in a module by themselves, the bottom margins are doubled down. These headings have a negative margin class to fix the issue. Be sure to remove the classes content is added to the module at a later date. 

Example of Faux Table

This Faux table is for when you have half columns that should look like a table.

Example Heading
  • Item 1: Item Info
  • Item 2: Item Info
  • Item 3: Item Info
Example Heading
  • Item 1: Item Info
  • Item 2: Item Info
  • Item 3: Item Info
  • Item 4: Item Info

Make a new HTML document, set the size the columns and paste the markup below.

Copy Faux Table Markup

Form Examples

General Form Example

You must Log In to fill out this form.

Log In

You must Log In to fill out this form.

Log In

Fall 2019

Term Calendar: Fall 2019
  • Full Session: Aug. 20-Dec. 9
  • A Session: Aug. 20-Oct. 14
  • 12W Session: Sept. 10-Dec. 9
  • B Session: Oct. 15-Dec. 9
College and Offices Closed
  • Labor Day: Sept. 2
  • Thanksgiving Break: Nov. 27-Dec. 1
  • Winter Break: Dec. 21-31

Contact

Seminole State General Contact Information