CSS Styles Reference

DesignSafe-CI uses a bootstrap-based theme, so for most styles you can simply follow the documentation for bootstrap.

The following custom styles are implemented for DesignSafe:

Colors

The following colors are used throughout the site, one color per major site section:

Category/Section	Shorthand	Color
Research Workbench	research	#136ac9
Experimental Facilities	ef	#ca463e
NHERI Community	community	#6caa39
Learning Center	learning	#a5a4a4

Highlight colors

Text can be highlighted with each category's corresponding color using the highlight classes:

<span class="hl-research">Research</span>

Replacing with the appropriate category shorthand will apply that color.

The available classes are:

• hl-research
• hl-ef
• hl-community
• hl-learning

Header Styles

DesignSafe "fancy" headers can be implemented with the following markup:

<h1 class="headline headline-research"><span class="hl-research">Research</span><br>Workbench</h1>

This will render a header like the following:

For headers in each category color, simply replace research with the desired category shorthand to apply that color underline (and highlight.)

• headline-research
• headline-ef
• headline-community
• headline-learning

Box styles

For the "box" page components use the following markup:

<div class="box">
  <div class="box-topper box-topper-research">
    <i class="ds-icon ds-icon-cloud-disk"></i>
  </div>
  <div class="box-content">
    <h4>Headline</h4>
    <p>Lorem ipsum dolor amet...</p>
  </div>
</div>

The box-topper color can be modified for each site category with the following class modifiers:

• box-topper-research
• box-topper-ef
• box-topper-community
• box-topper-learning

Custom Icons

To apply DesignSafe custom icons, use the following markup, replacing {icon-class-name} with the desired icon:

<i class="ds-icon ds-icon-{icon-class-name}"></i>

The following icon class names are available:

Class Name	Icon Name	Image
.ds-icon-cloud-disk
.ds-icon-desktop-compass
.ds-icon-portal-eye
.ds-icon-portal-code
.ds-icon-home
.ds-icon-desktop-calendar
.ds-icon-document-bolt
.ds-icon-group
.ds-icon-group-add
.ds-icon-toolbox
.ds-icon-document-copy
.ds-icon-support
.ds-icon-lightbulb