Work in progress
Version 1.6.3
Last updated 09.21.2026

Custom

Styles used in custom ASCE projects.

Source:custom.scss, line 16

Sidebar

The navigation menu for the content displayed in the content container. pbid

The classes .show or .-show will reveal the sidebar by setting the width to $sidebar-width.

Note: The sidebar component has a fixed position that has been overridden to static for this example.

Example

View Markup

<!-- components/sidebar/sidebar-static.twig -->
<aside id="sidebar" class="sidebar show" style="position:static">
    <nav>
        <ul class="sidebar-menu">
            <li class="sidebar-menu-item -home">
                <a id="link_0" href=""><i class="icon-home"></i>Home</a>
            </li>
            <li class="sidebar-menu-item">
                <h4 id="sec_1"><a href="javascript:void(0);" role="button" data-toggle="dropdown" aria-expanded="false">Section 1</a></h4>
                <ul class="sidebar-menu-item-list d-none" aria-labelledby="sec_1">
                    <li><a id="sec_1_1" href="">Item 1.1</a></li>
                    <li><a id="sec_1_2" href="">Item 1.2</a></li>
                </ul>
            </li>
            <li class="sidebar-menu-item">
                <h4 id="sec_2"><a href="javascript:void(0);" role="button" data-toggle="dropdown" aria-expanded="true">Section 2</a></h4>
                <ul class="sidebar-menu-item-list" aria-labelledby="sec_2">
                    <li><a id="sec_2_1" href="">Item 2.1</a></li>
                    <li><a id="sec_2_2" href="">Item 2.2</a></li>
                    <li><a id="sec_2_3" href="">Item 2.3</a></li>
                    <li><hr class="-divider"></li>
                    <li>Some text</li>
                    <li><a id="sec_2_4" href="">Item 2.4</a></li>
                    <li><a id="sec_2_5" href="">Item 2.5</a></li>
                    <li><a id="sec_2_6" href="">Item 2.6</a></li>
                </ul>
            </li>
            <li class="sidebar-menu-item">
                <h4 id="sec_3"><a href="javascript:void(0);" role="button" data-toggle="dropdown" aria-expanded="false">Section 3</button></h4>
                <ul class="sidebar-menu-item-list d-none">
                    <li><a id="sec_3_1" href="">Item 3.1</a></li>
                    <li><a id="sec_3_2" href="">Item 3.2</a></li>
                </ul>
            </li>
            <li class="sidebar-menu-item">
                <h4><a id="sec_4" href="">Menu item</a></h4>
            </li>
            <li class="sidebar-menu-item">
                <h4><a id="sec_5" href="" disabled>Menu item (disabled)</a></h4>
            </li>
        </ul>
    </nav>
</aside>

Source:custom/components/sidebar/_sidebar.scss, line 1

Animations

Animation keyframes.

Source:custom/_animations.scss, line 1

Fade in animation

Transition of opacity from 0 to 1.

Definition

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

Source:custom/_animations.scss, line 10

Fade out animation

Transition of opacity from 1 to 0.

Definition

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

Source:custom/_animations.scss, line 33

ASCE Loader

A loading animation.

Note: Adding .-contain or .contain will give the component a relative position.

.asce-loader {
    ...
    opacity: 0;
    visibility: hidden;
    &.-loading {
      opacity: 1;
      visibility: visible;
    }
}

Examples

Default

Loading content...
We appreciate your patience

.-loading

Loading state

Loading content...
We appreciate your patience

View Markup

<div class="asce-loader -contain {{modifier_class}}">
  <div class="asce-loader-text">Loading content...<br>We appreciate your patience</div>
</div>

Source:custom/components/asce-loader/_asce-loader.scss, line 1

Messages

Status, warning, and error messages. Web app

Dependencies:

Variables from global-scss/forms/forms.scss.

Modifier classes:

`.messages--status`	Status message
`.messages--warning`	Warning message
`.messages--error`	Error message

