Athena UI

Athena UI is a polished, static Bootstrap 5.3.8 admin template for designers and developers who want production-minded dashboard screens without adopting a build pipeline. It ships as plain HTML, CSS, and JavaScript, with local assets only: no Sass step, no Node requirement, no bundler, and no lock-in.

If Athena UI saves you time, please star the project on GitHub. Stars help designers and developers discover the template.

Why Use Athena

• Designer-friendly pages with consistent spacing, cards, responsive rows, dashboards, app screens, auth flows, docs, and component examples.
• Developer-friendly static files that can be opened directly, served from any static host, or copied into a backend/framework project.
• Mobile-responsive layouts across the full page set, with dashboard grids, tables, collapsible sidebar groups, chat, kanban, catalogue, and documentation views adapting at common breakpoints.
• Local Bootstrap Icons, Chart.js, DataTables, jQuery, JSZip, pdfmake, and Inter font assets.
• Light, dark, and high-contrast themes with persisted user preference.
• Component pages include closed-by-default example code accordions with clipboard copy controls.
• Utility coverage includes .fs-7 and .fs-8 for smaller interface text, plus outline badge variants such as .badge-outline-primary.
• Accessibility and security documentation that explains the static frontend guardrails and the backend responsibilities Athena deliberately leaves to your application.

What's Included

• 85 HTML files across the root welcome page, dashboards, applications, account screens, authentication, components, and documentation.
• 49 product and admin pages, including finance, operations, e-commerce, SaaS, support, security, project, analytics, content, users, billing, chat, kanban, invoices, settings screens, and the page directory.
• 20 component pages covering Bootstrap foundations, forms, tables, charts, modals, dropdowns, toasts, typography, navigation, alerts, badges, cards, filters, and layout patterns.
• 15 documentation pages covering setup, file structure, layouts, theming, authentication, accessibility, security, tables, charts, integrations, changelog, licence, and credits.

Quick Start

Open index.html directly in a browser, or serve the folder from any static web server:

python -m http.server 8000

Then visit http://127.0.0.1:8000/.

Entrypoints

• CSS: assets/css/athena.css, assets/css/athena-layout.css, assets/css/athena-utilities.css, assets/css/athena-docs.css
• JavaScript: assets/js/athena-theme-init.js, assets/js/athena.js, assets/js/athena-charts.js, assets/js/athena-tables.js, assets/js/athena-docs.js
• Public API: window.Athena.init(), Athena.theme.set(mode), Athena.theme.get(), Athena.sidebar.set(state), Athena.sidebar.get(), Athena.tables.init(selector, options), Athena.charts.create(canvas, config)
• Local storage keys: athena-theme for light, dark, or contrast; athena-sidebar for open, closed, or mini
• Sidebar section headings use data-athena-nav-section-toggle; component snippet copy buttons use data-athena-copy.

Responsive Foundation

Athena uses a shared row and column system, Bootstrap responsive utilities, table wrappers, and page-specific grid breakpoints. The templates are designed for common mobile, tablet, and desktop widths; teams should still run browser-based visual QA after integrating real content and application data.

Wide data surfaces remain usable through intentional inner scrolling where it is the better pattern, such as rich tables and the 24-hour activity heatmap.

Security And Accessibility

Athena avoids inline event handlers, keeps its own variable text insertion text-safe, uses local runtime assets, and documents authentication, authorisation, CSRF, CSP, rate limiting, audit logging, and session management as backend-owned responsibilities. It is not, by itself, a WCAG 2.2 conformance claim or an OWASP assurance report.

Templates include semantic landmarks, skip links, visible focus states, labels, autocomplete attributes, reduced-motion support, responsive layouts, table captions, scoped table headers, chart labels, and dark/high-contrast themes. See docs/accessibility.html and docs/security.html for the exact frontend evidence, limits, and required manual/backend testing.

Licence

Athena UI is distributed under the MIT Licence. Third-party libraries, fonts, and icon assets retain their own notices in THIRD-PARTY-NOTICES.md and docs/credits.html.