Style Guide


Responsive Grid

This site uses a 12 column grid responsive grid. There are 3 built-in breakpoint classes (acol - smallest screen width, col - mid screen width, ccol - largest screen width). These are used to make the columns responsive for mobile, tablet, and desktop.

  • acol = 600px width and under
  • col = 601px to 1281px
  • ccol = 1281px and over

Default Grid (mid-width columns)

col12

col6

col6

col1

col11

col2

col10

col3

col9

col4

col8

col5

col7


Sample Responsive Grid (resize window to see breakpoints)

col6, acol12, ccol4

col6, acol12, ccol8

Typography

Primary Typography

Main Page Title

Class Name: primary-title

Widget Title

Class Name: titleItems (must be H2)

Headline

Class Name: ssi-type__headline

Title

Class Name: ssi-type__title

Subheading

Class Name: ssi-type__subhead

Body Text

Class Name: ssi-type__body

Link Text

Class Name: ssi-color-text__pri-lt-blue

New Heading + Larger Paragraph Classes

These classes can be applied to any heading regardless of hierarchy. Margin and padding classes can be used to adjust spacing if needed.

Giant Blue Heading

Big Blue Heading

Medium-Large Blue Heading

Medium Blue Heading

Small Blue Heading

Giant Grey Heading

Big Grey Heading

Medium-Large Grey Heading

Medium Grey Heading

Small Grey Heading

Giant White Heading

Big White Heading

Medium-Large White Heading

Medium White Heading

Small White Heading

Also see: Use the intro-paragraph class to bump up the font size.

Text Alignment

Text-Align Left

Class Name: ssi-text__left

Text-Align Right

Class Name: ssi-text__right

Text-Align Center

Class Name: ssi-text__center

Text-Align Justify - Justify the text in a paragraph to stretch the main content evenly from the left edge to the right, similar to a newspaper.

Class Name: ssi-text__justify


  • adjust <ul> and <ol> for bullets to show- class="ssi-list"

Adjustment

  • text nowrap - class="ssi-text__nowrap"
  • not allow selection of text - class="ssi-text__noselect
  • no padding - class="ssi-text__no-pad "
  • text-align justify - class="ssi-text__justify"
  • font size
    • .7em - class="ssi-font__70"
    • .8em - class="ssi-font__80"
    • .9em - class="ssi-font__90"
    • MuseoSans-900 - class="ssi-font__ultra-bold" or "ssi-bold "
  • responsive text - class="mktg-content"

Decoration

  • text underline - class="ssi-text__underline"
  • italic text - class="ssi-font__italic"
  • force lowercase text - class="ssi-text__lowercase"
  • force uppercase text - class="ssi-text__uppercase"
  • force capitalize text - class="ssi-text__capitalize"
Always use the appropriate MuseoSans font rather than setting a font-weight seperately.

Available MuseoSans font families:
MuseoSans-900, MuseoSans-900Italic, MuseoSans-700, MuseoSans-700Italic, MuseoSans-500, MuseoSans-500Italic, MuseoSans-300, MuseoSans-300Italic

  • font weight (bolding)
    • MuseoSans-300 - class="ssi-font__light"
    • MuseoSans-500 - class="ssi-font__normal"
    • MuseoSans-700 - class="ssi-font__bold"
    • MuseoSans-900 - class="ssi-font__ultra-bold" or "ssi-bold "

Colors

Primary Colors

#0f6cb6
ssi-color__pri-dk-blue
ssi-color__pri-dk-blue hover
ssi-color__pri-dk-blue-trans
ssi-color-text__pri-dk-blue
#72c267
ssi-color__pri-green
ssi-color__pri-green hover
ssi-color__pri-green-trans
ssi-color-text__pri-green
#00a9cc
ssi-color__pri-lt-blue
ssi-color__pri-lt-blue hover
ssi-color__pri-lt-blue-trans
ssi-color-text__pri-lt-blue

Secondary Colors