Example

Default message text

Status message text

Warning message text

Error message text

View Markup

<!-- custom/webapps/messages/messages.twig -->
<div class="status-messages">
            <div class="messages__wrapper">
                            <div class="messages" role="alert" aria-label="false message">
                    Default message text
                </div>
                            <div class="messages messages--status" role="status" aria-label="status message">
                    Status message text
                </div>
                            <div class="messages messages--warning" role="alert" aria-label="warning message">
                    Warning message text
                </div>
                            <div class="messages messages--error" role="alert" aria-label="error message">
                    Error message text
                </div>
                    </div>
    </div>

Source:custom/components/messages/_messages.scss, line 1

Comparison Table

Comparison tool with a responsive table display. Web app

Example

Engineer grades view/comparison

Choose up to three grades to view/compare.

Status, warning, and error messages appear here.

	Grade I	Grade II
Remove from the list	Remove	Remove
General Characteristics	General Characteristics Possesses foundational engineering concepts through undergraduate level education. Acquires basic knowledge and develops basic skills through mentored experience. Applies learned knowledge and skills to perform assigned tasks. Performs routine technical work which does not require previous experience. Acquires an understanding of professional and ethical responsibilities. Acknowledges and identifies the ethical responsibilities of a civil engineer.	General Characteristics Acquires fundamental knowledge and develops skills in a specific practice area through mentored experience. Applies standard techniques, procedures, and criteria to perform assigned tasks as part of a broader assignment. Understands and complies with ethical codes.
Technical Responsibilities	Technical Responsibilities Collects data and gathers information or documents. Participates in laboratory testing and field investigations. Performs basic computations or analysis. Assists with preparation of engineering deliverables. Observes construction activities.	Technical Responsibilities Performs basic design tasks. Assists on tasks such as: field activities, material testing, CADD work, permit applications, and report writing.

View Markup

<!-- custom/webapps/comparison-table/comparison-table.twig -->
<div class="comparison-table">
    <h2 class="comparison-table-title h5">Engineer grades view/comparison</h2>
    <header>
      <p class="-center">Choose <strong>up to three</strong> grades to view/compare.</p>
    </header>
    <form class="comparison-table-menu">
        <div class="comparison-table-menu-inner">
            <ul class="comparison-table-menu-list">
                                    <li class="comparison-table-menu-list-item">Grade I
                                                    <a href="#" class="remove-link">Remove</a>
                                            </li>
                                    <li class="comparison-table-menu-list-item">Grade II
                                                    <a href="#" class="remove-link">Remove</a>
                                            </li>
                                    <li class="comparison-table-menu-list-item">Grade III
                                                    <a href="#" class="add-link">View</a>
                                            </li>
                                    <li class="comparison-table-menu-list-item">Grade IV
                                                    <a href="#" class="add-link">View</a>
                                            </li>
                                    <li class="comparison-table-menu-list-item">Grade V
                                                    <a href="#" class="add-link">View</a>
                                            </li>
                                    <li class="comparison-table-menu-list-item">Grade VI
                                                    <a href="#" class="add-link">View</a>
                                            </li>
                                    <li class="comparison-table-menu-list-item">Grade VII
                                                    <a href="#" class="add-link">View</a>
                                            </li>
                                    <li class="comparison-table-menu-list-item">Grade VII
                                                    <a href="#" class="add-link">View</a>
                                            </li>
                            </ul>
        </div>
    </form>
    <!-- custom/webapps/messages/messages.twig -->
<div class="status-messages">
            <div class="messages__wrapper">
                            <div class="messages" role="alert" aria-label="false message">
                    Status, warning, and error messages appear here.
                </div>
                    </div>
    </div>
