Layout
App Layout
Structural classes for navbar, sidebar, header, footer, and bottom navigation.
Colorffy CSS ships the styling for full app scaffolding. These classes back the matching Vue components in Colorffy UI — use the components for behavior, or the classes directly if you're CSS-only.
Navbar
.navbar (top bar) with .nav-sticky for sticky positioning, plus regions like .menu-tools-container, .popover-menu-container, and .sidebar-collapse-button.
→ Component: Navbar
Sidebar / navigation drawer
.navigation-drawer with modifiers .drawer-bordered, .drawer-rail, .drawer-open / .drawer-closed, and .drawer-overlay for the mobile scrim. Regions: .drawer-header, .drawer-body, .drawer-footer.
→ Component: Sidebar
Bottom navigation bar
.navigation-bar — a mobile / island bottom navigation bar.
→ Component: Navigation Bar
Header & footer
.header-container/.header— page header band.footer— page footer
These structural pieces are styled but behavior-light. For interactivity (toggling the drawer, sticky state, dropdowns), use the Colorffy UI components, which wire it all up.