Add Readme

README.md

@@ -1 +1,218 @@
-TBA
+# Fancyapps UI
+
+Collection of task-oriented components that will make you more productive. Packed full of features that you and your clients will love.
+
+Full docs with examples: https://fancyapps.com/docs/ui/quick-start/.
+
+## Installation
+
+### NPM
+
+Use either `npm` or `yarn` as follows:
+
+```bash
+npm install @fancyapps/ui
+// or
+yarn add  @fancyapps/ui
+```
+
+Import one or more components:
+
+```jsx
+import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";
+```
+
+Import the appropriate CSS file, example:
+
+```jsx
+import "@fancyapps/ui/dist/fancybox.css";
+```
+
+### CDN
+
+A pre-bundled scripts that contain components are available on [CDN](https://www.jsdelivr.com/package/npm/@fancyapps/ui?path=dist).
+
+:::note
+Because Fancybox is build on top of both Carousel and Panzoom components, you only have to include `fancybox.umd.js` and all 3 components will be available through the `window` object.
+:::
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
+```
+
+Or use ES6 import:
+
+```html
+<script type="module">
+  import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.esm.js";
+</script>
+```
+
+Remember to include the appropriate CSS file, example:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
+```
+
+## Usage
+
+### Fancybox
+
+There are two ways to use Fancybox.
+
+#### Declarative
+
+Add a `data-fancybox` attribute to any element to enable Fancybox. Galleries are created by adding the same attribute `data-fancybox` value to multiple elements. Use `data-src` or `href` attribute to specify the source of the content.
+
+```jsx
+<a href="https://lipsum.app/id/1/1024x768" data-fancybox="gallery" data-caption="Optional caption">
+  Image
+</a>
+```
+
+```jsx
+<a href="http://media.w3.org/2010/05/sintel/trailer.mp4" data-fancybox>
+  Video
+</a>
+```
+
+```jsx
+<a
+  href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv"
+  data-fancybox
+  data-type="iframe"
+  data-preload="false"
+  data-width="640"
+  data-height="480"
+>
+  Iframe
+</a>
+```
+
+```jsx
+<button data-fancybox data-src="#dialog-content">
+  HTML element
+</button>
+
+<div id="dialog-content" style="display:none;">
+  <h2>Hello, world!</h2>
+  <p>
+    <input type="text" value="See if changes remain after closing the dialog" />
+  </p>
+</div>
+```
+
+#### Programmatic
+
+```js
+// Image gallery
+var gallery = [
+  {
+    src: "https://lipsum.app/id/2/800x600",
+    thumb: "https://lipsum.app/id/2/80x80",
+    caption: "First image",
+  },
+  {
+    src: "https://lipsum.app/id/3/800x600",
+    thumb: "https://lipsum.app/id/3/80x80",
+    caption: "Second image",
+  },
+  {
+    src: "https://lipsum.app/id/4/800x600",
+    thumb: "https://lipsum.app/id/4/80x80",
+    caption: "Third image",
+  },
+];
+
+Fancybox.show(gallery, {
+  // Your options go here
+});
+
+// HTML element
+Fancybox.show([{ src: "#dialog-content", type: "inline" }]);
+
+// A copy of HTML element
+Fancybox.show([{ src: "#dialog-content", type: "clone" }]);
+
+// Any HTML content
+Fancybox.show([{ src: "<p>Lorem ipsum dolor sit amet.</p>", type: "html" }]);
+```
+
+### Carousel
+
+Add HTML markup
+
+```html
+<div id="myCarousel" class="carousel">
+  <div class="carousel__slide">1</div>
+  <div class="carousel__slide">2</div>
+  <div class="carousel__slide">3</div>
+</div>
+```
+
+Initialise Carousel
+
+```js
+const myCarousel = new Carousel(document.querySelector("#myCarousel"), {
+  // Your options go here
+});
+```
+
+Optionally, use CSS to customize container, navigation elements and slides
+
+```css
+.carousel {
+  color: #170724;
+
+  --carousel-button-bg: #fff;
+  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
+
+  --carousel-button-svg-width: 20px;
+  --carousel-button-svg-height: 20px;
+  --carousel-button-svg-stroke-width: 2.5;
+}
+
+.carousel__slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 80%;
+  height: 160px;
+  margin-right: 6px;
+
+  background-color: #eee;
+  border-radius: 6px;
+}
+```
+
+### Panzoom
+
+Add HTML markup
+
+```html
+<div id="myPanzoom" class="panzoom">
+  <img class="panzoom__content" src="https://lipsum.app/id/3/2000x1500" alt="" />
+</div>
+```
+
+Initialise Panzoom
+
+```js
+const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), {
+  // Your options go here
+});
+```
+
+Optionally, use CSS to customize container
+
+```css
+.panzoom {
+  width: 400px;
+  height: 300px;
+}
+```
+
+## License
+
+This is commercial software. See LICENSE.md for more info.