</div>
<div id="comparison-table">
    <section class="responsive-enabled table" data-striping="1">
        <table class="table-wrapper wysiwyg-content" data-columns="3">
            <thead>
                <tr>
                    <th scope="col"></th>
                                                                        <th scope="col">Grade I</th>
                                                                                                <th scope="col">Grade II</th>
                                                                                                                                                                                                                                                                                                                                    </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Remove from the list</th>
                                                                        <td data-title="Grade I">
                                <a href="#" id="entity-comparison-grades-1" data-entity-comparison="grades-1" class="use-ajax remove-link" data-once="ajax">Remove</a>
                            </td>
                                                                                                <td data-title="Grade II">
                                <a href="#" id="entity-comparison-grades-2" data-entity-comparison="grades-2" class="use-ajax remove-link" data-once="ajax">Remove</a>
                            </td>
                                                                                                                                                                                                                                                                                                                                    </tr>
                                    <tr>
                        <th scope="row">General Characteristics</th>
                                                                                                                                                                <td data-title="Grade I">
                                            <div class="field__label visually-hidden">General Characteristics</div>
                                            <div class="field__item">
                                                <ul><li>Possesses foundational engineering concepts through undergraduate level education.</li><li>Acquires basic knowledge and develops basic skills through mentored experience.</li><li>Applies learned knowledge and skills to perform assigned tasks.</li><li>Performs routine technical work which does not require previous experience.</li><li>Acquires an understanding of professional and ethical responsibilities.</li><li>Acknowledges and identifies the ethical responsibilities of a civil engineer.</li></ul>
                                            </div>
                                        </td>
                                                                                                                                                                                                                                                                                                                                    <td data-title="Grade II">
                                            <div class="field__label visually-hidden">General Characteristics</div>
                                            <div class="field__item">
                                                <ul><li>Acquires fundamental knowledge and develops skills in a specific practice area through mentored experience.</li><li>Applies standard techniques, procedures, and criteria to perform assigned tasks as part of a broader assignment.</li><li>Understands and complies with <a href='https://www.asce.org/career-growth/ethics/code-of-ethics' target='_parent' rel='nofollow'>ethical codes</a>.</li></ul>
                                            </div>
                                        </td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </tr>
                                    <tr>
                        <th scope="row">Technical Responsibilities</th>
                                                                                                                                                                                                                                    <td data-title="Grade I">
                                            <div class="field__label visually-hidden">Technical Responsibilities</div>
                                            <div class="field__item">
                                                <ul><li>Collects data and gathers information or documents.</li><li>Participates in laboratory testing and field investigations.</li><li>Performs basic computations or analysis.</li><li>Assists with preparation of engineering deliverables.</li><li>Observes construction activities.</li></ul>
                                            </div>
                                        </td>
                                                                                                                                                                                                                                                                                                                                    <td data-title="Grade II">
                                            <div class="field__label visually-hidden">Technical Responsibilities</div>
                                            <div class="field__item">
                                                <ul><li>Performs basic design tasks.</li><li>Assists on tasks such as: field activities, material testing, CADD work, permit applications, and report writing.</li></ul>
                                            </div>
                                        </td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </tr>
                            </tbody>
        </table>
    </section>
</div>

Source:custom/components/comparison-table/_comparison-table.scss, line 1

Sass Functions

Functions used in custom ASCE projects.

Source:custom.scss, line 24

Color YIQ

Color contrast test using the YIQ color space. Returns the best color based on contrast.

Function

@function color-yiq($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);
  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
  @if ($yiq >= 128) {
    @return #000;
  } @else {
    @return #fff;
  }
}

Parameters:

Name	Description	Default Value
`$color`	Color value	null

Example Usage

