index.twig

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>

  <meta charset="utf-8">
  <title> {{options.title}}</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.0.0/css/vex.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.0.0/css/vex-theme-plain.min.css">
  <link rel="stylesheet" href="kss-assets/kss.css">

  {{ styles|raw }}

  <!-- script inclusion configurable through kss-config.json -->
  {% for script in config.scripts.header %}
  <script src="{{script}}"></script>
  {% endfor %}

  <!-- style inclusion configurable through kss-config.json -->
  {% for style in config.styles.header %}
  <link rel="stylesheet" href="{{style}}">
  {% endfor %}

</head>

<body id="kss-node" {% if template.isItem %}class="kss-fullscreen-mode"{% endif %}>

<main role="main" class="kss-main">

    {% if homepage %}
      <section id="kssref-0" class="kss-overview">
        {{ homepage|raw }}
      </section>
    {% else %}
      {% for section in sections %}
        {% if section.depth == 1 %}
          {% include "@builderTwig/components/molecules/page_header.twig" %}
          {% if "color-swatches" in section.reference %}
            {% include "@builderTwig/components/molecules/color_grid.twig" with section only %}
          {% endif %}

        {% else %}
          {% include "@builderTwig/components/molecules/section.twig" %}
        {% endif %}
      {% endfor %}
    {% endif %}

  {% include "@builderTwig/components/atoms/sidebar_toggle.twig" %}
  {% include "@builderTwig/components/organisms/sidebar.twig" %}

</main>

<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.0.0/js/vex.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="kss-assets/kstat-kss.js"></script>

<!-- script inclusion configurable through kss-config.json -->
{% for script in config.scripts.footer %}
<script src="{{script}}"></script>
{% endfor %}

<script>
  var spy = new ScrollSpy('#kss-node', {
    nav: '.kss-nav__menu-item.active .kss-nav__menu-child > li > a',
    className: 'is-in-viewport'
  });
  var kssFullScreen = new KssFullScreen({
    idPrefix: 'kss-fullscreen-',
    bodyClass: 'kss-fullscreen-mode',
    elementClass: 'is-fullscreen'
  });
  var kssGuides = new KssGuides({
    bodyClass: 'kss-guides-mode'
  });
  var kssMarkup = new KssMarkup({
    bodyClass: 'kss-markup-mode',
    detailsClass: 'kss-markup'
  });
</script>
{{ scripts|raw }}

{# This will only be included in the demo page. #}
{% if options.demo %}
  <footer class="kss-github">
    <!-- https://github.com/blog/273-github-ribbons -->
    <a href="https://github.com/kss-node/kss-node"><img src="kss-assets/github-fork--black.png" alt="Fork me on GitHub"></a>
  </footer>
{% endif %}

<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>