Covers

Download

You can fetch Trowel Covers with npm, yarn or bower.

# With bower
$ bower install --save trowel-covers

# With npm
$ npm install --save trowel-covers

# With yarn
$ yarn add trowel-covers

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/covers.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Covers
@import './path/to/dependencies/trowel-covers/src/scss/covers';

JavaScript

You have several javascript files for different use cases :

• The browser ready file is available at ./dest/javascript/covers.js (a minified version exists at dest/javascript/covers.min.js)
• The script written in es2015 and ready to import is available at ./src/javascript/covers.js

Twig template

The twig template ready to be include or embed is located at ./src/twig/cover.html.twig.

Usage

Cover Header

Cover Body

Cover Footer

<div class="cover">
  <img class="cover__image" src="...">

  <div class="cover__content">
    <div class="cover__header">
      Cover Header
    </div>

    <div class="cover__body">
      Cover Body
    </div>

    <div class="cover__footer">
      Cover Footer
    </div>
  </div>
</div>

With an overlay

In order to add an overlay on the cover, add a .cover__overlay element as first children of the block .cover and add the modifier .cover--overlaid on the block.

Be aware that the modifier `cover--overlaid` is generated by the trowel variables `$covers-overlay--background-color` and `$covers-content--color`. If you override thoses variables, the modifier may not work anymore.

hello world !

<div class="cover cover--overlaid">
  <div class="cover__overlay"></div>
  <img class="cover__image" src="...">

  <div class="cover__content">
    <div class="cover__body">hello world !</div>
  </div>
</div>

With a scroll down button

Following the snippet below you can add a button that will scroll the window to the content after the cover.

Cover Body

<div class="cover cover--overlaid">
  <div class="cover__overlay"></div>

  <img class="cover__image" src="...">

  <div class="cover__content">
    <div class="cover__body">
      Cover Body
    </div>

    <div class="cover__footer">
      <button class="cover__scroll-btn" data-cover-scrolldown>
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="15" viewBox="0 0 32 17">
          <path fill="currentColor" d="M29.4292.3693c.4997-.4924 1.3025-.4924 1.7986 0 .496.4923.498 1.288 0 1.7802L16.6992 16.5348c-.496.4924-1.299.4924-1.7986 0L.372 2.1495c-.496-.4923-.496-1.288 0-1.7802.498-.4924 1.3026-.4924 1.7987 0l13.63 13.1194L29.4293.3693z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

In order to make it work you need to setup some javascript. You have two ways to make it work :

Javascript usage into html

<script src="./path/to/trowel-covers/javascript/covers.js"></script>

<script type="text/javascript">
  var covers = new TrowelCovers(document.querySelectorAll('.cover'));
</script>

Javascript usage with an import

import TrowelCovers from './path/to/trowel-covers/src/javascript/covers';

const covers = new TrowelCovers(document.querySelectorAll('.cover'));

Option

In both ways, the constructor from the object TrowelCovers accepts two parameters : the first one (required) is a domlist of covers, the seconde one (optional) is an object of options that can be setted.

here is the list of the options you can set :

Twig usage

Instead of writing html, you can embed the twig template :

{% embed "path/to/trowel-covers/src/twig/cover.html.twig" with {
  'img': '...',
} %}
  {% block header %}Cover Header{% endblock %}
  {% block body %}Cover Body{% endblock %}
  {% block footer %}Cover Footer{% endblock %}
{% endembed %}

By default the scroll-button is implemented on the twig template (into the block `footer`). If you want to remove it, just override the `footer` block.

If you want to add some modifiers on the block selector (.cover), you can set the array modifiers with as many modifiers as you need :

{% embed "path/to/trowel-covers/src/twig/cover.html.twig" with {
  'img': '...',
  'modifiers': ['overlaid'],
} %}
  {% block body %}Cover Body{% endblock %}
{% endembed %}

You can also set some additionnal classes or attributes this way :

{% embed "path/to/trowel-covers/src/twig/cover.html.twig" with {
  'img': '...',
  'classes': ['pod'],
  'attrs': {
      'data-foo': 'bar',
  },
} %}
  {% block body %}Cover Body{% endblock %}
{% endembed %}

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Component variables