Self-Hosting Guide

Host Focus UI assets on your own server for complete control over availability, performance, and offline usage.

When to Self-Host

Consider self-hosting if you need:

  • Guaranteed availability (no external CDN dependency)
  • Offline/air-gapped environments
  • Custom build with only specific components
  • Compliance with security policies blocking external resources

For most projects, using the CDN is recommended for simplicity and automatic caching.

Download Focus UI

Option 1: GitHub Releases (Recommended)

Download the latest release ZIP from GitHub, which includes all built assets:

Download Latest Release All Releases

The release ZIP contains:

Files 
focus-ui-vX.Y.Z/
├── focus-ui.css        # Complete CSS bundle
├── focus-ui.js         # UMD bundle (for browsers)
├── focus-ui.min.js     # Minified UMD bundle
└── focus-ui.esm.js     # ES Module bundle (for bundlers)

Option 2: npm Coming Soon

npm package is not yet published. Once available, you'll be able to install and copy assets:

Bash 
# Install (coming soon)
npm install focus-ui

# Copy to your public folder
cp node_modules/focus-ui/lib/focus-ui.css public/css/
cp node_modules/focus-ui/lib/focus-ui.min.js public/js/

Option 3: Direct CDN Download

Download individual files directly from the CDN:

Bash 
# Download latest version
curl -O https://cdn.focus-ui.de/latest/focus-ui.css
curl -O https://cdn.focus-ui.de/latest/focus-ui.min.js

# Or download a specific version
curl -O https://cdn.focus-ui.de/v1.11.0/focus-ui.css
curl -O https://cdn.focus-ui.de/v1.11.0/focus-ui.min.js

Server Setup

Directory Structure

Organize the files in your project:

Structure 
your-project/
├── public/
│   ├── css/
│   │   └── focus-ui.css
│   └── js/
│       └── focus-ui.min.js
└── index.html

HTML Setup

Reference your local files:

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>

  <!-- Focus UI CSS (local) -->
  <link rel="stylesheet" href="/css/focus-ui.css">
</head>
<body>
  <button class="focus-btn focus-btn-primary">Hello World</button>

  <!-- Focus UI JavaScript (local) -->
  <script src="/js/focus-ui.min.js"></script>
</body>
</html>

Dependencies

Zero Runtime Dependencies

Focus UI has no runtime dependencies. The CSS and JavaScript bundles are completely self-contained. You don't need jQuery, React, or any other library.

Documentation Site Dependencies

The documentation site you're viewing uses additional assets for icons and syntax highlighting. These are not required for Focus UI itself, but you may want them for your own documentation:

Asset Version Purpose CDN URL
Font Awesome 6.4.0 Icons cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
Prism.js 1.29.0 Syntax highlighting cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js
Clipboard.js 2.0.11 Copy to clipboard cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js

Bundler Integration Coming Soon

Once the npm package is published, you'll be able to import Focus UI directly in your bundler:

JavaScript 
// Import JavaScript (requires npm package)
import FocusUI from 'focus-ui'

// Or import specific components
import { Modal, Toast, Theme } from 'focus-ui'

// Use them
Toast.show({ type: 'success', message: 'It works!' })

Import CSS in your main stylesheet or entry point:

CSS / JavaScript 
/* In your CSS (requires npm package) */
@import 'focus-ui/lib/focus-ui.css';

/* Or in JavaScript (if your bundler supports it) */
import 'focus-ui/lib/focus-ui.css'

For now: Download from GitHub Releases and include the files directly in your project, or use the CDN with an import map.

Version Management

Checking for Updates

View available versions at cdn.focus-ui.de/versions.json:

JSON 
{
  "latest": "v1.11.0",
  "versions": [
    { "version": "v1.11.0", "published_at": "2025-01-24T..." },
    { "version": "v1.10.0", "published_at": "2025-01-20T..." },
    ...
  ]
}

Updating

When updating self-hosted files:

  1. Download the new version from GitHub Releases
  2. Replace your local CSS and JS files
  3. Clear any caches (browser, CDN, service worker)
  4. Test your application
Breaking Changes

Before updating major versions (e.g., v1.x to v2.x), check the release notes for breaking changes that may affect your application.

Caching Recommendations

Configure your server for optimal caching:

Nginx 
# Cache CSS and JS files for 1 year (immutable)
location ~* \.(css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}
Cache Busting

Include the version in your file path or query string for cache busting: 

<link rel="stylesheet" href="/css/focus-ui.css?v=1.11.0">

Next Steps

Getting Started

CDN installation and basic usage
Components

Browse all available components