Drops

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 Drops with npm, yarn or bower.

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

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

# With yarn
$ yarn add trowel-drops

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/drops.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 Drops
@import './path/to/dependencies/trowel-drops/src/scss/drops';

JavaScript

The javascript file is located at the ./dest/javascript/drops.js. The optimized and minified version is available at dest/javascript/drops.min.js.

Usage

Simple drops

<button data-drop="trigger" data-href="#drop-ex-1">simple drop</button>

<div class="drop" id="drop-ex-1">
  <nav class="drop__menu">
    <a class="drop__anchor" href="#">Drop anchor</a>
    <a class="drop__anchor" href="#">Drop anchor</a>
    <a class="drop__anchor" href="#">Drop anchor</a>
    <hr class="drop__divider">
    <h6 class="drop__heading">Drop heading</h6>
    <a class="drop__anchor" href="#">Drop anchor</a>
    <a class="drop__anchor" href="#">Drop anchor</a>
    <hr class="drop__divider">
    <h6 class="drop__heading">Drop heading</h6>
    <a class="drop__anchor" href="#">Drop anchor</a>
  </nav>
</div>

Javascript setup

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-drops/javascript/drops.js"></script>

<script type="text/javascript">
  var dropTriggers = new TrowelDrops(document.querySelectorAll('[data-drop="trigger"]'));
</script>

Javascript usage with an import

import TrowelDrops from './path/to/trowel-drops/src/javascript/drops';

const dropTriggers = new TrowelDrops(document.querySelectorAll('[data-drop="trigger"]'));

Change position

You can setup the drop position relative to the trigger with the attribute [data-position].

<button data-position="bottomout leftin" data-drop="trigger" data-href="#drop-ex-2">bottom left</button>
<button data-position="bottomout rightin" data-drop="trigger" data-href="#drop-ex-3">bottom right</button>
<button data-position="topout leftin" data-drop="trigger" data-href="#drop-ex-4">top left</button>
<button data-position="topout rightin" data-drop="trigger" data-href="#drop-ex-5">top right</button>

Popovers

Popovers are just a variant of drops. You can make them by just adding a modifier class on the .drop element, and change the [data-position] value.

The popover modifier is created with the usage of trowel variables, you can change the design, or delete the class `.drop--popover` by editing the trowel variables listed below.

Drop header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<button data-position="bottomout center" data-drop="trigger" data-href="#drop-ex-6">popover</button>

<div class="drop drop--popover" id="drop-ex-6">
  <h6 class="drop__header">Drop header</h6>

  <div class="drop__content">
    ...
  </div>
</div>

Popovers positions

popover bottom
popover left
popover top
popover right 
<button data-position="bottomout center" data-drop="trigger" data-href="#drop-ex-7">bottom</button>
<button data-position="middle leftout" data-drop="trigger" data-href="#drop-ex-8">left</button>
<button data-position="topout center" data-drop="trigger" data-href="#drop-ex-9">top</button>
<button data-position="middle rightout" data-drop="trigger" data-href="#drop-ex-10">right</button>

Tooltips

Tooltips are like popovers : just a modifier class to add on the .drop element.

The positionning of tooltips is exactly the same that for popovers

Mostly a popover displays when the trigger is hovered. To make this behavior possible just add the attribute [data-behavior="hover"] on the trigger.

This attributes work for any kind of drops, popover or tooltip

Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<button data-behavior="hover" data-position="bottomout center" data-drop="trigger" data-href="#drop-ex-11">popover</button>

<div class="drop drop--tooltip" id="drop-ex-11">
  <div class="drop__content">
    ...
  </div>
</div>

Sass reference

Syntax variables

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

VARIABLE DEFAULT VALUE DESCRIPTION
$drops--syntax null syntax config for .drop

Enables

You can avoid the generation of some css with the following variables

VARIABLE DEFAULT VALUE DESCRIPTION
$drops-caret--enabled true enable the generation of rules for .drop__caret
$drops-menu--enabled true enable the generation enabledrules for .drop__menumenu
$drops-heading--enabled true enable the generation of rules for .drop__heading
$drops-anchor--enabled true enable the generation of enabledles for .drop__anchoranchor
$drops-divider--enabled true enable the generation of rules for .drop__divider
$drops-header--enabled true enable the generation of rules for .drop__header
$drops-content--enabled true enable the generation of rules for .drop__content

Component variables