#ff6249
ssi-color__deep-orange
ssi-color__deep-orange hover
ssi-color__deep-orange-trans
ssi-color-text__deep-orange
#d95436
ssi-color__dk-deep-orange
ssi-color__dk-deep-orange hover
ssi-color__dk-deep-orange-trans
ssi-color-text__dk-deep-orange
#F08D05
ssi-color__orange
ssi-color__orange hover
ssi-color__orange-trans
ssi-color-text__orange
#d97a36
ssi-color__dk-orange
ssi-color__dk-orange hover
ssi-color__dk-orange-trans
ssi-color-text__dk-orange
#E9D11F
ssi-color__yellow
ssi-color__yellow hover
ssi-color__yellow-trans
ssi-color-text__yellow
#d1ac35
ssi-color__dk-yellow
ssi-color__dk-yellow hover
ssi-color__dk-yellow-trans
ssi-color-text__dk-yellow
#bed14f
ssi-color__lime
ssi-color__lime hover
ssi-color__lime-trans
ssi-color-text__lime
#aab848
ssi-color__dk-lime
ssi-color__dk-lime hover
ssi-color__dk-lime-trans
ssi-color-text__dk-lime
#60AD23
ssi-color__green
ssi-color__green hover
ssi-color__green-trans
ssi-color-text__green
#1fb894
ssi-color__aqua
ssi-color__aqua hover
ssi-color__aqua-trans
ssi-color-text__aqua
#01A3A3
ssi-color__teal
ssi-color__teal hover
ssi-color__teal-trans
ssi-color-text__teal
#339193
ssi-color__dk-teal
ssi-color__dk-teal hover
ssi-color__dk-teal-trans
ssi-color-text__dk-teal
#91acea
ssi-color__indigo
ssi-color__indigo hover
ssi-color__indigo-trans
ssi-color-text__indigo
#918ad1
ssi-color__violet
ssi-color__violet hover
ssi-color__violet-trans
ssi-color-text__violet
#b973c9
ssi-color__purple
ssi-color__purple hover
ssi-color__purple-trans
ssi-color-text__purple
#e55f9a
ssi-color__pink
ssi-color__pink hover
ssi-color__pink-trans
ssi-color-text__pink
#a70267
ssi-color__dk-pink
ssi-color__dk-pink hover
ssi-color__dk-pink-trans
ssi-color-text__dk-pink

Warning/Error Colors

#d80000
ssi-color__red
ssi-color__red hover
ssi-color__red-trans
ssi-color-text__red
#8B0F0F
ssi-color__dk-red
ssi-color__dk-red hover
ssi-color__dk-red-trans
ssi-color-text__dk-red

Neutral Colors

#f5f5f5
ssi-color__lt-grey
ssi-color__lt-grey hover
ssi-color__lt-grey-trans
ssi-color-text__lt-grey
#a5a5a5
ssi-color__med-grey
ssi-color__med-grey hover
ssi-color__med-grey-trans
ssi-color-text__med-grey
#686868
ssi-color__dk-grey
ssi-color__dk-grey hover
ssi-color__dk-grey-trans
ssi-color-text__dk-grey
#4d4d4d
ssi-color__charcoal
ssi-color__charcoal hover
ssi-color__charcoal-trans
ssi-color-text__charcoal
#000000
ssi-color__black
ssi-color__black hover
ssi-color__black-trans
ssi-color-text__black
#ffffff
ssi-color__white
ssi-color__white hover
ssi-color__white-trans
ssi-color-text__white

Buttons

Primary Button
class="primary_button"
Secondary Button
class="secondary_button"
Small Primary
class="primary_button small"
Small Secondary
class="secondary_button small"

Non-text Objects

Helper Classes
  • centering content - class="ssi-content__center"
  • clear floats - class="ssi-clearfix:after"
  • 3px border - class="ssi-border__3"
  • adjust <ul> and <ol> for bullets to show- class="ssi-list"
backgound color bar used for heading - class="ssi-heading-bar" with chosen background and text color classes (ex. class="ssi-heading-bar ssi-color__aqua ssi-color-text__white")

