Custom

Styles used in custom ASCE projects.

Source:custom/custom.scss, line 16

ASCE Loader

A loading animation.

Note: The inline style style="position:relative", present in the markup, is for style guide demonstration purposes and should not be included.

.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 {{modifier_class}}" style="position:relative;">
  <div class="asce-loader-text">Loading content...<br>We appreciate your patience</div>
</div>

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

Web Apps

Styles used in custom ASCE web application projects.

Source:custom/custom.scss, line 37

Messages

Status, warning, and error messages.

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/webapps/messages/_messages.scss, line 1

Comparison

Comparison tool with a responsive table display.

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/comparison.twig -->
{% set component = comparison %}
<div class="comparison">
    <h2 class="comparison-title h5">{{component.title}}</h2>
    <header>
      <p class="-center">{{component.instructions}}</p>
    </header>
    <form class="comparison-menu">
        <div class="comparison-menu-inner">
            <ul class="comparison-menu-list">
                {% for item in component.items %}
                    <li class="comparison-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/webapps/comparison/_comparison.scss, line 1

PBID

Styles used in the ASCE Power Business Intelligence Dashboard.

Source:custom/custom.scss, line 48

Settings

PBID settings.

Parameters:

Name	Description	Default Value
`$body-bg`	background color used for body	primary-color(white)
`$body-color`	color used for body	primary-color(black)
`$header-color`	color used for headings	primary-color(black)
`$link-color`	color used for links	primary-color(blue)
`$hr-color`	color used for rules and borders	primary-color(gray)
`$constrain-text`	max width constraint value for text	34em
`$border-radius`	border radius	3px
`$sidebar-width`	width of sidebar component when expanded/visible	250px
`$sidebar-padding-top`	top padding applied to sidebar component	24px
`$hh`	approximate adjustment for sidebar component	117px
`$hf`	approximate adjustment for sidebar component	137px
`$sidebar-padding-bottom`	bottom padding applied to sidebar component	$hh + $hf

Source:custom/pbid/_settings.scss, line 30

Animations

Animation keyframes used in the PBID project.

Source:custom/pbid/_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/pbid/_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/pbid/_animations.scss, line 28

Tooltips

PBID uses Popper.js tooltip and popover positioning engine https://popper.js.org/.

Examples

Default

a tooltip

data-show : reveals tip text

shows the pop text content

a tooltip

View Markup

<!-- vendors/popper/popper.twig -->
<p>a tooltip 
    <button id="pop_1" class="pop" aria-describedby="tip_1">?</button>
    <div id="tip_1" class="pop-text" role="tooltip" {{modifier_class}}>This functionality will be coming soon!
        <div id="arrow_1" class="pop-arrow" data-popper-arrow></div>
    </div>
</p>

Source:custom/pbid/vendors/popper/_popper.scss, line 8

Components

Components used in the PBID project.

Source:custom/pbid/_pbid.scss, line 11

Content Container

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

Examples

Default

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

.-sidebar-expanded : sidebar is expanded

sets margin left property to account for an expanded sidebar

View Markup

<!--components/content-container/content-container.twig-->
<div id="content_container" class="content-container {{modifier_class}}">
    <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/pbid/components/content-container/_content-container.scss, line 1

Gridview

Table rendered inside the content container.

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/pbid/components/grid-view/_grid-view.scss, line 1

Platform Footer

The page footer.

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">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/pbid/components/platform-footer/_platform-footer.scss, line 1

Platform Header

The page header.

Examples

Default

.-expanded : expanded sidebar

applied to the menu button

View Markup

<!-- components/platform-header/platform-header.twig -->
<header class="platform-header">
    <div class="platform-header-inner">
        <nav class="platform-header-nav">
            <button class="menu-btn {{modifier_class}}" type="button">
                <span class="sidebar-toggler-icon">☰</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">ASCE Analytics</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">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="/">Logout</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</header>

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

Sidebar

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

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.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/pbid/components/sidebar/_sidebar.scss, line 1

Sidebar Elements

Sidebar specific elements and states.

Example

View Markup

<!-- components/sidebar/sidebar-elements.twig -->
<aside style="width:300px;height:100%;background:linear-gradient(180deg, var(--blue-gradient));color:var(--primary-white);>
    <nav style="margin:none;">
        <ul class="sidebar-menu">
            <!-- top level -->
            <li class="sidebar-menu-item">
                <h4><a href="/">Menu link</a></h4>
            </li>
            <li class="sidebar-menu-item active">
                <h4><a href="/">Active menu link</a></h4>
            </li>
            <li class="sidebar-menu-item">
                <h4><a href="/" disabled>Disabled menu link</a></h4>
            </li>
            <li class="sidebar-menu-item -home">
                <h4><a href="/"><i class="icon-home"></i>Home menu link</a></h4>
            </li>
            <li class="sidebar-menu-item -home active">
                <h4><a href="/" aria-current="page"><i class="icon-home"></i>Active home menu link</a></h4>
            </li>
            <li class="sidebar-menu-item -home">
                <h4><a href="/" disabled><i class="icon-home"></i>Disabled home menu link</a></h4>
            </li>
            <!-- second level -->
            <li id="sbmi_expanded" class="sidebar-menu-item">
                <h4><a href="/" role="button" data-toggle="dropdown" aria-expanded="true">Expanded menu link</a></h4>
                <ul class="sidebar-menu-item-list" aria-labelledby="sbmi_expanded">
                    <li><a id="" href="/">Example link</a></li>
                    <li><a id="" href="/" aria-current="page">Example active link</a></li>
                    <li><a id="" href="/" disabled>Example disabled link</a></li>
                    <li>Example text</li>
                    <li><hr class="-divider"></li>
                    <li>Example divider above</li>
                </ul>
            </li>
            <li id="sbmi_collapsed" class="sidebar-menu-item">
                <h4><a href="/" role="button" data-toggle="dropdown" aria-expanded="false">Collapsed menu link</a></h4>
                <ul class="sidebar-menu-item-list d-none" aria-labelledby="sbmi_collapsed">
                    <li>Example text</li>
                    <li><a id="" href="/">Example link</a></li>
                </ul>
            </li>
            <li id="sbmi_collapsed_disabled" class="sidebar-menu-item">
                <h4><a href="/" role="button" data-toggle="dropdown" aria-expanded="false" disabled>Disabled collapsed menu link</a></h4>
                <ul class="sidebar-menu-item-list d-none" aria-labelledby="sbmi_collapsed_disabled">
                    <li>Example text</li>
                    <li><a id="" href="/">Example link</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</aside>

Source:custom/pbid/components/sidebar/_sidebar.scss, line 197

Page example

Example PBID page.

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

<!-- page/page.twig -->
<body>
    <div class="page-container">
        {% include '../components/platform-header/platform-header-expanded.twig' %}
        <main id="maincontent" aria-label="Page Content">
            <div class="grid-container" style="display:flex;width:100%;">
                {% include '../components/sidebar/sidebar.twig' %}
                {% include '../components/content-container/content-container-expanded.twig' %}
            </div>
        </main>
        {% include '../components/platform-footer/platform-footer.twig' %}
    </div>
</body>

Source:custom/pbid/_pbid.scss, line 26

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/root/root.twig -->
{% set component = root %}
<table class="kss-table -caption-top">
    <caption>Colors</caption>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
        {% for color in component.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 component.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 component.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/root/_root.scss, line 1

Sass Functions

Functions used in custom ASCE projects.

Source:custom/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