.example {
  background-color: #005daa;
  color: color-yiq(#005daa);
}

Compiled Output

.example {
  background-color: #005daa;
  color: #fff;
}

Source:custom/helpers/functions/_color-yiq.scss, line 1

String Replace

This function will locate instances of $search within $string and replace those instances with $replace.

Function

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

Parameters:

Name	Description	Default Value
`$string`	Initial string	null
`$search`	Substring to replace	null
`$replace`	New value	""

Example Usage

$example-icon: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{$error-color}'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E"),'#','%23');

Compiled Output

$example-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");

Source:custom/helpers/functions/_str-replace.scss, line 1

Content Container

Page content not related to site navigation or global structure [sidebar, header and footer], should be placed inside of the content container. pbid

Example

Welcome to the ASCE Analytics Platform!

Please log in.

Upcoming functionality

Report - Releases Q3 2022
Chat - Releases Q4 2022

View Markup

<!-- custom/components/content-container/content-container.twig -->
<div id="content_container" class="content-container">
    <h1 id="page_title" class="h4">Welcome to the ASCE Analytics Platform!</h1>
    <div class='callout'><p>Please log in.</p><ul><li><a href='/'>Log in as Staff</a> if [insert conditions].</li><li><a href='/'>Log in as a Volunteer</a> if [insert conditions].</li></ul></div><h2 class='h6'>Upcoming functionality</h2><ul><li><strong>Report</strong> - Releases Q3 2022</li><li><strong>Chat</strong> - Releases Q4 2022</li></ul>
</div>

Source:custom/components/content-container/_content-container.scss, line 1

Gridview

Table rendered inside the .content container. pbid

Examples

Default

Goal Description	Strategic Priority	KPI
GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.	MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)	Achieve $14.5M member-ship revenue
GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.	MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)	Achieve 5% increase in number of ASCE members who are faculty
GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.	MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)	Increase umber of ASCE Members who are Faculty by 5%

.-bordered : alternative bordering

adjusts border styling

Goal Description	Strategic Priority	KPI
GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.	MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)	Achieve $14.5M member-ship revenue
GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.	MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)	Achieve 5% increase in number of ASCE members who are faculty
GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.	MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)	Increase umber of ASCE Members who are Faculty by 5%

View Markup

