one-for-all-ui

JavaScript Design Library

Usage no npm install needed!

<script type="module">
  import oneForAllUi from 'https://cdn.skypack.dev/one-for-all-ui';
</script>

README

Project Is Moved

This project is moved to @one-for-all-ui/core


One For All UI npm David Snyk Vulnerabilities for GitHub Repo npm bundle size npm GitHub

Installation

NPM

npm install one-for-all-ui --save

JavaScript

<script src="https://cdn.jsdelivr.net/npm/one-for-all-ui/dist/one-for-all/one-for-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/one-for-all-ui/dist/one-for-all/one-for-all.css">

Themeing

  • Below css variables are provided for theming of all components
--color-primary: your_color;
--color-secondary: your_color;
--color-font: your_color;

Note: Replace your_color with your choice of color.


Example

Dark Shadow (Modal)

Special Card (Card)

Zero Gravity Button (Floating Action Button)

  • JavaScript - Example Link

  • Note: If you want to show button respective to any element then set position to relative for that element.


For Development

To start locally, run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test