thejimbirch

core: 8.x
type: theme
base theme: stable

name: 'Theme Name'
description: 'Theme Name is a custom theme based on Stable (not theme)'

regions:
  page_top: 'Page Top'
  page_bottom: 'Page Bottom'

thejimbirch

{% if page.header %}
<nav class="navbar">
  <div class="container-fluid">{{ page.header }}</div>
</nav>
{% endif %}

thejimbirch

<div id="navbar" class="collapse navbar-collapse">
 {{ content }}
</div>

thejimbirch

{% block content %}
  {% if site_logo %}
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      Menu
    </button>
    <a class="navbar-brand" href="{{ path('<front>') }}" title="{{ site_name }}" rel="home">
      <img src="{{ site_logo }}" alt="{{ site_name }}" />
    </a>

thejimbirch

global-styling:
  version: 1.x
  css:
    base:
      css/bootstrap.css: {}
  js:
    js/bootstrap.js: {}
  dependencies:
    - core/jquery

thejimbirch

<div class="element element--layout-columns">
  {{ content }}
</div>

thejimbirch

/* -------------------------------------------------------------------------- */
/* Base Paragraph Styling.  This is the BEM Block */
/* -------------------------------------------------------------------------- */

.element {
  padding-top: @jumbotron-padding;
  .make-sm-column(10);
  .make-sm-column-offset(1);
  .make-md-column(8);
  .make-md-column-offset(2);

thejimbirch

{#
/**
 * @file
 * Theme override for a select element.
 *
 * Available variables:
 * - attributes: HTML attributes for the select tag.
 * - options: The option element children.
 *
 * @see template_preprocess_select()

thejimbirch

/* -------------------------------------------------------------------------- */
/* Extends:                                                                   */
/* https://gist.github.com/thejimbirch/5b6b9ceb6e597a48f330e02edd8bcb49       */                                                */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Here we add Width Modifiers                                                */
/* -------------------------------------------------------------------------- */

/* Adds Width Element -- Medium */

thejimbirch

{# Specify that we want to hide the content so we can print our fields individually #}
{{ content|without('field_sl','field_sli', 'field_wi', 'field_bg') }}
{# In the normal Boostrap carousel markup, we add our conditional fields as classes: #}
{# If Width field (field_wi) has value, add the class #}
{# If Background Color field (field_bg) has value, add the class #}
{# If Slide Interval field (field_sli) has value, add the data interval #}
{# We also add the Paragraph's id as the carousel id so we can allow multiple carousel on one page. (paragraph.id.value)" #}
<div class="element element--layout-slideshow carousel slide{% if content.field_wi %} {{content.field_wi}}{% endif %}{% if content.field_bg %} {{content.field_bg}}{% endif %}" id="myCarousel-{{ paragraph.id.value }}" data-ride="carousel"{% if content.field_sli %} data-interval="{{content.field_sli}}"{% endif %}>
  {# For the carousel indicators, we loop through the slide field #}
  {# We use Twig loop.first to set the active class, and the key to set