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/uiAfter 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 (demo):
<!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/[email protected]/dist/fancybox.css" /> </head> <body> <!-- Content -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/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/[email protected]/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:cssTo build CSS automatically everytime you change the SCSS files, use NPM watch:css task. You can run tests using the test task.