<!-- components/grid-view/grid-view.twig -->
<div class="gridview-wrapper">
    <table class="gridview {{modifier_class}}" rules="all" id="gviewBSAC">
        <colgroup>
            <col span="1" style="min-width:16em;"></col>
            <col span="1" style="min-width:20em;"></col>
            <col span="1" style="min-width:12em;"></col>
            <col span="1"></col>
            <col span="1"></col>
            <col span="1"></col>
            <col span="1"></col>
            <col span="1"></col>
            <col span="1"></col>
        </colgroup>
        <thead>
          <tr>
              <th scope="col">Goal Description</th>
              <th scope="col">Strategic Priority</th>
              <th scope="col">KPI</th>
              <th scope="col">Last FY End Actual</th>
              <th scope="col">Current FY End Goal Forecast</th>
              <th scope="col">Previous FYTD</th>
              <th scope="col">Current FYTD</th>
              <th scope="col">Current FY Trend</th>
              <th scope="col">Projection for Year End Goal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span id="gviewBSAC_ctl02_lbl_GoalDesc">GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.</span>
            </td>
            <td>
              <span id="gviewBSAC_ctl02_lbl_StrategicP">MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)</span>
            </td>
            <td>
              <span id="gviewBSAC_ctl02_lbl_KPI">Achieve $14.5M member-ship revenue</span>
            </td>
            <td>
              <input name="gviewBSAC$ctl02$txt_LastFYEndActual" type="text" value="138000000.00" id="gviewBSAC_ctl02_txt_LastFYEndActual" autocomplete="off">
            </td>
            <td>
              <input name="gviewBSAC$ctl02$txt_CurrentFYEndGoal" type="text" value="145000000.00" id="gviewBSAC_ctl02_txt_CurrentFYEndGoal">
            </td>
            <td>
              <input name="gviewBSAC$ctl02$txt_PrevFYTD" type="text" value="36000000.00" id="gviewBSAC_ctl02_txt_PrevFYTD">
            </td>
            <td>
              <input name="gviewBSAC$ctl02$txt_CurrentFYTD" type="text" value="0.00" id="gviewBSAC_ctl02_txt_CurrentFYTD">
            </td>
            <td>
              <input name="gviewBSAC$ctl02$txt_CurrentFYTrend" type="text" value="0.00" id="gviewBSAC_ctl02_txt_CurrentFYTrend">
            </td>
            <td>
              <input name="gviewBSAC$ctl02$txt_YEGoal" type="text" value="0.00" id="gviewBSAC_ctl02_txt_YEGoal">
            </td>
          </tr>
          <tr>
            <td>
              <span id="gviewBSAC_ctl03_lbl_GoalDesc">GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.</span>
            </td>
            <td>
              <span id="gviewBSAC_ctl03_lbl_StrategicP">MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)</span>
            </td>
            <td>
              <span id="gviewBSAC_ctl03_lbl_KPI">Achieve 5% increase in number of ASCE members who are faculty</span>
            </td>
            <td>
              <input name="gviewBSAC$ctl03$txt_LastFYEndActual" type="text" value="0.00" id="gviewBSAC_ctl03_txt_LastFYEndActual">
            </td>
            <td>
              <input name="gviewBSAC$ctl03$txt_CurrentFYEndGoal" type="text" value="0.00" id="gviewBSAC_ctl03_txt_CurrentFYEndGoal">
            </td>
            <td>
              <input name="gviewBSAC$ctl03$txt_PrevFYTD" type="text" value="0.00" id="gviewBSAC_ctl03_txt_PrevFYTD">
            </td>
            <td>
              <input name="gviewBSAC$ctl03$txt_CurrentFYTD" type="text" value="0.00" id="gviewBSAC_ctl03_txt_CurrentFYTD">
            </td>
            <td>
              <input name="gviewBSAC$ctl03$txt_CurrentFYTrend" type="text" value="0.00" id="gviewBSAC_ctl03_txt_CurrentFYTrend">
            </td>
            <td>
              <input name="gviewBSAC$ctl03$txt_YEGoal" type="text" value="0.00" id="gviewBSAC_ctl03_txt_YEGoal">
            </td>
            </tr>
            <tr>
              <td>
                <span id="gviewBSAC_ctl04_lbl_GoalDesc">GOAL 1: An ever-growing number of people in the civil engineering realm are members of, and engage in, ASCE.</span>
              </td>
              <td>
                <span id="gviewBSAC_ctl04_lbl_StrategicP">MEMBERSHIP REVENUE GROWTH: A never-growing number of people in the civil engineering realm are members of, and engage in, ASCE.(1a)</span>
              </td>
              <td>
                <span id="gviewBSAC_ctl04_lbl_KPI">Increase umber of ASCE Members who are Faculty by 5%</span>
              </td>
              <td>
                <input name="gviewBSAC$ctl04$txt_LastFYEndActual" type="text" value="0.00" id="gviewBSAC_ctl04_txt_LastFYEndActual">
              </td>
              <td>
                <input name="gviewBSAC$ctl04$txt_CurrentFYEndGoal" type="text" value="0.00" id="gviewBSAC_ctl04_txt_CurrentFYEndGoal">
              </td>
              <td>
                <input name="gviewBSAC$ctl04$txt_PrevFYTD" type="text" value="0.00" id="gviewBSAC_ctl04_txt_PrevFYTD">
              </td>
              <td>
                <input name="gviewBSAC$ctl04$txt_CurrentFYTD" type="text" value="0.00" id="gviewBSAC_ctl04_txt_CurrentFYTD">
              </td>
              <td>
                <input name="gviewBSAC$ctl04$txt_CurrentFYTrend" type="text" value="0.00" id="gviewBSAC_ctl04_txt_CurrentFYTrend">
              </td>
              <td>
                <input name="gviewBSAC$ctl04$txt_YEGoal" type="text" value="0.00" id="gviewBSAC_ctl04_txt_YEGoal">
              </td>
            </tr>
        </tbody>
    </table>
</div>

Source:custom/components/grid-view/_grid-view.scss, line 1

