ClaPat Framework Guidelines

Use this page only as a set of guidelines and rules for creating content on other pages. Do not edit or alter this page.

The framework ships with ~30 ready-made HTML pages, a functional base design, and an interactive component system built on Vanilla JS, GSAP, Lenis, and Three.js. You get the full source — inspect it, understand it, modify it.

No page builder, no CMS dependency, no Node.js. Download, open index.html in a browser, and you have a working website from the first minute.

Installation

ClaPat Framework requires no build step. Download the archive, extract, and open in a browser or local server.

Script loading order

Scripts must load in this exact order before the closing </body> tag. The slider engine must exist before common.js is parsed.

<!-- Libraries -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Flip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script src="js/preloader.js"></script>
<script src="core/slider.js"></script>
<script src="core/common.js"></script>
<script src="js/scripts.js"></script>
</body>

File structure

clapat-framework/
├── core/
│   ├── common.js       # framework, 9 sections
│   └── slider.js       # ClapatSlider engine
├── js/
│   ├── preloader.js    # preloader animation
│   └── scripts.js      # initialization + custom functions
├── css/
│   └── style.css       # all styles
└── index.html          # entry point

Quick Start

The two entry-point functions you need to understand: DOMContentLoaded for first load, and LoadViaAjax() for every subsequent AJAX page transition.

document.addEventListener("DOMContentLoaded", function() {
  initViewportEnvironment();
  initVideoBackground();

  window.onPreloaderComplete = function() {
    window.dispatchEvent(new Event('preloaderComplete'));
    HeroCaptionAnimation();
    HeroMediaAnimation();
    preloaderDone = true;
  }

  ScrollEngine();
  ScrollActions();
  PageHeroSection();
  PageContentLayout();
  TextAnimations();
  ComponentsLibrary();
  ClaPatMenu();
  CursorSetup();
  AjaxCore();

  CustomFunction(); // your code goes here
});

Typography

A clear typographic hierarchy built on DM Sans. Six heading levels, body styles, inline elements, and blockquotes.

Heading One — H1

Heading Two — H2

Heading Three — H3

Heading Four — H4

Heading Five — H5

Heading Six — H6

Lead paragraph. Larger text used as a subtitle or intro paragraph. Sets the scene before body copy begins.

Body text at 1rem with a line-height of 1.7. Comfortable for reading long documentation. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Small text — 0.875rem — used for captions, labels, and supplementary information.

Inline elements: inline code, bold text, italic text, strikethrough text, and hyperlinks use the accent color.

"Clean, modular code you own. No build process, no dependencies. Open index.html and edit."

— ClaPat Framework Philosophy

Buttons

Five variants, three sizes, and multiple states including a loading spinner.

Variants

Sizes

States

Button Group

Images

Responsive images with optional captions, aspect ratio variants, and lightbox support.

Default

With caption

Fixed aspect ratio

Bordered

Badges

Pill-shaped status indicators for version tags, labels, and state.

Variants

Sizes

Alerts

Four contextual alert types, all dismissible.

Tables

Sortable, striped, responsive. Click any column header to sort ascending or descending.

Code

Syntax-highlighted code blocks with line numbers, language labels, and one-click copy. Tokenizer handles JavaScript, HTML, CSS, JSON, and Bash — no external library.

JavaScript

// Initialize scroll engine with Lenis
async function initScrollEngine() {
  window.lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    smoothWheel: true,
    wheelMultiplier: 1,
  });

  gsap.ticker.add((time) => {
    window.lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);
  return true;
}

JSON

{
  "model": "claude-sonnet-4-20250514",
  "max_tokens": 1024,
  "temperature": 0.7,
  "stream": false,
  "messages": [
    {
      "role": "user",
      "content": "Explain AJAX page transitions"
    }
  ]
}

CSS

