Dobby-Outlines' Docs

Welcome to Dobby's documentation page.
Here you can check example usages for this simple Elf package.

How to use

#1 - Import or require DobbyOutlines.

#2 - Define initializing properties. (optional):

• const options = { ... }

#3 - Initialize DobbyOutlines:

• const dobbyOutlines = new DobbyOutlines(options)

#4 - Use DobbyOutlines as seen on the example screenshots below

Find the icon on the bottom right corner and tap it.
That's it!

Enjoy!

Supported Init Options

• enabled: Boolean (default: false)
• color: String (default: '#D36582')
• tags: Array (default: list of pre-excluded tags)
• addedTags: Array (use it to exclude more tags)
• cssClassName: String (default: dobby-outlines-active)
• outlinesWidth: Integer (default: 2)
• outlinesOpacity: Decimal (default: 0.75)
• cookiesEnabled: Boolean (default: true)

Further Explanation

enabled

When false, the package has no action.
eg: Production environments.

color

Used on the outlines.
Expected to be in HEX format
eg: #ffffff

String css colors also valid, however the opacity will not work.
Should respect css convention!

tags

A list of pre-defined html elements that will not be affected by Dobby.
You can pass a new custom list.

addedtags

Used to append new element tags to the default list.

cssClassName

When activated, Dobby will add this class to all affected elements.

outlinesWidth

Defines the width of the outlines.
Must respect 'outline-width' rule convention.

outlinesOpacity

Defines the opacity of the outlines.
Must respect 'opacity' pattern.
eg: 0.1 for 10% or 1 for 100%.

This may not work, if the given HEX color can not be parsed from HEX.

cookiesEnabled

When activated (default: true), Dobby will persist the state of the outlines on that page after refresh.