Creating dynamic layouts with Jekyll

Colour-scheme.mustache

<style>
	.hero {
		background-color: {{ page.style.color.primary }};
		color:{{ page.hero.color }};
		background-image: url({{ site.assets.imgPath }}{{ page.hero.bg }}?w=500&{{ site.assets.params }});
	}

	.hero-title {
		color: {{ page.hero.color }};
	}

	.hero-link {
		color: {{ page.hero.color }};
	}

	.section--quote {
		background-color: {{ page.style.color.primary }};
		color: {{ page.style.color.text }};
	}
</style>

for-loop.mustache

{% for item in page.partials %}
  {% include {{item.name}}.html spaced=item.spaced padded=item.padded src=item.src slashcolor=item.slashcolor direction=item.direction title=item.title body=item.body title2=item.title2 body2=item.body2 link=item.link href=item.href link2=item.link2 href2=item.href2 gutter=item.gutter stack=item.stack poster=item.poster content=item.content bgcolor=item.bgcolor bgimg=item.bgimg color=item.color columnwidth=item.columnwidth centred=item.centred cite=item.cite attribute=item.attribute id=item.id size=item.size contained=item.contained %}
{% endfor %}

front-matter.yml

# ----------------------- #
# Styling & Colour scheme #
# ----------------------- #
style:
  color:
    primary: "#db030f"
    secondary: "#000"
    text: "#fff"

# Hero area information
hero:
  type: "1"
  bg: "work/canon-unleashprint/hero.jpg"
  overlay: "work/canon-unleashprint/hero-overlay.png"
  color: "#fff"

relatedProject: unilever-lynx-bigger-issues

# ------------- #
# Intro content #
# ------------- #
intro:
  title: "Showing print professionals how to unleash the power of print with Canon."
  body: >
    Canon's commercial print audience is incredibly diverse, ranging from small high street shops to big commercial outfits. With drupa, the largest print event in Europe, just around the corner, we needed a single, striking creative idea that would resonate with them all - encouraging print professionals around the world to choose Canon and discover new print opportunities.

# ------------ #
# Main content #
# ------------ #
partials:
 - name: section-video
   id: 183025668
   spaced: true
 - name: section
   title: A wide-ranging audience. One unifying idea.
   body: |
     Capturing the attention of all who saw it, #UNLEASHPRINT struck a positive chord with our audience. Its compelling message provided a great platform for us to produce inspiring social content, quirky product demos, thought-provoking headlines, surprising DM and more.
   spaced: "true"
 - name: section-carousel
   src:
    - "work/canon-unleashprint/carousel01.jpg"
    - "work/canon-unleashprint/carousel02.jpg"
    - "work/canon-unleashprint/carousel03.jpg"
    - "work/canon-unleashprint/carousel04.jpg"
    - "work/canon-unleashprint/carousel05.jpg"
   padded: "true"
 - name: section
   title: Less product. More possibilities.
   body: |
     Instead of pushing a particular product, we focused on user-benefits, demonstrating how everyone could #UNLEASHPRINT. From laptops to table tops, we showed our audience endless print possibilities - and encouraged them to get involved too.
   spaced: "true"
 - name: section-video
   id: 168222866
   poster: "work/canon-unleashprint/video_cover.jpg"
 - name: section
   title: Consideration and profitability. Up and up.
   body: |
     On-stand sales at drupa went up 30% compared to previous years. The hero product launch hit its sales target by day three of the 10-day event. And during the event, #UNLEASHPRINT was used three times more than the hashtag of any other competitor.
   gutter: true
   spaced: "true"
 - name: section-img
   src: "work/canon-unleashprint/logo-blurry.jpg"
 - name: quote--lrg
   body: |
     We set out to give visitors fresh ideas about how they could expand their capabilities and to inspire them to unleash print in their own individual ways. We've surpassed that objective on every level.
   cite: "Jeppe Frandsen"
   attribute: "Executive Vice President of Industrial & Production Solutions Canon Europe"
   padded: true
 - name: section-scroll
   src: "work/canon-unleashprint/scroll.jpg"
   padded: true

image-module.html

<section class="section section--img{%if include.spaced %} section--spaced{% endif %}{%if include.padded %} section--padded{% endif %}{%if include.classes %} {{ include.classes }}{% endif %}"{%if include.attrs %} {{ include.attrs }}{% endif %}>
	{% if include.contained %}
		<div class="l-container{% if include.contained == "wide" %} l-container--wide{% endif %}">
	{% endif %}
	<img class="lazyload"
		src="{{ site.assets.imgPath }}{{include.src}}?w=500&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %}"
		data-sizes="auto"
		data-srcset="{{ site.assets.imgPath }}{{include.src}}?w=500&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 500w,
		{{ site.assets.imgPath }}{{include.src}}?w=750&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 750w,
		{{ site.assets.imgPath }}{{include.src}}?w=1000&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 1000w,
		{{ site.assets.imgPath }}{{include.src}}?{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 1800w"
		alt="{{ include.title }}">
	{% if include.contained %}
		</div>
	{% endif %}
</section>

section-module.mustache

<section class="section{%if include.spaced %} section--spaced{% endif %}{%if include.padded %} section--padded{% endif %}{%if include.classes %} {{ include.classes }}{% endif %}{%if include.centred %} section--centred{% endif %}" style="{%if include.color %}color: {{ include.color }};{% endif %}{%if include.bgcolor %}background-color: {{ include.bgcolor }};{% endif %}">
	<div class="l-container{%if include.size %}  l-container--{{ include.size }}{% endif %}">
		{% if include.title %}
			<h3 class="h3">{{ include.title }}</h3>
		{% endif%}
		{{ include.body | markdownify }}
		{% if include.link %}
			<a href="{{ include.href }}" rel="external">{{ include.link }}</a>
		{% endif %}
	</div>
</section>