Platform Footer

A custom lightweight page footer. pbid

Example

View Markup

<!-- components/platform-footer/platform-footer.twig -->
<footer class="platform-footer">
    <div class="platform-footer-inner">
        <nav class="platform-footer-nav">
            <ul class="platform-footer-nav-links">
                <li><a href="https://www.asce.org"><span class="icon-home"></span>ASCE Home</a></li>
                <li class="disabled">Chat with Us
                    <button id="pop_2" class="pop" aria-describedby="tip_2">?</button>
                    <div id="tip_2" class="pop-text" role="tooltip" aria-hidden="true">This functionality will be coming soon!
                        <div id="arrow_2" class="pop-arrow" data-popper-arrow></div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="platform-footer-copyright">
            <span class="copyright">Copyright © 1996 - <span class="current-year">2022</span>, American Society of Civil Engineers</span>
        </div>
    </div>
</footer>

Source:custom/components/platform-footer/_platform-footer.scss, line 1

Platform Header

A custom platform header. pbid

Example

View Markup




<header class="platform-header">
  <div class="platform-header-inner">
    <nav class="platform-header-nav">

          <button
        class="menu-btn"
        type="button"
        data-target="#sidebar"
        aria-controls="sidebar"
        aria-expanded="false"
      >
        <span class="sidebar-toggler-icon" aria-hidden="true">☰</span>
        <span class="visually-hidden">Toggle navigation</span>
      </button>
    
      <div class="platform-header-logo">
        <a href="https://www.asce.org" title="American Society of Civil Engineers (ASCE)">
           <img src="../images/logo.svg" alt="ASCE logo" />
        </a>
      </div>

      <div class="platform-header-title eyebrow">Platform Header</div>

      <div class="platform-header-nav-wrapper">
        <ul class="platform-header-main-nav">
                                    <li class="platform-header-item disabled">
                Report

                <button
                  id="pop_1"
                  class="pop"
                  aria-describedby="tip_1"
                >?</button>

                <div
                  id="tip_1"
                  class="pop-text"
                  role="tooltip"
                  aria-hidden="true"
                >
                  This functionality will be coming soon!
                  <div
                    id="arrow_1"
                    class="pop-arrow"
                    data-popper-arrow
                  ></div>
                </div>
              </li>

                                                <li class="platform-header-item">
                <a href="/">Dashboard</a>
              </li>
                                                <li class="platform-header-item">
                <a href="/">Settings</a>
              </li>
                                                <li class="platform-header-item">
                <a href="/">Logout</a>
              </li>
                              </ul>
      </div>

    </nav>
  </div>
</header>

Source:custom/components/platform-header/_platform-header.scss, line 1

CSS Variables

A collection of variables that can be accessed anywhere ASCE custom CSS is loaded.

Example

Colors
Name	Description	Example
--primary-black	grayscale
--primary-gray-shade2	grayscale
--primary-gray-shade1	grayscale
--primary-white	grayscale
--primary-gray-tint3	grayscale
--primary-gray	grayscale
--primary-gray-tint2	grayscale
--primary-gray-tint1	grayscale
--primary-blue-shade3	blues
--primary-blue-shade2	blues
--primary-blue-shade1	blues
--primary-blue	blues
--primary-blue-tint1	blues
--primary-blue-tint2	blues
--primary-green	greens
--primary-green-shade1	greens
--secondary-green	greens
--primary-teal	teals
--primary-teal-tint1	teals
--primary-teal-tint2	teals
--primary-pink	pinks
--primary-pink-tint1	pinks
--primary-orange	oranges
--primary-orange-tint1	oranges
--primary-orange-tint2	oranges
--primary-red	reds
--secondary-red	reds

