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"
%}

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"
%}

See the collections page for information.

Collections

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" %}

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

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

Example

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

{% include text-field-row.html
    variant="textarea"
    type="textarea"
    required=""
    width="100%"
    height="300px"
    name="Long Announcement A"
    label="Announcement 1 for Email/Website"
%}

PreviousCollections NextContent Strips

Last updated 6 years ago

Was this helpful?

Includes

What are includes?

Library of includes for Troop website

File downloads list

Include

Usage

Generated Example

Events page card

Include

Usage

Example

Home page carousel card

Include

Usage

Example

Side navigation item (generated from collection)

Side navigation link

Include

Usage

Example

Top navigation item

Field items

Include

Usage

Example