@undercoatcss/backdrop v0.5.1

@undercoatcsss/backdrop

Backdrop is a component of the Undercoat.css framework.

CAUTION! IT'S UNDER HEAVY DEVELOPMENT CURRENTLY! DON'T USE IT IN PRODUCTION!

Description

Backdrop is a logically and functionally independent reusable page component (block), which represents a camouflage surface. It appears behind all other surfaces in the UI to make it disabled. Сommonly used with dialog component (modal).

Installation

NPM

npm install @undercoatcss/backdrop

Usage

After installation, you can link or import the assets into your project:

CDN

<script src="https://unpkg.com/@undercoatcss/backdrop@latest/dist/backdrop.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@undercoatcss/backdrop@latest/dist/backdrop.min.css">

Webpack

import Backdrop from '@undercoatcss/backdrop';
import '@undercoatcss/backdrop/backdrop.css';

Settings

The component provides CSS custom property to change its defaults.

Methods

The component provides the following Javascript methods:

show()

Shows backdrop.

Backdrop.show();

hide()

Hides backdrop.

Backdrop.hide();

Browser support

Undercoat is compatible with 2 recent desktop versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

and 2 recent mobile versions of:

• Chrome
• Safari

We support only recent browsers to keep the components codebase clean and provide high performance.

The .browserlist config is provided.

Key concepts

Undercoat is based on the next main principles:

• BEM methodology
• No default theme
• Mobile friendly
• SEO friendly
• WCAG 2.0 compliance

Contributing

If you're interested in the improvement of this project you can help in the following ways:

• bug reporting and new feature requesting by creating issues on plugin GitHub page;
• contribution to a project following these instructions.