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

<!-- 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 -->
{% set component = messages %}
<div class="status-messages">
    {% if component.items|length > 0 %}
        <div class="messages__wrapper">
            {% for item in component.items %}
                <div class="messages{% if item.type %} messages--{{item.type}}{% endif %}" role="{% if item.type == 'status' %}status{% else %}alert{% endif %}" aria-label="{{item.type}} message">
                    {{item.content}}
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div data-drupal-messages-fallback="" class="hidden"></div>
    {% endif %}
</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 -->
{% set component = comparison_table %}
<div class="comparison-table">
    <h2 class="comparison-table-title h5">{{component.title}}</h2>
    <header>
      <p class="-center">{{component.instructions}}</p>
    </header>
    <form class="comparison-table-menu">
        <div class="comparison-table-menu-inner">
            <ul class="comparison-table-menu-list">
                {% for item in component.items %}
                    <li class="comparison-table-menu-list-item">{{item.menu.name}}
                        {% if item.menu.status %}
                            <a href="{{item.menu.url}}" class="remove-link">Remove</a>
                        {% else %}
                            <a href="{{item.menu.url}}" class="add-link">View</a>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </form>
    {% include '../messages/messages.twig' with { messages: component.messages } %}
</div>
<div id="comparison-table">
    <section class="responsive-enabled table" data-striping="1">
        <table class="table-wrapper wysiwyg-content" data-columns="{{component.columns}}">
            <thead>
                <tr>
                    <th scope="col"></th>
                    {% for item in component.items %}
                        {% if item.menu.status %}
                            <th scope="col">{{item.menu.name}}</th>
                        {% endif %}
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Remove from the list</th>
                    {% for item in component.items %}
                        {% if item.menu.status %}
                            <td data-title="{{item.menu.name}}">
                                <a href="#" id="{{item.id}}" data-entity-comparison="{{item.entity}}" class="use-ajax {% if item.menu.status %}remove-link{% else %}add-link{% endif %}" data-once="ajax">{% if item.menu.status %}Remove{% else %}View{% endif %}</a>
                            </td>
                        {% endif %}
                    {% endfor %}
                </tr>
                {% for cat in component.categories %}
                    <tr>
                        <th scope="row">{{cat.name}}</th>
                        {% for item in component.items %}
                            {% if item.menu.status %}
                                {% for chunk in item.data %}
                                    {% if chunk.category == cat.place %}
                                        <td data-title="{{item.menu.name}}">
                                            <div class="field__label visually-hidden">{{cat.name}}</div>
                                            <div class="field__item">
                                                {{ chunk.content }}
                                            </div>
                                        </td>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
            </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.

Log in as Staff if [insert conditions].
Log in as a Volunteer if [insert conditions].

Upcoming functionality

Report - Releases Q3 2022
Chat - Releases Q4 2022

View Markup

<!-- custom/components/content-container/content-container.twig -->
{% set component = content_container %}
<div id="content_container" class="content-container{% if modifier_class %} {{ modifier_class }}{% endif %}">
    <h1 id="page_title" class="h4">{{ component.title }}</h1>
    {{ component.content|raw }}
</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

{# custom/pbid/components/platform-header/platform-header.twig #}

{% set component = platform_header %}

<header class="platform-header{% if not component.sidebar %} -sans-sidebar{% endif %}">
  <div class="platform-header-inner">
    <nav class="platform-header-nav">

    {% if component.sidebar %}
      <button
        class="menu-btn{% if component.expanded %} -expanded{% endif %}"
        type="button"
        data-target="#sidebar"
        aria-controls="sidebar"
        aria-expanded="{% if component.expanded %}true{% else %}false{% endif %}"
      >
        <span class="sidebar-toggler-icon" aria-hidden="true">☰</span>
        <span class="visually-hidden">Toggle navigation</span>
      </button>
    {% endif %}

      <div class="platform-header-logo">
        <a href="{{ component.logo.href }}" title="{{ component.logo.title }}">
           <img src="{{ component.logo.src }}" alt="{{ component.logo.alt }}" />
        </a>
      </div>

      <div class="platform-header-title eyebrow">{{ component.title }}</div>

      <div class="platform-header-nav-wrapper">
        <ul class="platform-header-main-nav">
          {% for item in component.main_nav %}
            {% if item.type == 'disabled_with_popover' %}
              <li class="platform-header-item disabled">
                {{ item.label }}

                <button
                  id="{{ item.popover.button_id }}"
                  class="pop"
                  aria-describedby="{{ item.popover.tooltip_id }}"
                >?</button>

                <div
                  id="{{ item.popover.tooltip_id }}"
                  class="pop-text"
                  role="tooltip"
                  aria-hidden="true"
                >
                  {{ item.popover.text }}
                  <div
                    id="{{ item.popover.arrow_id }}"
                    class="pop-arrow"
                    data-popper-arrow
                  ></div>
                </div>
              </li>

            {% elseif item.type == 'link' %}
              <li class="platform-header-item">
                <a href="{{ item.href }}">{{ item.label }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </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 -->
{% set data = cssvar %}

<table class="kss-table -caption-top">
    <caption>Colors</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
        {% for color in data.colors %}
            <tr>
                <td>{{color.name}}</td>
                <td>{% if color.description %}{{color.description}}{% endif %}</td>
                <td style="padding:.75em;background-color:var({{color.name}});"></td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<table class="kss-table -caption-top">
    <caption>Gradients</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
        {% for gradient in data.gradients %}
            <tr>
                <td>{{gradient.name}}</td>
                <td>{% if gradient.description %}{{gradient.description}}{% endif %}</td>
                <td style="padding:.75em 3em;background:linear-gradient({{gradient.angle}},var({{gradient.name}}));"></td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<table class="kss-table -caption-top">
    <caption>Special cases</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
        {% for item in data.special %}
            <tr>
                <td>{{item.name}}</td>
                <td>{% if item.description %}{{item.description}}{% endif %}</td>
                <td style="{{item.format}}">{% if item.content %}{{item.content}}{% endif %}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

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