VARIABLE DEFAULT VALUE DESCRIPTION
$drops--font-size (
  'default': 1rem,
  '-tooltip': 0.875rem,
)		 sets the font-size property
$drops--font-family null sets the font-family property
$drops--font-weight null sets the font-weight property
$drops--text-transform null sets the text-transform property
$drops--letter-spacing null sets the letter-spacing property
$drops--line-height null sets the line-height property
$drops--text-align left sets the text-align property
$drops--text-decoration null sets the text-decoration property
$drops--margin null sets the margin property
$drops--min-width (
  'default': 10em,
  '-tooltip': 0,
)		 sets the min-width property
$drops--max-width 20em sets the max-width property
$drops--width null sets the width property
$drops--border-width (
  'default': 1px,
  '-tooltip': 0,
)		 sets the border-width property
$drops--border-style solid sets the border-style property
$drops--border-color (
  'default': rgba(0, 0, 0, 0.15),
  '-tooltip': rgb(0, 0, 0),
)		 sets the border-color property
$drops--border-radius (
  'default': 0.25em,
  '-tooltip'` | 0.285714286em,
)		 sets the border-radius property
$drops--color (
  '-tooltip': rgb(255, 255, 255),
)		 sets the color property
$drops--box-shadow null sets the box-shadow property
$drops--background null sets the background property
$drops--background-color (
  'default': rgb(255, 255, 255),
  '-tooltip': rgb(0, 0, 0),
)		 sets the background-color property
$drops--padding-x (
  'default': 1.5rem,
  '-tooltip'` | 0.571428571em,
)		 sets the padding-x property
$drops--margin (
  '-tooltip': 0.75rem,
  '-popover': 0.75rem,
)		 sets the margin property
$drops--z-index 1000 sets the z-index property
Caret    
VARIABLE DEFAULT VALUE DESCRIPTION
$drops-caret--base (
  'default': 0,
  '-popover': 20px,
  '-tooltip': 10px,
)		 sets the base size for .drop__caret
$drops-caret--height (
  'default': 0,
  '-popover': 10px,
  '-tooltip': 5px,
)		 sets the height size for .drop__caret
Menu    
VARIABLE DEFAULT VALUE DESCRIPTION
$drops-menu--padding-y 0.5rem sets the left and right padding for .drop__menu
$drops-menu--margin null sets the margin property for .drop__menu
$drops-menu--font-size null sets the font-size property for .drop__menu
$drops-menu--color null sets the color property for .drop__menu
$drops-menu--text-align null sets the text-align property for .drop__menu
$drops-menu--background-color null sets the background-color property for .drop__menu
Heading    
VARIABLE DEFAULT VALUE DESCRIPTION
$drops-heading--padding-y 0.5rem sets the left and right padding for .drop__heading
$drops-heading--font-size 0.875rem sets the font-size property for .drop__heading
$drops-heading--line-height 1.1 sets the line-height property for .drop__heading
$drops-heading--letter-spacing null sets the letter-spacing property for .drop__heading
$drops-heading--font-weight 500 sets the font-weight property for .drop__heading
$drops-heading--text-transform null sets the text-transform property for .drop__heading
$drops-heading--text-decoration null sets the text-decoration property for .drop__heading
$drops-heading--color #818a91 sets the color property for .drop__heading
Anchor    
VARIABLE DEFAULT VALUE DESCRIPTION
$drops-anchor--padding-y 0.1875rem sets the left and right padding property for .drop__anchor
$drops-anchor--font-size null sets the font-size property for .drop__anchor
$drops-anchor--line-height null sets the line-height property for .drop__anchor
$drops-anchor--letter-spacing null sets the letter-spacing property for .drop__anchor
$drops-anchor--font-weight null sets the font-weight property for .drop__anchor
$drops-anchor--text-transform null sets the text-transform property for .drop__anchor
$drops-anchor--text-decoration none sets the text-decoration property for .drop__anchor
$drops-anchor--color rgb(0, 0, 0) sets the color property for .drop__anchor
$drops-anchor--background-color (
  ':hover': rgb(245, 245, 245),
)		 sets the background-color property for .drop__anchor
Divider    
VARIABLE DEFAULT VALUE DESCRIPTION
$drops-divider--margin 0.625em 0 sets the margin property for .drop__divider
Header    
VARIABLE DEFAULT VALUE DESCRIPTION
$drops-header--padding-y 0.5rem sets the left and right padding property for .drop__header
$drops-header--font-size 1rem sets the font-size property for .drop__header
$drops-header--background-color rgb(247, 247, 247) sets the background-color property for .drop__header
$drops-header--border-bottom 1px solid rgb(235, 235, 235) sets the border-bottom property for .drop__header
$drops-header--font-weight 500 sets the font-weight property for .drop__header
$drops-header--color inherit sets the color property for .drop__header
Content    
VARIABLE DEFAULT VALUE DESCRIPTION
$drops-content--padding-y (
  'default': 0.5625rem,
  '-tooltip': 0.214285714em,
)		 sets the left and right padding property for .drop__content