Gradients
Name	Description	Example
--blue-gradient	#253a6e, #1d5389, #146ea6, #0c85be, #059bd6
--green-gradient	#9fd64d, #75c170, #49ab95, #2297b6, #0086d2
--dark-green-gradient	#9fd64d, #44873c, #2c736e, #186299, #059bd6
--light-green-gradient	rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6)
--bg-blue-gradient	rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93)
--black-gradient	transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%, rgba(0, 0, 0, 1) 100%
--black-gradient-mobile	transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, 1) 100%

Special cases
Name	Description	Example
--font-sans-serif	font-family property value	example font-family
--body-font-size	font-size property value	example font-size
--body-line-height	line-height property value	example line-height
--body-color	color value	example body color
--body-color-rgb	rgb array	example body color rgb

View Markup

<!-- custom/cssvar/cssvar.twig -->

<table class="kss-table -caption-top">
    <caption>Colors</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
                    <tr>
                <td>--primary-black</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-black);"></td>
            </tr>
                    <tr>
                <td>--primary-gray-shade2</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-gray-shade2);"></td>
            </tr>
                    <tr>
                <td>--primary-gray-shade1</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-gray-shade1);"></td>
            </tr>
                    <tr>
                <td>--primary-white</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-white);"></td>
            </tr>
                    <tr>
                <td>--primary-gray-tint3</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-gray-tint3);"></td>
            </tr>
                    <tr>
                <td>--primary-gray</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-gray);"></td>
            </tr>
                    <tr>
                <td>--primary-gray-tint2</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-gray-tint2);"></td>
            </tr>
                    <tr>
                <td>--primary-gray-tint1</td>
                <td>grayscale</td>
                <td style="padding:.75em;background-color:var(--primary-gray-tint1);"></td>
            </tr>
                    <tr>
                <td>--primary-blue-shade3</td>
                <td>blues</td>
                <td style="padding:.75em;background-color:var(--primary-blue-shade3);"></td>
            </tr>
                    <tr>
                <td>--primary-blue-shade2</td>
                <td>blues</td>
                <td style="padding:.75em;background-color:var(--primary-blue-shade2);"></td>
            </tr>
                    <tr>
                <td>--primary-blue-shade1</td>
                <td>blues</td>
                <td style="padding:.75em;background-color:var(--primary-blue-shade1);"></td>
            </tr>
                    <tr>
                <td>--primary-blue</td>
                <td>blues</td>
                <td style="padding:.75em;background-color:var(--primary-blue);"></td>
            </tr>
                    <tr>
                <td>--primary-blue-tint1</td>
                <td>blues</td>
                <td style="padding:.75em;background-color:var(--primary-blue-tint1);"></td>
            </tr>
                    <tr>
                <td>--primary-blue-tint2</td>
                <td>blues</td>
                <td style="padding:.75em;background-color:var(--primary-blue-tint2);"></td>
            </tr>
                    <tr>
                <td>--primary-green</td>
                <td>greens</td>
                <td style="padding:.75em;background-color:var(--primary-green);"></td>
            </tr>
                    <tr>
                <td>--primary-green-shade1</td>
                <td>greens</td>
                <td style="padding:.75em;background-color:var(--primary-green-shade1);"></td>
            </tr>
                    <tr>
                <td>--secondary-green</td>
                <td>greens</td>
                <td style="padding:.75em;background-color:var(--secondary-green);"></td>
            </tr>
                    <tr>
                <td>--primary-teal</td>
                <td>teals</td>
                <td style="padding:.75em;background-color:var(--primary-teal);"></td>
            </tr>
                    <tr>
                <td>--primary-teal-tint1</td>
                <td>teals</td>
                <td style="padding:.75em;background-color:var(--primary-teal-tint1);"></td>
            </tr>
                    <tr>
                <td>--primary-teal-tint2</td>
                <td>teals</td>
                <td style="padding:.75em;background-color:var(--primary-teal-tint2);"></td>
            </tr>
                    <tr>
                <td>--primary-pink</td>
                <td>pinks</td>
                <td style="padding:.75em;background-color:var(--primary-pink);"></td>
            </tr>
                    <tr>
                <td>--primary-pink-tint1</td>
                <td>pinks</td>
                <td style="padding:.75em;background-color:var(--primary-pink-tint1);"></td>
            </tr>
                    <tr>
                <td>--primary-orange</td>
                <td>oranges</td>
                <td style="padding:.75em;background-color:var(--primary-orange);"></td>
            </tr>
                    <tr>
                <td>--primary-orange-tint1</td>
                <td>oranges</td>
                <td style="padding:.75em;background-color:var(--primary-orange-tint1);"></td>
            </tr>
                    <tr>
                <td>--primary-orange-tint2</td>
                <td>oranges</td>
                <td style="padding:.75em;background-color:var(--primary-orange-tint2);"></td>
            </tr>
                    <tr>
                <td>--primary-red</td>
                <td>reds</td>
                <td style="padding:.75em;background-color:var(--primary-red);"></td>
            </tr>
                    <tr>
                <td>--secondary-red</td>
                <td>reds</td>
                <td style="padding:.75em;background-color:var(--secondary-red);"></td>
            </tr>
            </tbody>
