@one-for-all-ui/core

JavaScript Design Library

Usage no npm install needed!

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

README

One For All UI

🎉 React Binding Is Here

Note

  • NPM project is moved from one-fro-all-ui to @one-for-all-ui/core.
  • Bindings for angular and vue are coming soon for easy use.

Installation

NPM

  • React (For more info look at examples)
    npm i @one-for-all-ui/react --save
  • Other
    npm i @one-for-all-ui/core --save

JavaScript

<script src="https://cdn.jsdelivr.net/npm/@one-for-all-ui/core/dist/one-for-all-ui/one-for-all-ui.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@one-for-all-ui/core/dist/one-for-all-ui/one-for-all-ui.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

  • React - Example Link

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

Quirk Boomerang (Carousel)


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