What is it?
A ridiculously simple, tree shakeable, dependency-free, vanilla javascript UI component package, that I built in my spare time as practice. The library has five UI components including Accordion, Popup, Toast, Tooltip and Tabs.
Why though?
I've never published an NPM package before so I took it as an opportunity to learn how (it's ridiculously easy). The library is inspired by the Bootstrap and jQuery days of web development. Check out the website.
Getting Started
Install using a package manager
Install the package as a dependency in your project.
npm install super-simple-ui-componentsIn your Javascript file import the css and any components you will need from the package.
import 'super-simple-ui-components/dist/bundle.min.css';import { Accordion } from 'super-simple-ui-components';
const accordion = new Accordion('#accordion');accordion.init();Install using CDN
To use the package in the browser via script tag, you can download the minified script through GitHub or use the CDN.
<!-- In your project <head> --><link rel="stylesheet"/>
<!-- In your Javascript --><script> const { Accordion } = simpleUI; const accordion = new Accordion('#accordion'); accordion.init();</script>Documentation
The library is minimally styled and limited in options. Below is the required HTML markup and Javascript needed to use each component. To alter the appearance, override the CSS with your own classes.
Accordion
Markup
The wrapper id of 'accordion' is required to be passed to the instance. The trigger class also requires a data-target attribute that corresponds to the id of the content class div.
<div id="accordion"> <div> <div data-target="#tab1" class="trigger">Tab 1</div> <div id="tab1" class="content"> <!-- tab 1 content --> </div> </div> <div> <div data-target="#tab2" class="trigger">Tab 2</div> <div id="tab2" class="content"> <!-- tab 2 content --> </div> </div> <div> <div data-target="#tab3" class="trigger">Tab 3</div> <div id="tab3" class="content"> <!-- tab 3 content --> </div> </div></div>const accordion = new Accordion('#accordion');accordion.init();See it in action on Codesandbox.
Popup
Markup
The ids and HTML markup are required as shown.
<div id="popup-wrapper"> <div id="popup"> <div id="popup-close">x</div> <div> <!-- popup content --> </div> </div></div>
<a href="#/" id="popup-open">Click me</a>Javascript
The available options:
const options = { maxWidth: '600px', opacity: '0.85',};
const popup = new Popup('#popup-wrapper', options);popup.init();See it in action on Codesandbox.
Toast
Markup
The id toast-trigger is required.
Javascript
Options for position include: top center, top left, top right, and bottom center, bottom left, bottom right. The available options for style are: alert, success, warn and info.
const message = 'Download Simple UI Kit as package on NPM!';
const options = { style: 'success', position: 'top center', timeout: 4000,};
const toast = new Toast(message, options);toast.init();See it in action on Codesandbox.
Tooltip
Markup
The tooltip class and data-message attribute are required.
<span class="tooltip" data-message="This is a tooltip!">What's a tooltip?</span>Javascript
There is only one option for the tooltip and that is position. Values for position include: top, bottom, left and right.
const tooltip = new Tooltip('.tooltip', { position: 'right' });tooltip.init();See it action on Codesandbox
Tabs
Markup
The wrapper class 'tabs' is required to be passed to the instance. The trigger class also requires a data-target attribute that corresponds to the id of the content class div.
<div class="tabs"> <ul> <li class="trigger active" data-target="#tab1">Tab 1</li> <li class="trigger" data-target="#tab2">Tab 2</li> <li class="trigger" data-target="#tab3">Tab 3</li> </ul> <div id="tab1" class="content active"> <!-- tab 1 content --> </div> <div id="tab2" class="content"> <!-- tab 2 content --> </div> <div id="tab3" class="content"> <!-- tab 3 content --> </div></div>Javascript
const tabs = new Tabs('.tabs');tabs.init();See it in action on Codesandbox.