</table>

<table class="kss-table -caption-top">
    <caption>Gradients</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
                    <tr>
                <td>--blue-gradient</td>
                <td>#253a6e, #1d5389, #146ea6, #0c85be, #059bd6</td>
                <td style="padding:.75em 3em;background:linear-gradient(90deg,var(--blue-gradient));"></td>
            </tr>
                    <tr>
                <td>--green-gradient</td>
                <td>#9fd64d, #75c170, #49ab95, #2297b6, #0086d2</td>
                <td style="padding:.75em 3em;background:linear-gradient(90deg,var(--green-gradient));"></td>
            </tr>
                    <tr>
                <td>--dark-green-gradient</td>
                <td>#9fd64d, #44873c, #2c736e, #186299, #059bd6</td>
                <td style="padding:.75em 3em;background:linear-gradient(90deg,var(--dark-green-gradient));"></td>
            </tr>
                    <tr>
                <td>--light-green-gradient</td>
                <td>rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6)</td>
                <td style="padding:.75em 3em;background:linear-gradient(90deg,var(--light-green-gradient));"></td>
            </tr>
                    <tr>
                <td>--bg-blue-gradient</td>
                <td>rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93)</td>
                <td style="padding:.75em 3em;background:linear-gradient(90deg,var(--bg-blue-gradient));"></td>
            </tr>
                    <tr>
                <td>--black-gradient</td>
                <td>transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%, rgba(0, 0, 0, 1) 100%</td>
                <td style="padding:.75em 3em;background:linear-gradient(90deg,var(--black-gradient));"></td>
            </tr>
                    <tr>
                <td>--black-gradient-mobile</td>
                <td>transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, 1) 100%</td>
                <td style="padding:.75em 3em;background:linear-gradient(90deg,var(--black-gradient-mobile));"></td>
            </tr>
            </tbody>
</table>

<table class="kss-table -caption-top">
    <caption>Special cases</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
                    <tr>
                <td>--font-sans-serif</td>
                <td>font-family property value</td>
                <td style="font-family:var(--font-sans-serif);">example font-family</td>
            </tr>
                    <tr>
                <td>--body-font-size</td>
                <td>font-size property value</td>
                <td style="font-size:var(--body-font-size);">example font-size</td>
            </tr>
                    <tr>
                <td>--body-line-height</td>
                <td>line-height property value</td>
                <td style="line-height:var(--body-line-height);">example line-height</td>
            </tr>
                    <tr>
                <td>--body-color</td>
                <td>color value</td>
                <td style="color:var(--body-color);">example body color</td>
            </tr>
                    <tr>
                <td>--body-color-rgb</td>
                <td>rgb array</td>
                <td style="color:rgb(var(--body-color-rgb));">example body color rgb</td>
            </tr>
            </tbody>
</table>

Source:custom/components/cssvar/_cssvar.scss, line 6