Component documentation template

README.md

[Component]

Component description goes here...

Documentation

Installation

npm install @vrembem/[component]

Styles

@use "@vrembem/[component]";

JavaScript

import [Component] from '@vrembem/[component]';
const [component] = new [Component]({ autoInit: true });

Markup

Markup description goes here...

<!-- Example -->

[data-attr]

Data attribute description goes here...

<!-- Example -->

Modifiers

[component]_[key]_[value]

Modifier description goes here...

<!-- Example -->

Available Variations

• [component]_[key]_[value]

Sass Variables

Variable	Default	Description
$prefix-block	null	String to prefix blocks with.
$prefix-element	"__"	String to prefix elements with.
$prefix-modifier	"_"	String to prefix modifiers with.
$prefix-modifier-value	"_"	String to prefix modifier values with.

Sass Mixins

@mixin mixin-name($param1, $param2: true)

Mixin description goes here...

Parameters

Variable	Default	Type	Description
$param1	—	string	—
$param2	true	boolean	—

Example

// SCSS Input
// ...

// CSS Output
// ...

API

Maybe a description about the components API...

Options

Key	Default	Description
autoInit	false	Automatically initializes the instance.

Events

event:name

Event description goe here...

Example

document.addEventListener('event:name', (event) => {
  // What gets returned?
  // event.target
  // event.detail
}, false);

Methods

Maybe a description about methods goes here...

[component].method(param)

Method description goes here...

Parameters

Variable	Default	Type	Description
param	—	string	—

Example

const [component] = new [Component]();
[component].init();

// -> Array []