Setup

Get Manifest with CDN links or copied from GitHub.

Overview

Manifest consists of:

• manifest.js script for your project's functionality.
• manifest.json for central management of your project.
• manifest.*.css stylesheets for your project's UX/UI.

The script and stylesheets are modular, designed to work alone or together to best suit your project. A project using all Manifest features would be setup like:

<!-- Meta -->
<link rel="manifest" href="/manifest.json">

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css">
<link rel="stylesheet" href="/manifest.theme.css">

manifest.json

Outside this framework, manifest.json is a common file for web applications to centrally store project-level metadata. It's stored in the root for automatic browser detection.

We leverage this file as a place to declare HTML components and local or cloud data sources. It can also be used as a data source itself to render content.

{
	// Web standard content
	"name": "My Project",
  	"short_name": "Project name",
	"description": "Lorem ipsum dolar sit amet.",
  	"start_url": "/",
  	"scope": "/",
  	"display": "standalone",
  	"orientation": "any",
  	"background_color": "#FFFFFF",
  	"icons": [
		{ "src": "/icons/192x192.png", "sizes": "192x192", "type": "image/png" },
		{ "src": "/icons/512x512.png", "sizes": "512x512", "type": "image/png" }
	],

	// Declarations for Manifest plugins
  	"components": [
		"components/home.html",
		"components/about.html"
  	],
  	"preloadedComponents": [
		"components/footer.html",
		"components/header.html",
		"components/logo.html"
  	],
  	"data": {
		"i18n": {
			"locales": "/translations.csv"
		}
  	}
}

If your project is not a downloadable web app, and does not include HTML components or data sources, manifest.json can be omitted.

Script

manifest.js dynamically loads Alpine JS and our plugins to make your project functional. Add the <script> tag anywhere in the HTML head or body (within index.html if routing).

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

<!-- Load only specified plugins -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js" 
		  data-plugins="components,router,utilities"></script>

<!-- Load all core plugins except ommitted ones -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js" 
		  data-omit="markdown,resize"></script>

<!-- Include Tailwind CSS -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js" 
		  data-tailwind></script>

The script loads:

• Manifest Plugins (latest versions) from our CDN. The optional data-plugins or data-omit attributes will include or omit comma-separated plugins—otherwise all are loaded by default.
• Alpine JS (latest version) from its CDN, unless it's been added separately to your project.
• Tailwind CSS (modified production version from our CDN) if the data-tailwind attribute is added.

Scripts load the latest version from CDN by default. Load a specified version by referencing it in the URL and with a data-version attribute for plugins:

<script src="https://cdn.jsdelivr.net/npm/mnfst@0.5.17/lib/manifest.min.js"
	data-version="0.5.17"></script>

Styles

Stylesheets are divided by UI category, available individually or bundled in manifest.css.

A separate manifest.theme.css can be downloaded from GitHub for local modification. It maintains CSS variables referenced by the other sheets if present, centralizing your project's visual identity. See theme for more.

Add the desired Manifest CSS files to the HTML head (within index.html if routing).

  <link rel="stylesheet" href="/manifest.theme.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css">

  <link rel="stylesheet" href="/manifest.theme.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.reset.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.buttons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.utilities.css">