Installing Unpoly
Unpoly consists of one JavaScript file and one CSS file
that you can require in your <head>.
It has no dependencies and doesn't require a build tool.
Unpoly works with any server that can render HTML, or with static sites.
You do not need additional software on your backend.
Contents
Initialization
Include Unpoly before your own JavaScripts and stylesheets:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/unpoly@3.14.3/unpoly.css"> <!-- mark-line -->
<script src="https://cdn.jsdelivr.net/npm/unpoly@3.14.3/unpoly.js" defer></script> <!-- mark-line -->
<link rel="stylesheet" href="your-styles.css" />
<script src="your-scripts.js" defer></script>
</head>
<body>
<!-- Use Unpoly attributes in your HTML -->
<a href="/page" up-follow>Follow me with Unpoly<a> <!-- mark: up-follow -->
</body>
</html>
Unpoly initializes on DOMContentLoadedboot Unpoly manually at a time of your choice.
Installing from npm
Instead of loading Unpoly from a CDN, you can install it as an npm package :
npm install unpoly --save
Now import Unpoly before your own JavaScripts and stylesheets:
import 'unpoly/unpoly.js' // mark-line
import 'unpoly/unpoly.css' // mark-line
import './your-scripts.js'
import './your-styles.css'
JavaScript API
Most of Unpoly's functionality is provided as new attributes
that you can add to any HTML element.
Unpoly also provides a JavaScript API to extend Unpoly or integrate your custom scripts .
Unpoly's JavaScript API can be accessed through the window.up global, without an explicit import:
up.compiler('.click-to-hide', function(element) {
let hide = () => element.style.display = 'none'
element.addEventListener('click', hide)
})Optional extensions
You know have everything you need to start using Unpoly!
We provide a number of optional extensions:
