Installation

You can install Fancyapps UI with NPM and modern build tools, or get started quickly with just static hosting or a CDN. For most users, installing from NPM is the best choice. Whichever you choose, be consistent and import all files from the same version of the library.

NPM#

You'll need to have Node.js installed so that you can use NPM. You'll also need to know how to access the command line on your machine.

@fancyapps/ui is the primary Fancyapps UI package on NPM and home to all components. Install it with your favourite package manager:

npm install @fancyapps/ui// oryarn add  @fancyapps/ui

After installation, you'll be able to import components in your application. Example:

import { Fancybox } from "@fancyapps/ui";// orimport { Fancybox } from "@fancyapps/ui/src/Fancybox/Fancybox.js";

Remember to include the corresponding CSS file, example:

import "fancyapps/ui/dist/fancybox.css";

CDN#

You can also use the standalone UMD build by downloading or using these as CDN in your page:

Usage example:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width" />
    <link      rel="stylesheet"      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"    />  </head>  <body>    <!-- Content -->
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>    <script>      //  JavaScript will go here    </script>  </body></html>

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">  import Fancybox from "https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.esm.js";</script>

Local development#

Grab all the source files and build+develop locally

git clone [email protected]:fancyapps/ui.gitcd uirm -rf .git && git initnpm installnpm run build:js && npm run build:css

To build CSS automatically everytime you change the SCSS files, use NPM watch:css task. You can run tests using the test task.