Covers

Star
The Trowel project is abandonned. Trowel core and the Trowel components are no more maintained or supported. More infos

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 :

Twig template

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

Usage

Cover Header
Cover Body
<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 :

name default value description
scrollDuration 500  In miliseconds, the duration of the scroll animation
offset 0  In pixels, the distance that will be added on the scroll distance. Usefull when your designs includes fixed sections

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

VARIABLE DEFAULT VALUE DESCRIPTION
$covers--syntax null syntax config for .cover

Component variables

VARIABLE DEFAULT VALUE DESCRIPTION
$covers--font-size 1rem sets the font-size property
$covers--font-family null sets the font-family property
$covers--font-weight null sets the font-weight property
$covers--text-transform null sets the text-transform property
$covers--letter-spacing null sets the letter-spacing property
$covers--line-height null sets the line-height property
$covers--text-align null sets the text-align property
$covers--text-decoration null sets the text-decoration property
$covers--margin 0 0 2em sets the margin property
$covers--border-width null sets the border-width property
$covers--border-style null sets the border-style property
$covers--border-color null sets the border-color property
$covers--border-radius null sets the border-radius property
$covers--color null sets the color property
$covers--box-shadow null sets the box-shadow property
$covers--background null sets the background property
$covers--background-color null sets the background-color property
$covers--height null sets the height property
$covers--min-height 18.75em sets the min-height property
$covers--max-height null sets the max-height property
Overlay    
VARIABLE DEFAULT VALUE DESCRIPTION
$covers-overlay--background null sets the background property for .cover__overlay
$covers-overlay--background-color (
  '-overlaid': rgba(0, 0, 0, 0.6),
)
sets the background-color property for .cover__overlay
$covers-overlay--opacity null sets the opacity property for .cover__overlay
Image    
VARIABLE DEFAULT VALUE DESCRIPTION
$covers-image--opacity null sets the opacity property for .cover__image
$covers-image--object-fit cover sets the object-fit property for .cover__image
Content    
VARIABLE DEFAULT VALUE DESCRIPTION
$covers-content--font-size null sets the font-size property for .cover__content
$covers-content--font-family null sets the font-family property for .cover__content
$covers-content--font-weight null sets the font-weight property for .cover__content
$covers-content--text-transform null sets the text-transform property for .cover__content
$covers-content--letter-spacing null sets the letter-spacing property for .cover__content
$covers-content--line-height null sets the line-height property for .cover__content
$covers-content--text-align null sets the text-align property for .cover__content
$covers-content--text-decoration null sets the text-decoration property for .cover__content
$covers-content--margin auto sets the margin property for .cover__content
$covers-content--padding 0 1em sets the padding property for .cover__content
$covers-content--color (
  '-overlaid': rgb(255, 255, 255),
)
sets the color property for .cover__content
$covers-content--background null sets the background property for .cover__content
$covers-content--background-color null sets the background-color property for .cover__content
$covers-content--width null sets the width property for .cover__content
$covers-content--max-width 75em sets the max-width property for .cover__content
Header    
VARIABLE DEFAULT VALUE DESCRIPTION
$covers-header--font-size null sets the font-size property for .cover__header
$covers-header--font-family null sets the font-family property for .cover__header
$covers-header--font-weight null sets the font-weight property for .cover__header
$covers-header--text-transform null sets the text-transform property for .cover__header
$covers-header--letter-spacing null sets the letter-spacing property for .cover__header
$covers-header--line-height null sets the line-height property for .cover__header
$covers-header--text-align null sets the text-align property for .cover__header
$covers-header--text-decoration null sets the text-decoration property for .cover__header
$covers-header--margin null sets the margin property for .cover__header
$covers-header--padding null sets the padding property for .cover__header
$covers-header--color null sets the color property for .cover__header
$covers-header--background null sets the background property for .cover__header
$covers-header--background-color null sets the background-color property for .cover__header
$covers-header--height null sets the height property for .cover__header
$covers-header--max-height null sets the max-height property for .cover__header
$covers-header--width null sets the width property for .cover__header
$covers-header--max-width null sets the max-width property for .cover__header
Body    
VARIABLE DEFAULT VALUE DESCRIPTION
$covers-body--font-size null sets the font-size property for .cover__body
$covers-body--font-family null sets the font-family property for .cover__body
$covers-body--font-weight null sets the font-weight property for .cover__body
$covers-body--text-transform null sets the text-transform property for .cover__body
$covers-body--letter-spacing null sets the letter-spacing property for .cover__body
$covers-body--line-height null sets the line-height property for .cover__body
$covers-body--text-align null sets the text-align property for .cover__body
$covers-body--text-decoration null sets the text-decoration property for .cover__body
$covers-body--margin null sets the margin property for .cover__body
$covers-body--padding null sets the padding property for .cover__body
$covers-body--color null sets the color property for .cover__body
$covers-body--background null sets the background property for .cover__body
$covers-body--background-color null sets the background-color property for .cover__body
$covers-body--height null sets the height property for .cover__body
$covers-body--max-height null sets the max-height property for .cover__body
$covers-body--width null sets the width property for .cover__body
$covers-body--max-width null sets the max-width property for .cover__body
Footer    
VARIABLE DEFAULT VALUE DESCRIPTION
$covers-footer--font-size null sets the font-size property for .cover__footer
$covers-footer--font-family null sets the font-family property for .cover__footer
$covers-footer--font-weight null sets the font-weight property for .cover__footer
$covers-footer--text-transform null sets the text-transform property for .cover__footer
$covers-footer--letter-spacing null sets the letter-spacing property for .cover__footer
$covers-footer--line-height null sets the line-height property for .cover__footer
$covers-footer--text-align center sets the text-align property for .cover__footer
$covers-footer--text-decoration null sets the text-decoration property for .cover__footer
$covers-footer--margin null sets the margin property for .cover__footer
$covers-footer--padding null sets the padding property for .cover__footer
$covers-footer--color null sets the color property for .cover__footer
$covers-footer--background null sets the background property for .cover__footer
$covers-footer--background-color null sets the background-color property for .cover__footer
$covers-footer--height null sets the height property for .cover__footer
$covers-footer--max-height null sets the max-height property for .cover__footer
$covers-footer--width null sets the width property for .cover__footer
$covers-footer--max-width null sets the max-width property for .cover__footer
Scroll button    
VARIABLE DEFAULT VALUE DESCRIPTION
$covers-button--vertical-align middle sets the vertical-align property for .cover__scroll-btn
$covers-button--float null sets the float property for .cover__scroll-btn
$covers-button--display inline-block sets the display property for .cover__scroll-btn
$covers-button--border-width 0 sets the border-width property for .cover__scroll-btn
$covers-button--padding 0.666666667em sets the padding property for .cover__scroll-btn
$covers-button--width null sets the width property for .cover__scroll-btn
$covers-button--margin null sets the margin property for .cover__scroll-btn
$covers-button--height null sets the height property for .cover__scroll-btn
$covers-button--color (
  'default': inherit,
  ':hover': rgb(0, 0, 0),
  ':active': rgb(0, 0, 0),
  ':focus': rgb(0, 0, 0),
)
sets the color property for .cover__scroll-btn
$covers-button--border-color null sets the border-color property for .cover__scroll-btn
$covers-button--background-color (
  'default': transparent,
  ':hover': rgb(255, 255, 255),
  ':active': rgb(255, 255, 255),
  ':focus': rgb(255, 255, 255),
)
sets the background-color property for .cover__scroll-btn
$covers-button--opacity null sets the opacity property for .cover__scroll-btn
$covers-button--font-size 1em sets the font-size property for .cover__scroll-btn
$covers-button--text-decoration null sets the text-decoration property for .cover__scroll-btn
$covers-button--line-height null sets the line-height property for .cover__scroll-btn
$covers-button--text-align center sets the text-align property for .cover__scroll-btn
$covers-button--font-family null sets the font-family property for .cover__scroll-btn
$covers-button--font-weight null sets the font-weight property for .cover__scroll-btn
$covers-button--text-transform null sets the text-transform property for .cover__scroll-btn
$covers-button--letter-spacing null sets the letter-spacing property for .cover__scroll-btn
$covers-button--border-radius null sets the border-radius property for .cover__scroll-btn
$covers-button--border-style null sets the border-style property for .cover__scroll-btn
$covers-button--box-shadow null sets the box-shadow property for .cover__scroll-btn
$covers-button--transition null sets the transition property for .cover__scroll-btn
$covers-button--cursor pointer sets the cursor property for .cover__scroll-btn