Modern HTML/CSS/JS UI framework with familiar class names, zero-config initialization, light/dark/auto themes, and mobile-first components.
| Path | Description |
|---|---|
suhu-framework.css |
Full design system and components (source) |
suhu-framework.js |
Interactions, theme, carousel, date picker, tables, etc. (source) |
suhu-framework.min.css |
Minified CSS for production |
suhu-framework.min.js |
Minified JS for production |
index.html |
Live component showcase (open in a browser) |
demo.html |
Company profile demo — full page built with framework classes (mobile-first) |
guide.md |
Complete developer guide |
includes/ |
HTML documentation (installation, configuration, full guide) |
includes/snippets/ |
Copy-paste HTML snippets |
snippets/theme-init.html |
Optional <head> script to prevent theme flash |
scripts/ |
Maintainer dev tools (not required for production) |
<!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">
<!-- Optional: paste contents of snippets/theme-init.html here -->
<link rel="stylesheet" href="suhu-framework.min.css">
</head>
<body>
<main>
<button type="button" class="btn btn-primary">Hello</button>
</main>
<script src="suhu-framework.min.js" defer></script>
</body>
</html>No build step required for consumers. Ship suhu-framework.min.css and suhu-framework.min.js. After editing source files, maintainers run ./scripts/build-min.sh to regenerate minified builds.
Layout: .container uses wide horizontal inset (--sf-container-padding, up to 7rem on large screens). .container-fluid uses tighter --sf-gutter. Override both tokens in :root — see includes/configuration.html.
- Storage key:
localStorage['sf-theme-mode']→light|dark|auto - Resolved theme on
<html data-theme="light|dark"> - UI:
.sf-theme-pickerbuttons withdata-theme-mode-option, or[data-theme-toggle]cycle button - API:
SuhuFramework.setThemeMode('light'|'dark'|'auto'),SuhuFramework.getThemeMode()
- SuhuFramework — modals, offcanvas, tabs, accordions, toasts, tables, theme, RTL, etc.
- SFCarousel —
new SFCarousel('.selector', { slidesPerView, gridRows, autoplay, zoom, thumbnail, … }) - SFDatePicker — date picker with calendar popup
See guide.md for full API and markup examples.
- Chrome, Firefox, Safari, Edge (last two major versions)
- iOS Safari and Chrome for Android
- Uses progressive enhancement (
matchMedia,ResizeObserverwhere available)
- Showcase: open
index.html - Live demo: open
demo.html(company profile using TabBar, Offcanvas, Masthead, etc.) - Guide:
guide.md - HTML docs:
includes/installation.html,includes/configuration.html,includes/full-guide.html
Third-party assets (e.g. Google Fonts in CSS @import) follow their respective licenses.
See CHANGELOG.md.