Full Guide

Complete reference for SuhuFramework — familiar class names (.btn, .card, .modal), SuhuFramework visuals, one CSS file, one JS file, zero build step. For markdown export, use guide.md.

Components (demo)

Jump to a section in the interactive showcase:

Layout & navigation

• Grid — .container (wide inset --sf-container-padding, 7rem @≥992px), .container-fluid (tight --sf-gutter), .row, .col-*
• Navbar — desktop .navbar-nav; mobile requires Offcanvas + wired toggler (see Navbar View code)
• Offcanvas — data-bs-toggle="offcanvas", .offcanvas-start, submenus with data-toggle
• Breadcrumb, Pagination, Scrollspy

Content & feedback

• Typography — headings, .lead, display sizes
• Cards, Alerts, Badges, Chips, Progress, Spinners
• Carousel — touch/swipe, space-between, slides-per-view, grid, autoplay, thumbs, zoom
• Toast — SuhuFramework.showToast() or data-toast-*

Forms & inputs

• Forms — .form-control, .form-select, checkbox, radio, switch, range
• Input group, Floating labels, Validation
• Date picker (add-on) — data-sf-date-picker

Overlays

• Modals — data-modal-target, static backdrop, keyboard options
• Offcanvas — data-bs-toggle="offcanvas", nested mobile menus
• Dropdowns — nested .submenu on desktop
• Popovers — data-bs-toggle="popover"
• Tooltip — data-tooltip (CSS-only)

Utilities

Spacing, display, flex, colors, borders, shadows, and more — see the Utilities group in the demo sidebar (.d-flex, .gap-3, .rounded, .shadow-sm, logical margin/padding, etc.).

JavaScript API

// Global (alias: window.Suhu)
SuhuFramework.init();

// Theme & direction
SuhuFramework.setThemeMode('dark');
SuhuFramework.setDirection('rtl');

// Overlays
SuhuFramework.openModal(el);
SuhuFramework.closeModal(el);
SuhuFramework.openOffcanvas('myNavOffcanvas');
SuhuFramework.closeOffcanvas('myNavOffcanvas');
SuhuFramework.showToast({ title, message, type, duration, position });
SuhuFramework.closePopover();

// Tables
SuhuFramework.refreshTable(document.querySelector('.table-datatable'));

guide.md contents

The markdown guide mirrors this reference with copy-paste examples for every section: Getting Started, Theme, Navbar, Grid, all components, Utilities, Animations, JavaScript API, CSS Variables, and changelog.