@pnx-mixtape/messages

Documentation and examples: Messages

Installation

npm install @pnx-mixtape/messages --save

How to use

CSS

• PostCSS workflow: @import '@pnx-mixtape/messages';
• Native CSS: @import url('dist/messages.css');
• Link tag: <link href="dist/messages.css" rel="stylesheet" type="text/css">

Vanilla JS

This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.

• ES6 import: import Message from '@pnx-mixtape/messages';
• Script tag: <script src="dist/messages.js" type="text/javascript"></script>

HTML

<div data-closable-message class="message" id="message-example">
  <p>Body content</p>
</div>