Installation

Add SuhuFramework to any static site or PHP app with two files. Components initialize automatically on DOMContentLoaded — no build step required.

1. Copy the framework files

Place these files in your project (paths relative to your HTML entry point). Use the minified builds in production:

your-project/
├── suhu-framework.min.css   ← production (minified styles + theme tokens)
├── suhu-framework.min.js    ← production (minified components & utilities)
├── suhu-framework.css       ← optional source (development)
├── suhu-framework.js        ← optional source (development)
└── index.html

After editing suhu-framework.css or suhu-framework.js, regenerate minified files: ./scripts/build-min.sh

2. Include CSS and JavaScript

Add the minified stylesheet in <head> and the minified script before </body> with defer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <title>My App</title>
  <link rel="stylesheet" href="suhu-framework.min.css">
</head>
<body>
  <header>
    <nav class="navbar" aria-label="Main navigation">
      <!-- navbar markup -->
    </nav>
  </header>
  <main>
    <!-- your content -->
  </main>
  <script src="suhu-framework.min.js" defer></script>
</body>
</html>

3. Auto-initialization

SuhuFramework.init() runs on page load. It wires modals, dropdowns, offcanvas, tabs, accordion, carousel, date picker, theme picker, tables, popovers, and more. Re-run after dynamic DOM updates:

SuhuFramework.init();

4. Date picker

Calendar inputs are built into suhu-framework.min.css / suhu-framework.min.js. Add data-sf-date-picker on a text input (see Forms in the showcase):

<input type="text" class="form-control rounded"
       data-sf-date-picker
       data-sf-date-locale="id"
       data-sf-date-format="DD/MM/YYYY"
       readonly>

Re-init after dynamic markup: SFDatePicker.init() or SuhuFramework.init().

5. Navbar + mobile menu (Offcanvas)

On screens narrower than 992px, .navbar-nav is hidden. You must add an offcanvas panel and connect the hamburger:

  • Toggler: data-bs-toggle="offcanvas" + data-bs-target="#myNavOffcanvas"
  • Panel: <div id="myNavOffcanvas" class="offcanvas offcanvas-start">…</div>
  • Spacer: <div class="navbar-spacer"></div> below fixed navbar

Full copy-paste markup: includes/snippets/navbar-with-offcanvas.html or demo → Navbar → View code. Standalone component: Offcanvas section.

6. Checklist

  • Use semantic HTML: header, main, nav, one h1 per page.
  • Set type="button" on buttons that are not form submits.
  • Pair every form field with <label for="…">.
  • Add meta name="color-scheme" content="light dark" for native form controls in both themes.
  • Never ship a lone .navbar-toggler without a matching .offcanvas panel.

Next steps

Configure theme, direction, and CSS variables on the Configuration page, or browse the complete reference in the Full Guide.

Configuration → Showcase