CSS margin and padding helper classes to adjust spacing between elements:

	
		/* margin helper classes */
		.m-0 {
			margin: 0 !important;
		}
		.m-10 {
		    margin: 10px !important;
		}
		.m-20 {
		    margin: 20px !important;
		}
		.m-30 {
		    margin: 30px !important;
		}
		.m-40 {
		    margin: 40px !important;
		}
		.m-50 {
		    margin: 50px !important;
		}
		.mt-0 {
			margin-top: 0 !important;
		}
		.mt-10 {
		    margin-top: 10px !important;
		}
		.mt-20 {
		    margin-top: 20px !important;
		}
		.mt-30 {
		    margin-top: 30px !important;
		}
		.mt-40 {
		    margin-top: 40px !important;
		}
		.mt-50 {
		    margin-top: 50px !important;
		}
		.mb-0 {
			margin-bottom: 0 !important;
		}
		.mb-10 {
		    margin-bottom: 10px !important;
		}
		.mb-20 {
		    margin-bottom: 20px !important;
		}
		.mb-30 {
		    margin-bottom: 30px !important;
		}
		.mb-40 {
		    margin-bottom: 40px !important;
		}
		.mb-50 {
		    margin-bottom: 50px !important;
		}
		/* padding helper classes */
		.p-0 {
			padding: 0 !important;
		}
		.p-10 {
		    padding: 10px !important;
		}
		.p-20 {
		    padding: 20px !important;
		}
		.p-30 {
		    padding: 30px !important;
		}
		.p-40 {
		    padding: 40px !important;
		}
		.p-50 {
		    padding: 50px !important;
		}
		.pt-0 {
			padding-top: 0 !important;
		}
		.pt-10 {
		    padding-top: 10px !important;
		}
		.pt-20 {
		    padding-top: 20px !important;
		}
		.pt-30 {
		    padding-top: 30px !important;
		}
		.pt-40 {
		    padding-top: 40px !important;
		}
		.pt-50 {
		    padding-top: 50px !important;
		}
		.pb-0 {
			padding-bottom: 0 !important;
		}
		.pb-10 {
		    padding-bottom: 10px !important;
		}
		.pb-20 {
		    padding-bottom: 20px !important;
		}
		.pb-30 {
		    padding-bottom: 30px !important;
		}
		.pb-40 {
		    padding-bottom: 40px !important;
		}
		.pb-50 {
		    padding-bottom: 50px !important;
		}
	
Video
  • Video container class - class="ssi-video-wrapper"
  • Video class - class="ssi-video"
  • Video iframe class - class="ssi-video iframe"
  • YouTube iframe/video class - "youtube-video" - makes youtube embeds responsive and keeps them at a 16:9 ratio
Images
  • responsive images - class="ssi-responsive-image"
  • Make an image a circle shape - class="rounded-thumb"
Borders
  • 1px border - class="ssi-border__1"
  • 2px border - class="ssi-border__2 "
  • 3px border - class="ssi-border__3"
Rounded Corners
  • 2px all Corners - class="ssi-radius__2"
  • 2px Right Corners - class="ssi-radius__right-2"
  • 2px Left Corners - class="ssi-radius__left-2"
  • 5px all Corners - class="ssi-radius__5"
  • 5px Right Corners - class="ssi-radius__right-5"
  • 5px Left Corners - class="ssi-radius__left-5"
  • 8px all Corners - class="ssi-radius__8"
  • 8px Right Corners - class="ssi-radius__right-8"
  • 8px Left Corners - class="ssi-radius__left-8"
  • 10px all Corners - class="ssi-radius__10"
  • 10px Right Corners - class="ssi-radius__right-10"
  • 10px Left Corners - class="ssi-radius__left-10"
  • 50% Border Radius - class="rounded-thumb" (make an image a circle shape)

Icons

SSI Custom Icon Font Library

These are icons available in a custom font we link to in our stylesheet (/wcsstore/SSIB2BStorefrontAssetStore/fonts/ssi-icons.ttf)

Google Icons

We also utilitize Google Material Symbols

Mark-Up Snippets for Common Layouts

Header

Shop All

Header

Shop All