/* Hero section layout */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--spacing-4) var(--spacing-6);
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero-caption {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

Lists

Unordered

• AJAX page transitions — pages load without reloads
• Smooth scroll powered by Lenis
• Custom cursor with contextual hover states
• Cinematic sliders with WebGL and parallax

Ordered

1. Download and extract the framework archive
2. Open index.html in your browser
3. Edit js/scripts.js with your custom functions
4. Replace placeholder content with your own
5. Deploy to your hosting provider

Checklist

• Review file structure
• Configure preloader animation
• Customize color tokens in style.css
• Replace hero content and images
• Set up HelpDesk support ticket

Definition List

common.js

The main framework file. Contains all 9 sections of core functionality, from scroll engine to AJAX transitions.

slider.js

The ClapatSlider engine. Must load before common.js. Provides destroy and autoplay utility functions.

scripts.js

The only file clients are expected to modify. Contains initialization logic and custom function slots.

Tree View

Interactive file tree with keyboard navigation. Arrow keys to move, → to expand, ← to collapse, Enter to select.

Tabs

Animated indicator slides to the active tab. Keyboard navigable with arrow keys.

Accordion

FAQ-style collapsible. One item open at a time. Smooth max-height animation.

Changelog

All notable changes to the ClaPat Framework and templates.

Keyboard Shortcuts

Global keyboard shortcuts available throughout the documentation.

API Reference

Core functions exposed on the global scope from common.js and scripts.js.

Scroll

// Disable scroll (e.g. while menu is open)
disableScroll();

// Re-enable scroll
enableScroll();

// Scroll engine — must run once per page load
ScrollEngine();

// All scroll-related actions: down arrow, back to top, anchor links
ScrollActions();

AJAX

// Bootstrap AJAX — run once at DOMContentLoaded
AjaxCore();

// Cleanup stale instances before re-initializing
CleanupAfterAjax();

// Called automatically at end of every AJAX transition
AjaxTransitionComplete();

Content Authoring Guide

Rules and conventions for writing new documentation pages. Every element has a specific role — follow these guidelines to keep the docs consistent and scannable.

Page structure

Every documentation page is a single <section> with a unique id that matches the sidebar nav link. The id is also what the TOC and scroll spy use — it must be lowercase, hyphenated, and unique across the entire file.

<section id="my-new-page" class="doc-section">
  <h2>Page Title</h2>
  <p class="lead">One sentence that explains what this page covers.</p>

  <!-- content here -->

</section>

After adding the section, add the matching nav link in the sidebar #sidebarNav inside the correct .nav-group:

<li><a href="#my-new-page" class="nav-link">My New Page</a></li>

Headings

Use only one <h1> per page — the main page title, on the very first page of the docs site only. All other pages start with <h2>. Never skip levels.

Paragraphs and inline text

The first paragraph after an <h2> should use class="lead" — it renders larger and sets context before the detail. Only one lead paragraph per page.

Use inline <code> for any file name, function name, class name, HTML attribute, or terminal command that appears inside a sentence. Use <strong> for genuinely important terms, not for decoration. Use <em> for titles of things or soft emphasis. Avoid <del> in new content — it exists for changelog diffs only.

Code blocks

Every code block needs three things: a data-lang attribute on the wrapper (for syntax highlighting), a .code-toolbar with the language label and copy button, and a <pre><code> pair with the actual code.

<div class="code-block" data-lang="javascript">
  <div class="code-toolbar">
    <span class="code-lang">JavaScript</span>
    <button class="copy-btn" aria-label="Copy code">...</button>
  </div>
  <pre><code>// your code here</code></pre>
</div>

Accepted values for data-lang: javascript, html, css, json, bash. Any other value renders the block unstyled but still functional.

Escape HTML entities inside <pre><code> manually: < for <, > for >, & for &. The tokenizer receives raw text — unescaped angle brackets will break the HTML.

Alerts

Use alerts for information that a reader must not miss. Four types — choose based on consequence, not tone.

Lists

Use the right list type for the content. If the items are unordered bullet points, use doc-list. If the order matters, use doc-list-ordered. If it's a task checklist, use doc-checklist. If it's terms with definitions, use doc-definition-list.

<!-- Unordered -->
<ul class="doc-list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

<!-- Ordered -->
<ol class="doc-list-ordered">
  <li>Step one</li>
  <li>Step two</li>
</ol>

<!-- Checklist -->
<ul class="doc-checklist">
  <li><label><input type="checkbox"> Unchecked item</label></li>
  <li class="checked"><label><input type="checkbox" checked> Checked item</label></li>
</ul>

<!-- Definition -->
<dl class="doc-definition-list">
  <dt>Term</dt>
  <dd>Definition of the term.</dd>
</dl>

Badges

Badges are inline labels — use them inside table cells, list items, and changelog entries. Never use a badge as a standalone block element or as a replacement for an alert.

Add badge-sm alongside the variant class for the smaller size. Use badge-sm inside table cells and list items; use the default size when the badge stands alone.

<span class="badge badge-success">New</span>
<span class="badge badge-info badge-sm">Fixed</span>

Accordion

Use the accordion for FAQ content and for collapsing secondary information that only some readers need. Do not use it to hide content that everyone needs to read — that content should be in the body.

The data-single="true" attribute on the wrapper enforces one-item-open behavior. Remove it if multiple items can be open at once. To render an item open by default, add class="accordion-item open" and set aria-expanded="true" on its header button.

<div class="accordion" data-single="true">
  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false">
      Question text
      <svg class="accordion-chevron" ...>...</svg>
    </button>
    <div class="accordion-body">
      <p>Answer text.</p>
    </div>
  </div>
</div>

Tabs

Use tabs to present the same concept in multiple formats — for example, code examples in different languages, or Overview / Props / Examples for a component. Do not use tabs to split a linear reading flow — use headings instead.

Each tab button needs: role="tab", aria-selected, aria-controls pointing to the panel id, and tabindex (0 for active, -1 for the rest). The active tab gets class="tab-btn active". The active panel gets class="tab-panel active". Always include the .tab-indicator div as the last child of .tabs — JS positions it automatically.

<div class="tabs" role="tablist">
  <button class="tab-btn active" role="tab" aria-selected="true"
          aria-controls="panel-a" id="tab-a" tabindex="0">Tab A</button>
  <button class="tab-btn" role="tab" aria-selected="false"
          aria-controls="panel-b" id="tab-b" tabindex="-1">Tab B</button>
  <div class="tab-indicator" aria-hidden="true"></div>
</div>
<div class="tab-panels">
  <div class="tab-panel active" id="panel-a" role="tabpanel" aria-labelledby="tab-a">
    <p>Content for Tab A.</p>
  </div>
  <div class="tab-panel" id="panel-b" role="tabpanel" aria-labelledby="tab-b">
    <p>Content for Tab B.</p>
  </div>
</div>

Changelog entries

Changelog releases go inside .changelog wrapper. Each release is a .changelog-release div containing a .changelog-meta header and a .changelog-items list. Use the badge conventions strictly — badge-success for New, badge-info for Fixed, badge-warning for Deprecated, badge-danger for Breaking. Always use badge-sm inside list items.

<div class="changelog">
  <div class="changelog-release">
    <div class="changelog-meta">
      <strong class="changelog-version">v3.0.0</strong>
      <span class="changelog-date">January 2025</span>
    </div>
    <ul class="changelog-items">
      <li><span class="badge badge-success badge-sm">New</span> Feature description</li>
      <li><span class="badge badge-info badge-sm">Fixed</span> Bug description</li>
      <li><span class="badge badge-danger badge-sm">Breaking</span> What changed and why</li>
    </ul>
  </div>
</div>

Blockquotes

Use <blockquote> for direct quotes, design principles, or a single key statement you want to stand out visually. One blockquote per section maximum. Always wrap the text in <p>. Optionally add a <cite> for attribution.

<blockquote>
  <p>"The statement you want to highlight."</p>
  <cite>— Source or author</cite>
</blockquote>

Horizontal rules

Use <hr> to visually separate major sub-sections within a page — equivalent to a section break. Do not use it between every H3, only between significantly different topics. Never use <hr> at the very start or end of a section.

Keyboard shortcuts reference

When documenting keyboard shortcuts inline, always use the <kbd> element — never <code> or plain text. Multiple keys in a combination are separate <kbd> elements next to each other with a + in between.

Press <kbd>/</kbd> to focus search.
Use <kbd>Ctrl</kbd>+<kbd>K</kbd> to open the command palette.

Quick reference — element decision tree