Includes

What are includes?

Includes are snippets of HTML that are used repeatedly across the website.

Since they can take variables, includes are excellent for snippits of HTML that should be consistently styles across the website while still having slightly different content.

Troop 370 uses multiple includes for the website, which enables easier editing of repeatable content.

Library of includes for Troop website

File downloads list

Use this include when listing files for download. This include allows you to display the file name, last edited date, file type, and file size.

Include

_includes/docs-table.html

{% if include.part == 'header' %}
<tr class="tmd-table-header_row">
  <th class="th-name">File name</th>
  <th class="th-date">Last updated</th>
  <th class="th-type">Type</th>
  <th class="th-size">Size</th>
</tr>
{% else %}{% endif %}

{% if include.part == 'row' %}
<tr class="tmd-table-row" onclick="window.location='{{ include.link }}'">
  <td>{{ include.name }}</td>
  <td>{{ include.date }}</td>
  <td>{{ include.type }}</td>
  <td>{{ include.size }}</td>
</tr>
{% else %}{% endif %}

Usage

<div class="tmd-table-wrapper">
    <table class="tmd-table">
        {% include docs-table.html part="header" %}
        {% include docs-table.html
            part="row"
            link=""
            name=""
            date=""
            type=""
            size=""
        %}
    </table>
</div>

For each table, only include part="header" once.

part="row" is included once for each file.

Variable	Value
part	predefined: header, row
link	any URL
name	name of the file
date	last modified date of the file
type	file type (e.g. DOCX)
size	file size in MB or KB; size should not include more than six characters

Generated Example

Events page card

Creates a card for the sub-pages of/events/hub.html.

Include

_includes/event-card.html

<a href="{{ include.card-href }}" class="event-card-a">
  <div class="mdc-card event-card mdc-ripple-surface">
    <div class="event-card-image" style="background-image:url('{{ include.background-image }}')"></div>
    <div class="event-card-content">
      <h2>{{ include.card-title }}</h2>
      <p>{{ include.card-subtitle }}</p>
    </div>
  </div>
</a>

Usage

{% include main-carousel-card.html
    card-title=""
    card-subtitle=""
    card-href=""
    background-image=""
%}

Variable	Value
card-title	large title
card-subtitle	smaller subtitle text
card-href	URL to page when card is clicked
background-image	URL to card background image

Example

{% include event-card.html
    card-title="Camping Schedule"
    card-subtitle="View the schedule, theme, and location for Troop 370's monthly campouts."
    card-href="/events/campouts.html"
    background-image="/src/carousel-images/generic camping - tent with light.jpg"
%}

Generated card

Home page carousel card

Creates a carousel card for the main carousel on index.html. It should only be used as a child of div.main-carousel.

Include

_includes/main-carousel-card.html

<div class="carousel-cell" style="background-image:url('{{ include.background-image }}');">
  <div class="carousel-text-card ripple-dark-bg ripple-mobile">
    <div>
      <h2 class="carousel-title">{{ include.card-title }}</h2>
      <p class="carousel-info">{{ include.card-subtitle }}</p>
      <a href="{{ include.card-href }}" class="mdc-button standard-light-button mdc-button--outlined">{{ include.button-text }}</a>
    </div>
  </div>
</div>

Usage

{% include main-carousel-card.html
    card-title=""
    card-subtitle=""
    card-href=""
    button-text=""
    background-image=""
%}

Variable	Value
card-title	large title
card-subtitle	smaller subtitle text
card-href	URL to page when card button is clicked
button-text	text for card button
background-image	URL to card background image

Example

{% include main-carousel-card.html
    card-title="High Adventure"
    card-subtitle="2020"
    card-href="camps-adventure.html"
    button-text="View list"
    background-image="/src/carousel-images/scout shadow on top of mountain with sunset.jpg"
%}

Generated card

Side navigation item (generated from collection)

See the collections page for information.

Collections

Side navigation link

Include

_includes/sidenav-link.html

<li><a href="{{ include.url }}" class="sidenav-close" id="{{ include.id }}" onclick="{{ include.onclick }}">{{ include.name }}</a></li>

Usage

{% include sidenav-link.html url="" name="" %}

Variable	Value
name	name of page
url	URL to page

Example

{% include sidenav-link.html url="https://github.com/troop-370/troop370" name="Source Code" %}

Generated link

Top navigation item

See the collections page for information.

Collections

Field items

Creates text fields, text areas, checkboxes, and radio inputs.

Include

_includes/text-field-row.html

{% if include.variant == 'textarea' %}
<div class="text-field-row text-field-row-fullwidth">
  <div class="text-field-container">
    <div class="mdc-text-field text-field mdc-text-field--fullwidth mdc-text-field--textarea">
      <textarea id="text-field-fullwidth-textarea-helper" rows="{{ include.rows }}" maxlength="{{ include.maxlength }}" class="mdc-text-field__input" name="{{ include.name }}" {% if include.required == 'yes' %} required {% else %} {% endif %}></textarea>
      <div class="mdc-notched-outline mdc-notched-outline--upgraded">
        <div class="mdc-notched-outline__leading"></div>
        <div class="mdc-notched-outline__notch" style="">
          <label class="mdc-floating-label" for="text-field-fullwidth-textarea-helper" style="">{{ include.label }}</label>
        </div>
        <div class="mdc-notched-outline__trailing"></div>
      </div>
    </div>
  </div>
</div>
{% else %} {% endif %}

{% if include.variant == 'field-input' %}
<div class="mdc-text-field mdc-text-field--outlined" style="width:{{ include.width }};height:{{ include.height }};">
  <input type="{{ include.type }}" name="{{ include.name }}" {% if include.required == 'yes' %} required {% else %} {% endif %} class="mdc-text-field__input">
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <label class="mdc-floating-label">{{ include.label }}</label>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</div>
{% else %} {% endif %}

{% if include.variant == 'checkbox-input' %}
<div class="mdc-form-field" id="{{ include.name }}_div">
  <div class="mdc-checkbox">
    <input type="{{ include.type }}" name="{{ include.name }}" class="mdc-checkbox__native-control" id="{{ include.name }}"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
  </div>
  <label for="{{ include.name }}">{{ include.label }}</label>
</div>
<br>
{% else %} {% endif %}

{% if include.variant == 'radio-input' %}
<div class="mdc-form-field" id="{{ include.name }}_div">
  <div class="mdc-radio">
    <input class="mdc-radio__native-control" type="{{ include.type }}" id="{{ include.name }}" name="radios" checked>
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
  </div>
  <label for="{{ include.name }}">{{ include.label }}</label>
</div>
<br>
{% else %} {% endif %}

Usage

Field Input (single row text box)

{% include text-field-row.html
    variant="field-input"
    type="text"
    required=""
    width="100%"
    name=""
    label=""
 %}

Text Area (multiple row text box)

Check Box

Example

Field Input (single row text box)

{% include text-field-row.html
    variant="field-input"
    type="text"
    required="yes"
    width="100%"
    name="First_Name"
    label="First name"
 %}

Text Area (multiple row text box)

Check Box