mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Compare commits
6 Commits
6cef7be291
...
171aa29a12
| Author | SHA1 | Date | |
|---|---|---|---|
|
171aa29a12 | ||
|
|
375b54150e | ||
|
|
0a4da30696 | ||
|
|
ec55037dfe | ||
|
|
795be38edb | ||
|
|
f52d2bc61e |
@@ -1,3 +1,5 @@
|
||||
<footer>
|
||||
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
|
||||
<footer class="o-container">
|
||||
<p>Made by Locomotive<br>
|
||||
<a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">Github</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<header>
|
||||
<a href="/"><h1>Locomotive Boilerplate</h1></a>
|
||||
<header class="o-container">
|
||||
<h1><a href="/">Locomotive Boilerplate</a></h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/images">Images</a></li>
|
||||
<li><a href="/form" data-load="customTransition">Form</a></li>
|
||||
<li><a href="/grid">Grid</a></li>
|
||||
<li><a href="/form" data-load="customTransition">Form</a></li>
|
||||
<li><a href="/wysiwyg">Wysiwyg</a></li>
|
||||
<li><a href="/projects">Projects</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
51
views/snippets/button.twig
Normal file
51
views/snippets/button.twig
Normal file
@@ -0,0 +1,51 @@
|
||||
{# --- Parameters ------------------------- #}
|
||||
|
||||
{% set _tag = tag | default('button') %}
|
||||
{% set _href = href | default(null) %}
|
||||
{% set _external = external ?? false %}
|
||||
{% set _classes = classes | default(null) %}
|
||||
{% set _modifiers = modifiers | default(null) %}
|
||||
{% set _label = label | default(null) %}
|
||||
{% set _icon = icon | default(null) %}
|
||||
{% set _attr = attr | default(null) %}
|
||||
|
||||
{# --- Computed --------------------------- #}
|
||||
|
||||
{% if _href != null %}
|
||||
{% set _tag = 'a' %}
|
||||
{% elseif _tag == 'a' %}
|
||||
{% set _tag = 'span' %}
|
||||
{% endif %}
|
||||
|
||||
{% if _classes != null %}
|
||||
{% set _classes = ' ' ~ _classes %}
|
||||
{% endif %}
|
||||
|
||||
{% if _modifiers != null %}
|
||||
{% set _classes = ' ' ~ _modifiers ~ ' ' ~ _classes %}
|
||||
{% endif %}
|
||||
|
||||
{# ---------------------------------------- #}
|
||||
|
||||
<{{ _tag }}
|
||||
class="c-button{{ _classes }}"
|
||||
{% if _href %}href="{{ _href }}"{% endif %}
|
||||
{% if _external %}target="_blank" rel="noopener noreferrer" data-load="false"{% endif %}
|
||||
{% if _attr %}{{ _attr | raw }}{% endif %}
|
||||
>
|
||||
{% block inner %}
|
||||
<span class="c-button_inner">
|
||||
{% if _label %}
|
||||
<span class="c-button_label">
|
||||
{{ _label }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if _icon %}
|
||||
{% include "@snippets/icon.twig" with {
|
||||
icon: _icon,
|
||||
classes: 'c-button_icon',
|
||||
} only %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endblock %}
|
||||
</{{ _tag }}>
|
||||
15
views/snippets/icon.twig
Normal file
15
views/snippets/icon.twig
Normal file
@@ -0,0 +1,15 @@
|
||||
{# --- Parameters ------------------------- #}
|
||||
|
||||
{% set _icon = icon %}
|
||||
{% set _classes = classes | default(null) %}
|
||||
{% set _modifiers = modifiers | default(null) %}
|
||||
|
||||
{# ---------------------------------------- #}
|
||||
|
||||
{% if _icon %}
|
||||
<span class="o-icon {{ _classes }} {{ _modifiers }}">
|
||||
<svg class="svg-{{ _icon }}" focusable="false" aria-hidden="true">
|
||||
<use xlink:href="#{{ _icon }}"></use>
|
||||
</svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
95
views/snippets/image.twig
Normal file
95
views/snippets/image.twig
Normal file
@@ -0,0 +1,95 @@
|
||||
{#
|
||||
Image snippet
|
||||
|
||||
The `img` parameter was made to receive formatted data from a CMS.
|
||||
The use case would be to output an image without overriding is dimensions or other properties.
|
||||
|
||||
It needs to be an object with the following keys :
|
||||
-src: String,
|
||||
-width: Int,
|
||||
-height: Int,
|
||||
-alt?: String,
|
||||
-caption?: String
|
||||
|
||||
```twig
|
||||
{% include '@snippets/image.twig' with
|
||||
img: project.featured_image
|
||||
%}
|
||||
```
|
||||
#}
|
||||
|
||||
{# Defaults #}
|
||||
{% set _width = img.width | default(1) %}
|
||||
{% set _height = img.height | default(1) %}
|
||||
{% set _src = img.src | default(null) %}
|
||||
{% set _alt = img.alt | default(null) %}
|
||||
{% set _caption = img.caption | default(null) %}
|
||||
{% set _attr = attr | default(null) %}
|
||||
{% set _has_parallax = has_parallax | default(null) %}
|
||||
{% set _parallax_speed = parallax_speed | default('-0.1') %}
|
||||
|
||||
{# Override properties #}
|
||||
{% set _width = width | default(_width) %}
|
||||
{% set _height = height | default(_height) %}
|
||||
{% set _src = src | default(_src) %}
|
||||
{% set _alt = alt | default(_alt) %}
|
||||
{% set _caption = caption | default(_caption) %}
|
||||
|
||||
{# Misc. #}
|
||||
{% set _is_figure = is_figure | default(false) %}
|
||||
{% set _is_lazy_load = is_lazy_load | default(true) %}
|
||||
{% set _tag = _is_figure ? 'figure' : 'div' %}
|
||||
|
||||
{# Classes & modifiers #}
|
||||
{% set _classes = classes | default(null) %}
|
||||
{% set _modifiers = modifiers | default(null) %}
|
||||
|
||||
{% if _has_parallax %}
|
||||
{% set _modifiers = _modifiers ~ ' -parallax' %}
|
||||
{% endif %}
|
||||
|
||||
{% if _is_lazy_load %}
|
||||
{% set _modifiers = _modifiers ~ ' -lazy-load' %}
|
||||
{% set _loading = 'lazy' %}
|
||||
{% else %}
|
||||
{% set _loading = 'eager' %}
|
||||
{% endif %}
|
||||
|
||||
{% if _classes != null %}
|
||||
{% set _classes = ' ' ~ _classes %}
|
||||
{% endif %}
|
||||
|
||||
{% if _modifiers != null %}
|
||||
{% set _classes = ' ' ~ _modifiers ~ ' ' ~ _classes %}
|
||||
{% endif %}
|
||||
|
||||
{# ---------------------------------------- #}
|
||||
|
||||
<{{_tag}} class="c-image{{ _classes }}" {{_attr}}>
|
||||
<div
|
||||
class="c-image_inner"
|
||||
{% if has_parallax %}
|
||||
data-scroll
|
||||
data-scroll-speed="{{ _parallax_speed }}"
|
||||
{% endif %}
|
||||
>
|
||||
<img
|
||||
class="c-image_img"
|
||||
src="{{ _src }}"
|
||||
alt="{{ _alt }}"
|
||||
width="{{ _width }}"
|
||||
height="{{ _height }}"
|
||||
loading="{{ _loading }}"
|
||||
onload="this.closest('.c-image')?.classList?.add('is-loaded');"
|
||||
>
|
||||
</div>
|
||||
|
||||
{% if _caption %}
|
||||
{% if _is_figure %}
|
||||
<figcaption class="c-image_description">{{ _caption }}</figcaption>
|
||||
{% else %}
|
||||
<div class="c-image_description"><span>{{ _caption }}</span></div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</{{ _tag }}>
|
||||
@@ -4,24 +4,24 @@
|
||||
<div class="o-container">
|
||||
<h1 class="c-heading -h1">Hello</h1>
|
||||
|
||||
<div class="o-grid -col-4 -col-12@from-medium -gutters">
|
||||
<div class="o-grid_item u-gc-1/8@from-medium" style="background-color: gray;">
|
||||
<h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
|
||||
<div class="o-grid -col-4 -col-12@from-md -gutters">
|
||||
<div class="o-grid_item u-gc-1/8@from-md" style="background-color: gray;">
|
||||
<h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `md` MQ</h2>
|
||||
</div>
|
||||
|
||||
<div class="o-grid_item u-gc-1/5@from-medium" style="background-color: yellow;">
|
||||
<div class="o-grid_item u-gc-1/5@from-md" style="background-color: yellow;">
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
|
||||
</div>
|
||||
|
||||
<div class="o-grid_item u-gc-5/9@from-medium" style="background-color: red;">
|
||||
<div class="o-grid_item u-gc-5/9@from-md" style="background-color: red;">
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
|
||||
</div>
|
||||
|
||||
<div class="o-grid_item u-gc-9/13@from-medium" style="background-color: blue;">
|
||||
<div class="o-grid_item u-gc-9/13@from-md" style="background-color: blue;">
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
|
||||
</div>
|
||||
|
||||
<div class="o-grid_item u-gc-1/3 u-gc-5/13@from-medium" style="background-color: pink;">
|
||||
<div class="o-grid_item u-gc-1/3 u-gc-5/13@from-md" style="background-color: pink;">
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,49 @@ title: Home
|
||||
|
||||
{% block content %}
|
||||
<div class="o-container">
|
||||
<h1 class="c-heading -h1">Hello</h1>
|
||||
|
||||
{# ====================== #}
|
||||
{# ====== Headings ====== #}
|
||||
{# ====================== #}
|
||||
|
||||
<h1 class="c-heading -h1">Heading 1</h1>
|
||||
<h1 class="c-heading -h2">Heading 2</h1>
|
||||
<h1 class="c-heading -h3">Heading 3</h1>
|
||||
<h1 class="c-heading -h4">Heading 4</h1>
|
||||
<h1 class="c-heading -h5">Heading 5</h1>
|
||||
<h1 class="c-heading -h6">Heading 6</h1>
|
||||
|
||||
<hr>
|
||||
|
||||
{# ======================= #}
|
||||
{# ======== Texts ======== #}
|
||||
{# ======================= #}
|
||||
|
||||
<p class="c-text -body-regular" style="max-width: 500px">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam libero, sit pariatur voluptatum amet magni odio ducimus! Saepe facere iste porro voluptatem. Tenetur perferendis ea a quasi vitae! Ullam, blanditiis.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
{# ======================= #}
|
||||
{# ======= Buttons ======= #}
|
||||
{# ======================= #}
|
||||
|
||||
{% include "@snippets/button.twig" with {
|
||||
label: 'Button'
|
||||
} %}
|
||||
|
||||
<hr>
|
||||
|
||||
{# ====================== #}
|
||||
{# ======= Images ======= #}
|
||||
{# ====================== #}
|
||||
|
||||
{% include "@snippets/image.twig" with {
|
||||
src: 'http://picsum.photos/800/600?v=1',
|
||||
width: 800,
|
||||
height: 600
|
||||
} %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
78
views/templates/wysiwyg.twig
Normal file
78
views/templates/wysiwyg.twig
Normal file
@@ -0,0 +1,78 @@
|
||||
{% extends "@layouts/base.twig" %}
|
||||
|
||||
{% block content %}
|
||||
<div data-module-scroll="main">
|
||||
<div class="o-container || c-wysiwyg">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<h1>Heading 1</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<h2>Heading 2</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<h3>Heading 3</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<h4>Heading 4</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<h5>Heading 5</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p><p><strong>Lorem ipsum dolor sit amet, consectetur</strong> adipiscing elit, sed do eiusmod tempor incididunt u<strong>t labore et dolore magna aliqua</strong>. Ut enim ad minim <em>veniam, quis nostrud exercitation</em> ullamco laboris <em>nisi ut aliquip ex ea</em> commodo consequat. <span style="text-decoration: underline;">Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. <span style="text-decoration: underline;">Excepteur sint occaecat cupidatat</span> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
</blockquote>
|
||||
<p>Je suis un <a href="https://www.lipsum.com/" target="_blank" title="Un super lien" rel="noopener noreferrer">super lien.</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a href="https://www.lipsum.com/" title="Lorem Ipsum">incididunt ut labore et dolore magna aliqua</a>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p>
|
||||
<a href="mailto:example@example.com" title="Test mail">Lien mail.</a><br/>
|
||||
<a href="tel:+0-123-456-7890" title="Test tel">Lien téléphone.</a>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li><strong>Item 2</strong></li>
|
||||
<li><em><strong>Item 3</strong></em></li>
|
||||
<li><span style="text-decoration: underline;">Item 4</span></li>
|
||||
<li><a href="https://www.lipsum.com/" title="Lorem ipsum">Item 5</a></li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ol>
|
||||
<p style="padding-left: 60px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex."</p>
|
||||
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<table width="539" height="90">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 126.55px;"><strong>Last name</strong></td>
|
||||
<td style="width: 261.417px;"><span style="text-decoration: underline;">First name</span></td>
|
||||
<td style="width: 126.533px;"><em>City</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 126.55px;">Lorem</td>
|
||||
<td style="width: 261.417px;">Ipsum</td>
|
||||
<td style="width: 126.533px;">Montréal</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 126.55px;">Dolor</td>
|
||||
<td style="width: 261.417px;">Sit</td>
|
||||
<td style="width: 126.533px;">Paris</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p><img src="https://www.airinuit.com/uploads/destinations/XGR/Mathias_Laroque_MWL.pilot_website_fall_2021_HD.jpg" alt=""/></p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p><img src="https://www.airinuit.com/uploads/destinations/XGR/Mathias_Laroque_MWL.pilot_website_fall_2021_HD.jpg" alt=""/></p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/qt7jSw55N1A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
|
||||
<p><img src="https://www.airinuit.com/uploads/destinations/XGR/Mathias_Laroque_MWL.pilot_website_fall_2021_HD.jpg" alt=""/></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user