Repository: coreui/coreui-free-bootstrap-admin-template Branch: main Commit: 684f37a23b70 Files: 141 Total size: 2.7 MB Directory structure: gitextract_al_e0b_v/ ├── .babelrc.js ├── .browserslistrc ├── .cursorrules ├── .editorconfig ├── .gitattributes ├── .github/ │ ├── CONTRIBUTING.md │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ ├── config.yml │ │ └── feature_request.md │ ├── ISSUE_TEMPLATE.md │ ├── SUPPORT.md │ └── stale.yml ├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── .stylelintignore ├── .stylelintrc ├── ARCHITECTURE.md ├── DEVELOPMENT.md ├── LICENSE ├── README.md ├── build/ │ ├── change-version.mjs │ ├── postcss.config.mjs │ ├── pug.mjs │ └── vendors.mjs ├── eslint.config.mjs ├── nodemon.json ├── package.json └── src/ ├── assets/ │ └── favicon/ │ ├── browserconfig.xml │ └── manifest.json ├── js/ │ ├── charts.js │ ├── color-modes.js │ ├── colors.js │ ├── config.js │ ├── main.js │ ├── popovers.js │ ├── toasts.js │ ├── tooltips.js │ └── widgets.js ├── pug/ │ ├── _layout/ │ │ ├── default.pug │ │ └── pages.pug │ ├── _mixins/ │ │ ├── breadcrumb.pug │ │ ├── callout-custom.pug │ │ ├── callout.pug │ │ ├── docs-components.pug │ │ └── example.pug │ ├── _partials/ │ │ ├── banner.pug │ │ ├── docs-icons.pug │ │ ├── footer.pug │ │ ├── head.pug │ │ ├── header.pug │ │ ├── scripts.pug │ │ └── sidebar.pug │ └── views/ │ ├── 404.pug │ ├── 500.pug │ ├── base/ │ │ ├── accordion.pug │ │ ├── breadcrumb.pug │ │ ├── cards.pug │ │ ├── carousel.pug │ │ ├── collapse.pug │ │ ├── list-group.pug │ │ ├── navs-tabs.pug │ │ ├── pagination.pug │ │ ├── placeholders.pug │ │ ├── popovers.pug │ │ ├── progress.pug │ │ ├── spinners.pug │ │ ├── tables.pug │ │ └── tooltips.pug │ ├── blank.pug │ ├── buttons/ │ │ ├── button-group.pug │ │ ├── buttons.pug │ │ └── dropdowns.pug │ ├── charts.pug │ ├── colors.pug │ ├── forms/ │ │ ├── checks-radios.pug │ │ ├── floating-labels.pug │ │ ├── form-control.pug │ │ ├── input-group.pug │ │ ├── layout.pug │ │ ├── range.pug │ │ ├── select.pug │ │ └── validation.pug │ ├── icons/ │ │ ├── coreui-icons-brand.pug │ │ ├── coreui-icons-flag.pug │ │ └── coreui-icons-free.pug │ ├── index.pug │ ├── login.pug │ ├── notifications/ │ │ ├── alerts.pug │ │ ├── badge.pug │ │ ├── modals.pug │ │ └── toasts.pug │ ├── register.pug │ ├── typography.pug │ └── widgets.pug ├── scss/ │ ├── examples.scss │ ├── style.scss │ └── vendors/ │ └── simplebar.scss └── views/ ├── 404.html ├── 500.html ├── base/ │ ├── accordion.html │ ├── breadcrumb.html │ ├── cards.html │ ├── carousel.html │ ├── collapse.html │ ├── list-group.html │ ├── navs-tabs.html │ ├── pagination.html │ ├── placeholders.html │ ├── popovers.html │ ├── progress.html │ ├── spinners.html │ ├── tables.html │ └── tooltips.html ├── blank.html ├── buttons/ │ ├── button-group.html │ ├── buttons.html │ └── dropdowns.html ├── charts.html ├── colors.html ├── forms/ │ ├── checks-radios.html │ ├── floating-labels.html │ ├── form-control.html │ ├── input-group.html │ ├── layout.html │ ├── range.html │ ├── select.html │ └── validation.html ├── icons/ │ ├── coreui-icons-brand.html │ ├── coreui-icons-flag.html │ └── coreui-icons-free.html ├── index.html ├── login.html ├── notifications/ │ ├── alerts.html │ ├── badge.html │ ├── modals.html │ └── toasts.html ├── register.html ├── typography.html └── widgets.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc.js ================================================ module.exports = { presets: [ [ '@babel/preset-env', { loose: true, bugfixes: true, modules: false } ] ] }; ================================================ FILE: .browserslistrc ================================================ # https://github.com/browserslist/browserslist#readme >= 0.5% last 2 major versions not dead Chrome >= 60 Firefox >= 60 Firefox ESR iOS >= 12 Safari >= 12 not Explorer <= 11 ================================================ FILE: .cursorrules ================================================ # CoreUI Free Bootstrap Admin Template - AI Context ## Project Overview This is a Bootstrap 5 admin dashboard template built with CoreUI components. It uses Pug templating, Sass for styles, and vanilla JavaScript for interactivity. ## Critical Rules ### Component Library - **ALWAYS use CoreUI Bootstrap components**: https://coreui.io/bootstrap/docs/ - **NEVER use Tailwind CSS** - this project uses Bootstrap 5 and custom Sass - Use CoreUI's CSS classes and JavaScript components from `@coreui/coreui` package - Reference the official CoreUI docs for component syntax and options ### Technology Stack - **HTML Generation**: Pug templates (NOT raw HTML) - **Styling**: Sass/SCSS with Bootstrap 5 (NO Tailwind) - **JavaScript**: Vanilla JS with ES6 modules (NO frameworks like React/Vue) - **Build System**: npm scripts with Babel, PostCSS, and custom build scripts ## Code Conventions ### JavaScript - **No semicolons** - enforced by ESLint - **2-space indentation** - **ES6 modules** with import/export - **Strict mode** enabled - Use `/* global VariableName */` for external libraries - Follow XO ESLint config with Unicorn plugin rules ### File Structure ``` src/ ├── js/ # JavaScript modules (keep small and focused) ├── scss/ # Sass stylesheets (imports Bootstrap and CoreUI) ├── pug/ # Pug templates (source of truth for HTML) │ ├── _layout/ # Base layouts │ ├── _partials/ # Reusable components │ ├── _mixins/ # Pug mixins │ └── views/ # Page templates ├── assets/ # Images, icons, static files └── views/ # Compiled HTML (auto-generated, don't edit) ``` ### Pug Templates - Use `extends ../_layout/default.pug` for new pages - Override blocks: `block content`, `block scripts` - Use mixins from `_mixins/` for common patterns - Follow existing naming conventions for consistency ### CSS/Sass - Use Bootstrap utilities first before custom CSS - Use CSS custom properties (CSS variables) for theming - Use Bootstrap/CoreUI class naming conventions (e.g., `.sidebar`, `.header`, `.card-title`) - Support dark mode via `[data-coreui-theme="dark"]` - **Never use**: `border-radius`, `transition`, `calc()` directly (Stylelint enforced) ### Naming Conventions - **Files**: kebab-case (e.g., `color-modes.js`, `_header.pug`) - **CSS classes**: Bootstrap/CoreUI conventions (e.g., `.btn-primary`, `.card-header`) - **JavaScript variables**: camelCase - **Constants**: UPPER_SNAKE_CASE ## Development Workflow ### Adding New Pages 1. Create Pug template in `src/pug/views/` 2. Extend base layout: `extends ../_layout/default.pug` 3. Add page-specific styles in `src/scss/` if needed 4. Add page-specific JS in `src/js/` if needed 5. Run `npm start` to compile and preview ### Adding New Components 1. **First check CoreUI docs**: https://coreui.io/bootstrap/docs/ 2. Use CoreUI component markup in Pug files 3. Import required CoreUI JS modules if needed 4. Style using CoreUI/Bootstrap classes, not custom CSS 5. Create Pug mixin in `src/pug/_mixins/` for reusable patterns ### Build Commands - `npm start` - Development with live reload - `npm run build` - Production build - `npm run watch-css` - Watch Sass changes - `npm run watch-js` - Watch JavaScript changes - `npm run watch-pug` - Watch Pug changes ## Code Quality ### Linting - **JavaScript**: ESLint with XO config (flat config format) - **Styles**: Stylelint with Bootstrap config - **Formatting**: Prettier for HTML output - Run `npm run lint` before committing ### Comments and Documentation - **JSDoc required** for all functions with parameters - Explain "why", not "what" - Document complex template logic in Pug files - Add file-level comments explaining module purpose ### Git Commits Follow semantic commit format: - `feat:` - New feature - `fix:` - Bug fix - `docs:` - Documentation changes - `style:` - Code style changes (formatting) - `refactor:` - Code refactoring - `test:` - Test additions/changes - `chore:` - Build/tooling changes ## Common Patterns ### Chart Integration ```javascript /* global Chart */ import { getStyle } from '@coreui/utils' const chart = new Chart(ctx, { type: 'line', data: { /* ... */ }, options: { /* ... */ } }) ``` ### Theme Switching ```javascript import { ColorModeStorageManager } from '@coreui/coreui/js/color-modes' document.addEventListener('ColorSchemeChange', () => { // React to theme changes }) ``` ### Pug Mixin Usage ```pug include _mixins/breadcrumb +breadcrumb(['Home', 'Components', 'Buttons']) ``` ## AI Assistance Guidelines ### When AI Should - Use CoreUI Bootstrap components from official docs - Generate Pug templates, not raw HTML - Follow existing patterns in the codebase - Add JSDoc comments to new JavaScript functions - Respect ESLint/Stylelint rules - Suggest npm scripts for tasks ### When AI Should NOT - Use Tailwind CSS classes - Use React/Vue/Angular components - Edit compiled files in `dist/` or `src/views/` - Add unnecessary dependencies - Break existing build pipeline - Ignore linting errors ## External Dependencies ### Core Libraries - `@coreui/coreui` - CoreUI component library - `chart.js` - Charts and graphs - `simplebar` - Custom scrollbars ### Build Tools - `sass` - CSS preprocessor - `@babel/core` - JavaScript transpiler - `pug` - HTML templating - `postcss` - CSS post-processing - `browser-sync` - Live reload server ## Browser Support Defined in `.browserslistrc`: - Last 1 major version of modern browsers - Chrome, Firefox, Edge, Safari - iOS Safari, Chrome Android ## Resources - CoreUI Docs: https://coreui.io/bootstrap/docs/ - Chart.js Docs: https://www.chartjs.org/ - Pug Docs: https://pugjs.org/ ## Project Maintainer Notes - License: MIT - Version: 5.3.0 - Repository: https://github.com/coreui/coreui-free-bootstrap-admin-template ================================================ FILE: .editorconfig ================================================ # Editor configuration, see http://editorconfig.org root = true [*] charset = utf-8 end_of_line = lf indent_size = 2 indent_style = space insert_final_newline = true trim_trailing_whitespace = true [*.md] max_line_length = off trim_trailing_whitespace = false [*.pug] trim_trailing_whitespace = false ================================================ FILE: .gitattributes ================================================ # Enforce Unix newlines * text=auto eol=lf # Don't diff or textually merge source maps *.map binary ================================================ FILE: .github/CONTRIBUTING.md ================================================ # Contributing to CoreUI Looking to contribute something to CoreUI? **Here's how you can help.** Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features. ## Using the issue tracker The [issue tracker](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions: * Please **do not** use the issue tracker for personal support requests. * Please **do not** post comments consisting solely of "+1" or ":thumbsup:". Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) instead. ## Bug reports A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks! Guidelines for bug reports: 0. **Validate and lint your code** — to ensure your problem isn't caused by a simple error in your own code. 1. **Use the GitHub issue search** — check if the issue has already been reported. 2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository. 3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template. A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs. Example: > Short and descriptive example bug report title > > A summary of the issue and the browser/OS environment in which it occurs. If > suitable, include the steps required to reproduce the bug. > > 1. This is the first step > 2. This is the second step > 3. Further steps, etc. > > `` - a link to the reduced test case > > Any other information you want to share that is relevant to the issue being > reported. This might include the lines of code that you have identified as > causing the bug, and potential solutions (and your opinions on their > merits). ## Feature requests Feature requests are welcome. Before opening a feature request, please take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible. ## Pull requests Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits. **Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project. Adhering to the following process is the best way to get your work included in the project: 1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: ```bash # Clone your fork of the repo into the current directory git clone https://github.com//coreui.git # Navigate to the newly cloned directory cd coreui # Assign the original repo to a remote called "upstream" git remote add upstream https://github.com/coreui/coreui.git ``` 2. If you cloned a while ago, get the latest changes from upstream: ```bash git checkout master git pull upstream master ``` 3. Create a new topic branch (off the main project development branch) to contain your feature, change, or fix: ```bash git checkout -b ``` 4. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) or your code is unlikely to be merged into the main project. Use Git's [interactive rebase](https://help.github.com/articles/interactive-rebase) feature to tidy up your commits before making them public. 5. Locally merge (or rebase) the upstream development branch into your topic branch: ```bash git pull [--rebase] upstream master ``` 6. Push your topic branch up to your fork: ```bash git push origin ``` 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `master` branch. **IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT License](LICENSE). ### Semantic Git commit messages Inspired by Sparkbox's awesome article on [semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages). Please use following commit message format. * chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'``` * docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'``` * feat (new feature) -> ```git commit -m 'feat: commit-message-here'``` * fix (bug fix) -> ```git commit -m 'fix: commit-message-here'``` * refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'``` * style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'``` * test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'``` ## Code guidelines ### HTML [Adhere to the Code Guide.](http://codeguide.co/#html) - Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags). - Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`. - Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility. ### CSS [Adhere to the Code Guide.](http://codeguide.co/#css) - When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast). - Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details. ### JS - No semicolons (in client-side JS) - 2 spaces (no tabs) - strict mode - "Attractive" - Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded. ## License By contributing your code, you agree to license your contribution under the [MIT License](LICENSE). ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms custom: "https://coreui.io/pricing?support=bootstrap" open_collective: coreui ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: Bug report about: Tell us about a bug you may have identified in CoreUI. title: '' labels: '' assignees: '' --- Before opening: - [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue) - [Validate](https://html5.validator.nu/) any HTML to avoid common problems - Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md) Bug reports must include: - Operating system and version (Windows, macOS, Android, iOS) - Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser) - A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ contact_links: - name: Ask a question url: https://community.coreui.io/ about: Ask and discuss questions with other CoreUI community members ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.md ================================================ --- name: Feature request about: Suggest an idea for a new feature in CoreUI. title: '' labels: feature assignees: '' --- Before opening: - [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue) - Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md) Feature requests must include: - As much detail as possible for what we should add and why it's important to Bootstrap - Relevant links to prior art, screenshots, or live demos whenever possible ================================================ FILE: .github/ISSUE_TEMPLATE.md ================================================ Before opening an issue: - [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-bootstrap-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue) - Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs - Read the [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md) When asking general "how to" questions: - Please do not open an issue here When reporting a bug, include: - Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile) - Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser) - Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) When suggesting a feature, include: - As much detail as possible for what we should add and why it's important to CoreUI Admin Template - Relevant links to prior art, screenshots, or live demos whenever possible ================================================ FILE: .github/SUPPORT.md ================================================ ### Bug reports See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports. ### How-to For general troubleshooting or help getting started: - Join [the official community](https://community.coreui.io/). - Ask and explore Stack Overflow with the [`coreui`](https://stackoverflow.com/questions/tagged/coreui) tag. ================================================ FILE: .github/stale.yml ================================================ # Number of days of inactivity before an issue becomes stale daysUntilStale: 360 # Number of days of inactivity before a stale issue is closed daysUntilClose: 7 # Issues with these labels will never be considered stale exemptLabels: - pinned - security # Label to use when marking an issue as stale staleLabel: wontfix # Comment to post when marking an issue as stale. Set to `false` to disable markComment: > This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. # Comment to post when closing a stale issue. Set to `false` to disable closeComment: false ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* lerna-debug.log* # eslint cache .eslintcache # Numerous always-ignore extensions *.diff *.err *.log *.orig *.rej *.swo *.swp *.vi *.zip *~ # OS or Editor folders ._* .cache .DS_Store .idea .project .settings .tmproj *.esproj *.sublime-project *.sublime-workspace nbproject Thumbs.db /.vscode/ # Komodo .komodotools *.komodoproject # Folders to ignore /node_modules/ /dist/ ================================================ FILE: .prettierignore ================================================ # Ignore artifacts: build coverage #ignore source src ================================================ FILE: .prettierrc.json ================================================ { "overrides": [ { "files": "*.html", "options": { "parser": "html" } } ] } ================================================ FILE: .stylelintignore ================================================ **/*.min.css **/dist/ **/vendor/ ================================================ FILE: .stylelintrc ================================================ { "extends": [ "stylelint-config-twbs-bootstrap" ], "reportInvalidScopeDisables": true, "reportNeedlessDisables": true, "overrides": [ { "files": "**/*.scss", "rules": { "declaration-property-value-disallowed-list": { "border": "none", "outline": "none" }, "function-disallowed-list": [ "calc", "lighten", "darken" ], "property-disallowed-list": [ "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "transition" ], "scss/dollar-variable-default": [ true, { "ignore": "local" } ], "scss/selector-no-union-class-name": true } } ] } ================================================ FILE: ARCHITECTURE.md ================================================ # Architecture Documentation ## Project Purpose CoreUI Free Bootstrap Admin Template is a professional admin dashboard template built on Bootstrap 5 and CoreUI components. It provides a ready-to-use foundation for building admin panels, dashboards, and web applications with a clean, modern interface. **Key Characteristics:** - Server-side templating approach (Pug → HTML) - Bootstrap 5 + CoreUI component library - Vanilla JavaScript (no framework dependencies) - Multi-page application (MPA) architecture - Static file generation with build-time compilation ## High-Level Architecture ``` ┌─────────────────────────────────────────────────────┐ │ Source Files │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Pug │ │ Sass │ │ JS │ │ │ │Templates │ │ Styles │ │ Modules │ │ │ └────┬─────┘ └────┬─────┘ └────┬─────┘ │ │ │ │ │ │ └───────┼─────────────┼─────────────┼─────────────────┘ │ │ │ ▼ ▼ ▼ ┌─────────────────────────────────────────────────────┐ │ Build Pipeline │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Pug │ │PostCSS + │ │ Babel │ │ │ │Compiler │ │ Sass │ │Transpiler│ │ │ └────┬─────┘ └────┬─────┘ └────┬─────┘ │ │ │ │ │ │ └───────┼─────────────┼─────────────┼─────────────────┘ │ │ │ ▼ ▼ ▼ ┌─────────────────────────────────────────────────────┐ │ Distribution Files │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ HTML │ │ CSS │ │ JS │ │ │ │ Files │ │ (minified)│ │(bundled) │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ (served via browser-sync or web server) │ └─────────────────────────────────────────────────────┘ ``` ## Technology Stack ### Frontend - **HTML Generation**: Pug 3.0.3 (template engine) - **CSS Framework**: Bootstrap 5.3.x - **Component Library**: CoreUI 5.x (@coreui/coreui) - **Icons**: CoreUI Icons (@coreui/icons) - **JavaScript**: Vanilla ES6+ (no framework) - **Charts**: Chart.js 4.x - **Scrollbars**: SimpleBar 6.x ### Build Tools - **Package Manager**: npm - **CSS Processing**: Sass 1.97.0 → PostCSS → Autoprefixer - **JS Transpilation**: Babel 7.28.x with preset-env - **Task Runner**: npm scripts with npm-run-all - **File Watching**: Nodemon - **Live Server**: Browser-sync 3.0.4 ### Code Quality - **Linting**: ESLint 9.x (flat config) with XO + Unicorn - **Style Linting**: Stylelint 16.x with Bootstrap config - **Formatting**: Prettier 3.7.4 - **Editor Config**: .editorconfig for consistency ## Directory Structure ``` coreui-free-bootstrap-admin-template/ │ ├── src/ # Source files (edit these) │ ├── pug/ # Pug templates (HTML source) │ │ ├── _layout/ # Base layout templates │ │ │ └── default.pug # Main layout with sidebar/header │ │ ├── _partials/ # Reusable components │ │ │ ├── _header.pug # Top navigation bar │ │ │ ├── _sidebar.pug # Left sidebar navigation │ │ │ ├── _footer.pug # Page footer │ │ │ └── _breadcrumb.pug # Breadcrumb navigation │ │ ├── _mixins/ # Pug helper mixins │ │ │ ├── breadcrumb.pug # Breadcrumb generator │ │ │ ├── callout.pug # Alert/callout boxes │ │ │ └── example.pug # Code example displays │ │ └── views/ # Page templates │ │ ├── dashboard.pug # Main dashboard page │ │ ├── base/ # UI base components │ │ ├── buttons/ # Button examples │ │ ├── forms/ # Form components │ │ ├── icons/ # Icon libraries │ │ ├── notifications/ # Alerts, toasts, modals │ │ ├── pages/ # Auth pages (login, register) │ │ └── ... │ │ │ ├── scss/ # Sass stylesheets │ │ ├── style.scss # Main stylesheet entry │ │ ├── style-rtl.scss # RTL (right-to-left) styles │ │ └── examples.scss # Demo/example page styles │ │ │ ├── js/ # JavaScript modules │ │ ├── main.js # Main entry point │ │ ├── charts.js # Chart.js configurations │ │ ├── color-modes.js # Dark/light theme switcher │ │ ├── tooltips.js # Tooltip initialization │ │ ├── popovers.js # Popover initialization │ │ └── ... │ │ │ ├── assets/ # Static assets │ │ ├── brand/ # Logo files │ │ ├── favicon/ # Favicon files │ │ └── img/ # Images │ │ │ └── views/ # Compiled HTML (auto-generated) │ └── *.html # Do NOT edit these manually │ ├── dist/ # Production build output │ ├── css/ # Minified CSS │ ├── js/ # Transpiled JS │ ├── assets/ # Copied assets │ ├── vendors/ # Third-party libraries │ └── *.html # Production HTML files │ ├── build/ # Build scripts │ ├── pug.mjs # Pug compilation script │ ├── postcss.config.mjs # PostCSS configuration │ ├── vendors.mjs # Vendor file bundling │ └── change-version.mjs # Version management │ ├── node_modules/ # npm dependencies (ignored) │ └── Configuration files ├── package.json # Dependencies and scripts ├── .editorconfig # Editor settings ├── eslint.config.mjs # ESLint flat config ├── .prettierrc.json # Prettier formatting ├── .stylelintrc # Stylelint rules ├── .browserslistrc # Target browsers ├── .babelrc.js # Babel transpiler config └── .cursorrules # AI context (Cursor IDE) ``` ## Build Pipeline Details ### Development Mode (`npm start`) 1. **Clean**: Remove old compiled files 2. **Compile Pug**: `src/pug/**/*.pug` → `src/views/*.html` 3. **Compile Sass**: `src/scss/*.scss` → `dist/css/*.css` (expanded, autoprefixed) 4. **Transpile JS**: `src/js/*.js` → `dist/js/*.js` (Babel with source maps) 5. **Copy Assets**: `src/assets/**/*` → `dist/assets/` 6. **Build Vendors**: Bundle third-party libraries 7. **Watch Files**: Monitor changes and recompile 8. **Browser-sync**: Live reload server on http://localhost:3000 ### Production Build (`npm run build`) 1. **All development steps** 2. **Minify CSS**: Compress stylesheets with cssnano 3. **Minify JS**: Already transpiled by Babel 4. **Optimize Assets**: Copy optimized files 5. **Generate zip**: Create distribution package ### File Watching ``` npm run watch # Watch all file types npm run watch-pug # Watch Pug templates only npm run watch-css # Watch Sass files only npm run watch-js # Watch JavaScript files only ``` Each watch task uses **nodemon** to monitor file changes and trigger appropriate compilation. ## Data Flow ### Page Rendering Flow ``` 1. Browser Request └─> /index.html 2. Server Response └─> Serve dist/index.html (static file) 3. HTML Loads Resources ├─> dist/css/style.css (Bootstrap + CoreUI + custom styles) ├─> dist/js/main.js (app initialization) └─> dist/vendors/*.js (Chart.js, SimpleBar, etc.) 4. JavaScript Execution ├─> Initialize CoreUI components ├─> Set up event listeners ├─> Configure charts (if on dashboard) └─> Enable tooltips/popovers 5. User Interaction └─> JavaScript handles UI updates (no page reload) ``` ### Theme Switching Flow ``` 1. User clicks theme toggle button └─> color-modes.js listens for click 2. ColorModeStorageManager updates preference ├─> Save to localStorage └─> Update [data-coreui-theme] attribute 3. CSS custom properties respond └─> Variables change (--cui-primary-bg, --cui-text-color, etc.) 4. ColorSchemeChange event fires └─> Charts re-render with new theme colors ``` ### Chart Rendering Flow ``` 1. charts.js module loads └─> import Chart from 'chart.js/auto' 2. DOM ready └─> Find chart canvas elements 3. Fetch data (or use inline data) └─> Random data generator for demo 4. Create Chart.js instance ├─> Configure chart type (line, bar, pie, etc.) ├─> Apply theme colors from CSS variables └─> Set responsive options 5. Theme changes └─> Re-initialize charts with new colors ``` ## Component Organization ### Pug Template Hierarchy ``` default.pug (base layout) ├─> _header.pug (navigation bar) ├─> _sidebar.pug (side navigation) ├─> block content │ └─> dashboard.pug (page content) ├─> block scripts (page-specific JS) └─> _footer.pug (page footer) ``` **Block System:** - `block content`: Main page content area - `block scripts`: Page-specific JavaScript includes - Each view extends the layout and overrides blocks ### CSS Architecture ``` style.scss ├─> Import Bootstrap 5 ├─> Import CoreUI components ├─> Import custom variables └─> Import custom component styles Theme System: [data-coreui-theme="light"] # Light mode (default) [data-coreui-theme="dark"] # Dark mode [data-coreui-theme="auto"] # System preference ``` **CSS Custom Properties:** - `--cui-primary`, `--cui-secondary`, etc. (colors) - `--cui-bg`, `--cui-text-color` (backgrounds/text) - `--cui-border-color`, `--cui-shadow` (UI elements) ### JavaScript Module Pattern Each JS file in `src/js/` is an ES6 module: ```javascript // Import dependencies import { Something } from '@coreui/coreui' // Define functionality const doSomething = () => { /* ... */ } // Initialize on DOM ready document.addEventListener('DOMContentLoaded', () => { doSomething() }) // Export if needed (most files use side effects only) ``` ## Key Dependencies ### Runtime Dependencies | Package | Purpose | Used In | |---------|---------|---------| | `@coreui/coreui` | UI component library | All pages | | `@coreui/icons` | Icon library | Icon pages | | `chart.js` | Charts and graphs | Dashboard | | `simplebar` | Custom scrollbars | Sidebar | | `@coreui/utils` | Utility functions | Theme switching | ### Build Dependencies | Package | Purpose | |---------|---------| | `sass` | CSS preprocessing | | `@babel/core` | JavaScript transpilation | | `pug` | HTML templating | | `postcss` | CSS post-processing | | `autoprefixer` | Vendor prefix automation | | `browser-sync` | Development server | | `eslint` | JavaScript linting | | `stylelint` | CSS linting | ## Browser Support Defined in `.browserslistrc`: ``` >= 0.5% last 2 major versions not dead Chrome >= 60 Firefox >= 60 Edge >= 79 Safari >= 12 iOS >= 12 ``` Modern browsers with ES6+ support (Babel handles transpilation for older browsers if needed). ## Deployment ### Static Hosting (Recommended) 1. Run `npm run build` 2. Deploy `dist/` folder to: - Netlify - Vercel - GitHub Pages - AWS S3 + CloudFront - Any static file server ### Traditional Web Server 1. Run `npm run build` 2. Copy `dist/` contents to web root 3. Configure server to serve `index.html` as default 4. Set proper MIME types for CSS/JS files ### Docker (Optional) ```dockerfile FROM nginx:alpine COPY dist/ /usr/share/nginx/html/ EXPOSE 80 ``` ## Performance Considerations ### CSS Optimization - Sass compilation removes unused styles - PostCSS autoprefixer adds only necessary prefixes - Minification in production build - CSS is render-blocking (loaded in ``) ### JavaScript Optimization - Babel transpiles only necessary polyfills (preset-env) - Source maps for debugging (development only) - Modules loaded as separate files (no bundler) - Deferred script loading where possible ### Asset Optimization - SVG icons (scalable, small file size) - Favicon in multiple formats for compatibility - Images in `src/assets/` should be optimized before adding ## Security Considerations ### Content Security Policy (CSP) Template includes inline scripts and styles. For strict CSP: 1. Extract inline scripts to external files 2. Use nonces or hashes for required inline scripts 3. Update CSP headers accordingly ### XSS Prevention - Pug automatically escapes HTML by default - Use `!= html` only for trusted content - Sanitize user input on server-side (if adding backend) ### Dependency Management - Regularly update npm dependencies - Run `npm audit` to check for vulnerabilities - Pin major versions in `package.json` ## Extensibility ### Adding New Pages 1. Create `src/pug/views/my-page.pug` 2. Extend layout: `extends ../_layout/default.pug` 3. Override content block: ```pug block content .container-lg.px-4 h1 My Page Title p Page content here ``` 4. Run `npm start` to compile 5. Access at `/my-page.html` ### Adding New Components 1. Check CoreUI docs: https://coreui.io/bootstrap/docs/ 2. Copy component markup to Pug file 3. Convert HTML to Pug syntax (use html2pug.com if needed) 4. Import required JavaScript: ```javascript import { Modal } from '@coreui/coreui' ``` 5. Initialize component in page-specific JS ### Adding New Styles 1. Edit `src/scss/style.scss` or create new partial 2. Import Bootstrap/CoreUI variables to reuse: ```scss @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; ``` 3. Use CSS custom properties for theme compatibility 4. Run `npm run css` to compile ### Integrating Backend APIs This template is frontend-only. To add backend: 1. **Fetch API** for AJAX requests: ```javascript fetch('/api/endpoint') .then(response => response.json()) .then(data => updateUI(data)) ``` 2. **Authentication**: Implement token-based auth - Store JWT in localStorage/sessionStorage - Add Authorization header to requests - Redirect to login on 401 responses 3. **State Management**: For complex apps, consider: - Vanilla JS with custom events - Lightweight state library (Zustand, Nano Stores) - Full framework migration (React, Vue, etc.) ## Common Issues and Solutions ### Pug Compilation Errors - **Error**: "Cannot find module" - **Fix**: Check Pug include/extend paths (relative to file) ### Sass Compilation Errors - **Error**: "Undefined variable" - **Fix**: Import Bootstrap/CoreUI variables before using ### JavaScript Errors - **Error**: "X is not defined" - **Fix**: Add `/* global X */` comment or import module ### Live Reload Not Working - **Error**: Browser-sync not updating - **Fix**: Check if `watch` scripts are running, restart `npm start` ### Build Fails - **Error**: npm scripts fail - **Fix**: Delete `node_modules/` and `dist/`, run `npm install`, then `npm run build` ## Resources - **CoreUI Bootstrap Docs**: https://coreui.io/bootstrap/docs/ - **Bootstrap 5 Docs**: https://getbootstrap.com/docs/5.3/ - **Pug Documentation**: https://pugjs.org/ - **Chart.js Documentation**: https://www.chartjs.org/ - **Sass Documentation**: https://sass-lang.com/documentation/ ## Changelog See [releases](https://github.com/coreui/coreui-free-bootstrap-admin-template/releases) for version history and updates. ================================================ FILE: DEVELOPMENT.md ================================================ # Development Guide This guide provides practical information for developers working on the CoreUI Free Bootstrap Admin Template. ## Table of Contents - [Getting Started](#getting-started) - [Project Structure](#project-structure) - [Development Workflow](#development-workflow) - [Adding New Features](#adding-new-features) - [Working with Components](#working-with-components) - [Styling Guidelines](#styling-guidelines) - [JavaScript Patterns](#javascript-patterns) - [Testing Your Changes](#testing-your-changes) - [Common Tasks](#common-tasks) - [Troubleshooting](#troubleshooting) ## Getting Started ### Prerequisites - Node.js 16+ and npm - Basic knowledge of HTML, CSS (Sass), and JavaScript - Familiarity with Pug templating (optional but helpful) - Text editor or IDE (VS Code recommended) ### Initial Setup 1. Clone the repository: ```bash git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git cd coreui-free-bootstrap-admin-template ``` 2. Install dependencies: ```bash npm install ``` 3. Start development server: ```bash npm start ``` 4. Open your browser to [http://localhost:3000](http://localhost:3000) The development server includes live reload - changes to Pug, Sass, or JavaScript files will automatically refresh the browser. ## Project Structure ``` src/ ├── pug/ # HTML templates (edit these, not HTML files!) │ ├── _layout/ # Base page layouts │ ├── _partials/ # Reusable components (header, sidebar, footer) │ ├── _mixins/ # Pug helper functions │ └── views/ # Individual page templates ├── scss/ # Stylesheets │ └── style.scss # Main stylesheet (imports Bootstrap + CoreUI) ├── js/ # JavaScript modules │ ├── main.js # Dashboard charts │ ├── color-modes.js # Theme switcher │ └── *.js # Other page-specific scripts └── assets/ # Images, icons, static files ``` **Important**: Always edit source files in `src/`, never the compiled files in `dist/` or `src/views/`. ## Development Workflow ### File Watching The `npm start` command runs multiple watchers in parallel: - **Pug watcher**: Compiles `.pug` files to HTML - **Sass watcher**: Compiles `.scss` files to CSS - **JS watcher**: Transpiles JavaScript with Babel - **Browser-sync**: Live reload server ### Individual Watchers Run specific watchers if you're only working on one file type: ```bash npm run watch-pug # Watch Pug templates only npm run watch-css # Watch Sass files only npm run watch-js # Watch JavaScript files only ``` ### Build for Production ```bash npm run build ``` This creates optimized files in the `dist/` directory ready for deployment. ## Adding New Features ### Adding a New Page 1. **Create Pug template** in `src/pug/views/`: ```pug //- src/pug/views/my-new-page.pug extends ../_layout/default.pug block content .container-lg.px-4 .row .col-12 h1 My New Page p Welcome to my new page! ``` 2. **Compile the template**: ```bash npm run pug ``` This creates `src/views/my-new-page.html` 3. **View in browser**: Navigate to [http://localhost:3000/my-new-page.html](http://localhost:3000/my-new-page.html) 4. **Add to navigation** (optional): Edit `src/pug/_partials/_sidebar.pug` to add a menu link ### Adding Page-Specific JavaScript 1. **Create JS file** in `src/js/`: ```javascript // src/js/my-feature.js /** * My Feature Module * * Description of what this module does */ /** * Initialize the feature */ const initMyFeature = () => { console.log('My feature initialized') } // Run on DOM ready document.addEventListener('DOMContentLoaded', () => { initMyFeature() }) ``` 2. **Include in your Pug template**: ```pug block scripts script(src='js/my-feature.js') ``` 3. **Compile**: ```bash npm run js ``` ### Adding Page-Specific Styles 1. **Create partial** in `src/scss/`: ```scss // src/scss/_my-feature.scss .my-feature { padding: 1rem; background-color: var(--cui-body-bg); &__title { color: var(--cui-primary); } } ``` 2. **Import in main stylesheet**: ```scss // src/scss/style.scss @import "my-feature"; ``` 3. **Compile**: ```bash npm run css ``` ## Working with Components ### Using CoreUI Components **Always use CoreUI Bootstrap components** from the official documentation: https://coreui.io/bootstrap/docs/ #### Example: Adding a Modal 1. **Find component in CoreUI docs**: https://coreui.io/bootstrap/docs/components/modal/ 2. **Convert HTML to Pug** (use https://html2pug.com if needed): ```pug //- Modal Button button.btn.btn-primary(type='button' data-coreui-toggle='modal' data-coreui-target='#myModal') | Launch Modal //- Modal .modal.fade#myModal(tabindex='-1' aria-labelledby='myModalLabel' aria-hidden='true') .modal-dialog .modal-content .modal-header h5.modal-title#myModalLabel Modal Title button.btn-close(type='button' data-coreui-dismiss='modal' aria-label='Close') .modal-body p Modal content goes here .modal-footer button.btn.btn-secondary(type='button' data-coreui-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes ``` 3. **Initialize if needed**: Some components require JavaScript initialization: ```javascript import { Modal } from '@coreui/coreui' const myModal = new Modal(document.getElementById('myModal')) myModal.show() ``` ### Creating Reusable Components For components used across multiple pages, create a Pug mixin: 1. **Create mixin file** in `src/pug/_mixins/`: ```pug //- src/pug/_mixins/alert.pug mixin alert(type, message) .alert(class=`alert-${type}` role='alert') = message ``` 2. **Use the mixin** in your pages: ```pug include _mixins/alert +alert('success', 'Your changes have been saved!') +alert('danger', 'An error occurred.') ``` ## Styling Guidelines ### Use Bootstrap/CoreUI Classes First Before writing custom CSS, check if Bootstrap or CoreUI provides a utility class: ```pug //- Good: Using utility classes .d-flex.justify-content-between.align-items-center.mb-3 h2 Title button.btn.btn-primary Action //- Avoid: Custom CSS when utilities exist .my-custom-header h2 Title button Action ``` ### CSS Custom Properties (Variables) Use CoreUI's CSS variables for theming: ```scss .my-component { color: var(--cui-body-color); // Text color (theme-aware) background: var(--cui-body-bg); // Background color border-color: var(--cui-border-color); // Border color } ``` ### Common CSS Variables | Variable | Purpose | |----------|---------| | `--cui-primary` | Primary brand color | | `--cui-secondary` | Secondary color | | `--cui-success`, `--cui-danger`, etc. | Status colors | | `--cui-body-color` | Default text color | | `--cui-body-bg` | Default background | | `--cui-border-color` | Border color | ### Naming Conventions Use Bootstrap/CoreUI class naming conventions for custom styles: ```scss .my-custom-section { padding: 1rem; .section-title { font-weight: bold; } } // Or extend existing CoreUI/Bootstrap components .sidebar-custom { background-color: var(--cui-sidebar-bg); } ``` ### Dark Mode Support CSS variables automatically adapt to dark mode. Test both themes: ```javascript // Switch theme programmatically for testing localStorage.setItem('coreui-free-bootstrap-admin-template-theme', 'dark') location.reload() ``` ## JavaScript Patterns ### Module Structure Follow this pattern for new JavaScript modules: ```javascript /* global LibraryName */ /** * Module Name * * Description of what this module does and which pages use it. */ /** * Function description * @param {type} paramName - Parameter description * @returns {type} Return value description */ const myFunction = (paramName) => { // Implementation } // Initialize on DOM ready document.addEventListener('DOMContentLoaded', () => { myFunction() }) ``` ### ESLint Rules - **No semicolons** (enforced by ESLint) - **2-space indentation** - **Single quotes** for strings - Use arrow functions `() => {}` instead of `function() {}` ### Accessing CoreUI Utilities ```javascript /* global coreui */ // Get CSS variable value const primaryColor = coreui.Utils.getStyle('--cui-primary') // Convert RGB to HEX const hexColor = coreui.Utils.rgbToHex('rgb(255, 0, 0)') ``` ### Working with Chart.js ```javascript /* global Chart, coreui */ const myChart = new Chart(document.getElementById('my-chart'), { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar'], datasets: [{ label: 'Sales', data: [12, 19, 3], borderColor: coreui.Utils.getStyle('--cui-primary'), backgroundColor: `rgba(${coreui.Utils.getStyle('--cui-primary-rgb')}, 0.1)` }] }, options: { responsive: true } }) // Update chart when theme changes document.documentElement.addEventListener('ColorSchemeChange', () => { myChart.options.scales.x.ticks.color = coreui.Utils.getStyle('--cui-body-color') myChart.update() }) ``` ## Testing Your Changes ### Visual Testing 1. **Test in both themes**: - Click theme toggle in header - Verify dark mode looks correct 2. **Test responsive design**: - Resize browser window - Test mobile view (Chrome DevTools: Cmd+Shift+M / Ctrl+Shift+M) 3. **Test in multiple browsers**: - Chrome/Edge - Firefox - Safari (if on macOS) ### Code Quality Checks Run linters before committing: ```bash npm run lint # Run all linters npm run lint:js # JavaScript only npm run lint:css # Styles only ``` Fix auto-fixable issues: ```bash npm run lint:js -- --fix ``` ## Common Tasks ### Update Dependencies ```bash npm update # Update to latest compatible versions npm outdated # Check for outdated packages npm audit fix # Fix security vulnerabilities ``` ### Change Template Version ```bash npm run change-version 5.4.0 ``` This updates version numbers across all files. ### Create Distribution Package ```bash npm run zip ``` Creates a `.zip` file with the production build. ### Clean Build If you encounter build issues: ```bash rm -rf node_modules dist npm install npm run build ``` ## Troubleshooting ### Pug Compilation Errors **Error**: "Cannot find module" ``` Error: src/pug/views/my-page.pug > 1| extends ../_layout/wrong-path.pug ``` **Solution**: Check that include/extend paths are correct and relative to the current file. ### Sass Compilation Errors **Error**: "Undefined variable $primary" **Solution**: Import Bootstrap/CoreUI variables before using them: ```scss @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; // Now you can use variables .my-class { color: $primary; } ``` ### JavaScript Errors **Error**: "ReferenceError: Chart is not defined" **Solution**: Add global comment at top of file: ```javascript /* global Chart */ ``` ### Live Reload Not Working 1. Check that `npm start` is running without errors 2. Restart the development server: `Ctrl+C` then `npm start` 3. Clear browser cache: `Cmd+Shift+R` / `Ctrl+Shift+F5` 4. Check that files are being saved in `src/` not `dist/` ### Port Already in Use **Error**: "Port 3000 is already in use" **Solution**: Kill the process or use a different port: ```bash # macOS/Linux lsof -ti:3000 | xargs kill -9 # Windows netstat -ano | findstr :3000 taskkill /PID /F # Or use different port PORT=3001 npm start ``` ### ESLint Errors **Error**: "Unexpected console statement" **Solution**: Disable ESLint for specific lines when console is needed: ```javascript // eslint-disable-next-line no-console console.log('Debug info') ``` Or disable for entire file (not recommended): ```javascript /* eslint-disable no-console */ ``` ## Best Practices ### Do's - ✅ Use CoreUI Bootstrap components from official docs - ✅ Edit source files in `src/`, never compiled files - ✅ Use CSS variables for colors and theme values - ✅ Add JSDoc comments to all functions - ✅ Test in both light and dark modes - ✅ Follow existing code patterns and conventions - ✅ Run linters before committing - ✅ Keep JavaScript modules focused and small ### Don'ts - ❌ Don't use Tailwind CSS (this project uses Bootstrap) - ❌ Don't edit files in `dist/` or `src/views/` (auto-generated) - ❌ Don't add unnecessary dependencies - ❌ Don't use inline styles (use utility classes or Sass) - ❌ Don't hardcode colors (use CSS variables) - ❌ Don't ignore ESLint/Stylelint warnings - ❌ Don't commit `node_modules/` or `dist/` ## Getting Help - **CoreUI Documentation**: https://coreui.io/bootstrap/docs/ - **Bootstrap 5 Docs**: https://getbootstrap.com/docs/5.3/ - **Pug Documentation**: https://pugjs.org/ - **Chart.js Documentation**: https://www.chartjs.org/ - **GitHub Issues**: https://github.com/coreui/coreui-free-bootstrap-admin-template/issues ## Contributing See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on: - Code style and conventions - Commit message format - Pull request process - Bug reporting --- **Need more help?** Check [ARCHITECTURE.md](ARCHITECTURE.md) for technical details about the project structure and build pipeline. ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2025 creativeLabs Łukasz Holeczek. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # CoreUI Free Bootstrap Admin Template — Built for AI-Assisted Development [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui) [![npm package][npm-coreui-badge]][npm-coreui] [![NPM downloads][npm-coreui-download]][npm-coreui] [npm-coreui]: https://www.npmjs.com/package/@coreui/coreui [npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square [npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square [![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-bootstrap-admin-template/) CoreUI Bootstrap Admin Panel Template is not another blend of 3rd parties free components and libraries. It's **the only Open Source Bootstrap Admin Dashboard Template built on the enterprise-grade hand-crafted [UI Components Library](https://github.com/coreui/coreui)** created and backed by professionals. **CoreUI Admin Template helps you build reliable web apps faster than before.** CoreUI offers 4 versions: [Angular](https://github.com/coreui/coreui-free-angular-admin-template), [Bootstrap](https://github.com/coreui/coreui-free-bootstrap-admin-template), [React.js](https://github.com/coreui/coreui-free-react-admin-template), and [Vue.js](https://github.com/coreui/coreui-free-vue-admin-template). Curious why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Bootstrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8) ## Table of Contents * [Frameworks](#frameworks) * [CoreUI PRO](#coreui-pro) * [CoreUI PRO Bootstrap Admin Templates](#coreui-pro-bootstrap-admin-templates) * [Installation](#installation) * [Usage](#usage) * [What's included](#whats-included) * [AI-Friendly Development](#ai-friendly-development) * [Documentation](#documentation) * [Components](#components) * [Contributing](#contributing) * [Versioning](#versioning) * [Creators](#creators) * [Community](#community) * [Support CoreUI Development](#support-coreui-development) * [Copyright and license](#copyright-and-license) ## Frameworks CoreUI is built on top of Bootstrap 5 and supports popular frameworks. * [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template) * [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template) * [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template) * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template) ## CoreUI PRO * 💪 [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/) * 💪 [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/) * 💪 [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/) * 💪 [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/) * 💪 [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/) ## CoreUI PRO Bootstrap Admin Templates | Default Theme | Light Theme | | --- | --- | | [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=default) | [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=light)| | Modern Theme | Bright Theme | | --- | --- | | [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=modern) | [![CoreUI PRO Bootstrap Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/bootstrap-dashboard-template/?theme=bright)| ## CoreUI Icons (522 Free icons) - Premium designed free icon set with marks in SVG, Webfont and raster formats. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app. Ready-to-use fonts and stylesheets that work with your favorite frameworks. [![CoreUI Free Icons](https://coreui.io/images/icons_free_bg_set.png)](https://github.com/coreui/coreui-icons/) [Download CoreUI Free Icons](https://github.com/coreui/coreui-icons/) ## Installation ### Clone repo ``` bash # clone the repo $ git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git my-project # go into app's directory $ cd my-project # install app's dependencies $ npm install ``` ## Usage ``` bash # serve with hot reload at localhost:3000. $ npm start # build for production with minification $ npm run build ``` ## What's included Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: ``` free-bootstrap-admin-template/ ├── build/ ├── src/ │ ├── assets/ │ │ ├── brand/ │ │ ├── favicon/ │ │ ├── icons/ │ │ ├── img/ │ ├── js/ │ ├── pug/ │ │ ├── _layout/ │ │ ├── _partial/ │ │ ├── base/ │ │ ├── buttons/ │ │ ├── icons/ │ │ ├── notifications/ │ │ ├── ... │ │ ├── index.pug │ │ └── ... │ ├── scss/ │ ├── vendors/ │ └── views/ │ ├── base/ │ ├── buttons/ │ ├── css/ │ ├── icons/ │ ├── notifications/ │ ├── ... │ ├── index.html │ └── ... └── package.json ``` ## AI-Friendly Development This template is optimized for AI-assisted development, making it easier to work with AI coding assistants like Cursor, Claude Code, and GitHub Copilot. ### What's Included - **`.cursorrules`** - Comprehensive AI context file with project conventions, patterns, and guidelines - **`ARCHITECTURE.md`** - Detailed technical documentation covering the project structure, build pipeline, and component organization - **`DEVELOPMENT.md`** - Practical developer guide with examples and best practices - **JSDoc Comments** - All JavaScript modules include detailed documentation with @param and @returns annotations ### Benefits - 🤖 **Smart Code Generation** - AI understands your project uses CoreUI Bootstrap (not Tailwind CSS) - 📚 **Better Context Awareness** - AI knows the project structure, conventions, and patterns - ✨ **Consistent Code Style** - AI generates code following ESLint/Stylelint rules automatically - 🚀 **Faster Development** - Less time explaining, more time building - 💡 **Intelligent Suggestions** - AI provides relevant component examples from CoreUI documentation ### Quick Start with AI Simply open the project in your AI-powered IDE (Cursor, VS Code with Copilot, etc.) and the AI will automatically understand: - Project architecture and file organization - CoreUI Bootstrap component usage - Pug templating patterns - Sass/SCSS styling conventions - JavaScript module patterns ## Documentation The documentation for the CoreUI Free Bootstrap Admin Template is hosted at our website [CoreUI](https://coreui.io/bootstrap/docs/templates/installation/) ## Components CoreUI Bootstrap Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components. - [Bootstrap Accordion](https://coreui.io/bootstrap/docs/components/accordion/) - [Bootstrap Alert](https://coreui.io/bootstrap/docs/components/alert/) - [Bootstrap Autocomplete](https://coreui.io/bootstrap/docs/forms/autocomplete/) **PRO** - [Bootstrap Avatar](https://coreui.io/bootstrap/docs/components/avatar/) - [Bootstrap Badge](https://coreui.io/bootstrap/docs/components/badge/) - [Bootstrap Breadcrumb](https://coreui.io/bootstrap/docs/components/breadcrumb/) - [Bootstrap Button](https://coreui.io/bootstrap/docs/components/button/) - [Bootstrap Button Group](https://coreui.io/bootstrap/docs/components/button-group/) - [Bootstrap Callout](https://coreui.io/bootstrap/docs/components/callout/) - [Bootstrap Card](https://coreui.io/bootstrap/docs/components/card/) - [Bootstrap Carousel](https://coreui.io/bootstrap/docs/components/carousel/) - [Bootstrap Checkbox](https://coreui.io/bootstrap/docs/forms/checkbox/) - [Bootstrap Close Button](https://coreui.io/bootstrap/docs/components/close-button/) - [Bootstrap Calendar](https://coreui.io/bootstrap/docs/components/calendar/) **PRO** - [Bootstrap Collapse](https://coreui.io/bootstrap/docs/components/collapse/) - [Bootstrap Date Picker](https://coreui.io/bootstrap/docs/forms/date-picker/) **PRO** - [Bootstrap Date Range Picker](https://coreui.io/bootstrap/docs/forms/date-range-picker/) **PRO** - [Bootstrap Dropdown](https://coreui.io/bootstrap/docs/components/dropdown/) - [Bootstrap Floating Labels](https://coreui.io/bootstrap/docs/forms/floating-labels/) - [Bootstrap Footer](https://coreui.io/bootstrap/docs/components/footer/) - [Bootstrap Header](https://coreui.io/bootstrap/docs/components/header/) - [Bootstrap Image](https://coreui.io/bootstrap/docs/components/image/) - [Bootstrap Input](https://coreui.io/bootstrap/docs/forms/input/) - [Bootstrap Input Group](https://coreui.io/bootstrap/docs/forms/input-group/) - [Bootstrap List Group](https://coreui.io/bootstrap/docs/components/list-group/) - [Bootstrap Loading Button](https://coreui.io/bootstrap/docs/components/loading-button/) **PRO** - [Bootstrap Modal](https://coreui.io/bootstrap/docs/components/modal/) - [Bootstrap Multi Select](https://coreui.io/bootstrap/docs/forms/multi-select/) **PRO** - [Bootstrap Navs & Tabs](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Bootstrap Navbar](https://coreui.io/bootstrap/docs/components/navbar/) - [Bootstrap Offcanvas](https://coreui.io/bootstrap/docs/components/offcanvas/) - [Bootstrap Pagination](https://coreui.io/bootstrap/docs/components/pagination/) - [Bootstrap Password Input](https://coreui.io/bootstrap/docs/forms/password-input/) **PRO** - [Bootstrap Placeholder](https://coreui.io/bootstrap/docs/components/placeholder/) - [Bootstrap Popover](https://coreui.io/bootstrap/docs/components/popover/) - [Bootstrap Progress](https://coreui.io/bootstrap/docs/components/progress/) - [Bootstrap Radio](https://coreui.io/bootstrap/docs/forms/radio/) - [Bootstrap Range](https://coreui.io/bootstrap/docs/forms/range/) - [Bootstrap Range Slider](https://coreui.io/bootstrap/docs/forms/range-slider/) **PRO** - [Bootstrap Rating](https://coreui.io/bootstrap/docs/forms/rating/) **PRO** - [Bootstrap Select](https://coreui.io/bootstrap/docs/forms/select/) - [Bootstrap Sidebar](https://coreui.io/bootstrap/docs/components/sidebar/) - [Bootstrap Spinner](https://coreui.io/bootstrap/docs/components/spinner/) - [Bootstrap Stepper](https://coreui.io/bootstrap/docs/forms/stepper/) **PRO** - [Bootstrap Switch](https://coreui.io/bootstrap/docs/forms/switch/) - [Bootstrap Table](https://coreui.io/bootstrap/docs/components/table/) - [Bootstrap Textarea](https://coreui.io/bootstrap/docs/forms/textarea/) - [Bootstrap Time Picker](https://coreui.io/bootstrap/docs/forms/time-picker/) **PRO** - [Bootstrap Toast](https://coreui.io/bootstrap/docs/components/toast/) - [Bootstrap Tooltip](https://coreui.io/bootstrap/docs/components/tooltip/) ## Contributing Please read through our [contributing guidelines](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. Editor preferences are available in the [editor config](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at . ## Versioning For transparency into our release cycle and in striving to maintain backward compatibility,CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/). See [the Releases section of our project](https://github.com/coreui/coreui-free-bootstrap-admin-template/releases) for changelogs for each release version. ## Creators **Łukasz Holeczek** * * **Andrzej Kopański** * **CoreUI Team** * * * ## Community Get updates on CoreUI's development and chat with the project maintainers and community members. - Follow [@core_ui on Twitter](https://twitter.com/core_ui). - Read and subscribe to [CoreUI Blog](https://coreui.io/blog/). ## Support CoreUI Development CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=bootstrap&src=github-coreui-free-bootstrap-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/). ## Copyright and license copyright 2025 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE). ================================================ FILE: build/change-version.mjs ================================================ #!/usr/bin/env node /*! * Script to update version number references in the project. * Copyright 2017-2022 The Bootstrap Authors * Copyright 2017-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ import fs from 'node:fs/promises' import path from 'node:path' import { globby } from 'globby' const VERBOSE = process.argv.includes('--verbose') const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run') // These are the filetypes we only care about replacing the version const GLOB = [ '**/*.{css,html,js,json,md,pug,scss,txt,yml}' ] const GLOBBY_OPTIONS = { cwd: path.join(__dirname, '..'), gitignore: true } const EXCLUDED_FILES = [ 'CHANGELOG.md' ] // Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37 function regExpQuote(string) { return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&') } function regExpQuoteReplacement(string) { return string.replace(/\$/g, '$$') } async function replaceRecursively(file, oldVersion, newVersion) { const originalString = await fs.readFile(file, 'utf8') const newString = originalString.replace( new RegExp(regExpQuote(oldVersion), 'g'), regExpQuoteReplacement(newVersion) ) // No need to move any further if the strings are identical if (originalString === newString) { return } if (VERBOSE) { console.log(`FILE: ${file}`) } if (DRY_RUN) { return } await fs.writeFile(file, newString, 'utf8') } async function main(args) { const [oldVersion, newVersion] = args if (!oldVersion || !newVersion) { console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]') console.error('Got arguments:', args) process.exit(1) } // Strip any leading `v` from arguments because otherwise we will end up with duplicate `v`s [oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg) try { const files = await globby(GLOB, GLOBBY_OPTIONS, EXCLUDED_FILES) await Promise.all(files.map(file => replaceRecursively(file, oldVersion, newVersion))) } catch (error) { console.error(error) process.exit(1) } } main(process.argv.slice(2)) ================================================ FILE: build/postcss.config.mjs ================================================ const mapConfig = { inline: false, annotation: true, sourcesContent: true } export default () => { return { map: mapConfig, plugins: { autoprefixer: { cascade: false }, 'postcss-combine-duplicated-selectors': {}, 'postcss-drop-empty-css-vars': {} } } } ================================================ FILE: build/pug.mjs ================================================ #!/usr/bin/env node import fs from 'node:fs/promises' import path from 'node:path' import { fileURLToPath } from 'node:url' import { globby } from 'globby' import pug from 'pug' import { mkdirp } from 'mkdirp' const __dirname = path.dirname(fileURLToPath(import.meta.url)) const GLOB = [ '**/*.pug' ] const SRC = 'src/pug/views/' const GLOBBY_OPTIONS = { cwd: path.join(__dirname, '..', SRC) } const { basename, dirname, resolve, sep } = path const base = levels => { let path = './' while (levels > 0) { levels -= 1 path += '../' } return path } const compile = (filename, basedir) => { const levels = basedir.split(`${sep}`).filter(el => el !== '').length const fn = pug.compileFile(filename, { basedir: './pug/', pretty: true }) const html = fn({ base: base(levels) }) return html } const compilePugToHtml = (file, dest) => { const dir = dirname(file) const filename = basename(file).replace('.pug', '.html') const relative = path.relative(path.join(__dirname, '..'), dir.replace(SRC, '')) const html = compile(path.join(__dirname, '..', SRC, file), `${relative}`) mkdirp(path.join(__dirname, '..', dest, relative)).then(() => { fs.writeFile(resolve(__dirname, '..', dest, relative, filename), html, err => { if (err) { throw err } console.log(`${resolve(__dirname, '..', dest, relative, filename)} file saved!`) }) }) } async function main() { try { const files = await globby(GLOB, GLOBBY_OPTIONS) await Promise.all(files.map(file => compilePugToHtml(file, 'src/views/'))) } catch (error) { console.error(error) process.exit(1) } } main() ================================================ FILE: build/vendors.mjs ================================================ #!/usr/bin/env node import fs from 'node:fs' import path from 'node:path' import injectVendors from '@coreui/vendors-injector' const DIST = 'dist/' const { extname, join } = path const walkSync = (dir, filelist = []) => { for (const file of fs.readdirSync(dir)) { filelist = fs.statSync(join(dir, file)).isDirectory() ? walkSync(join(dir, file), filelist) : filelist.concat(join(dir, file)) } return filelist } const main = () => { const filenames = walkSync(DIST) for (const filename of filenames) { if (extname(filename) === '.html') { injectVendors.toFile(filename) } } } main() ================================================ FILE: eslint.config.mjs ================================================ import xo from 'eslint-config-xo' import xoBrowser from 'eslint-config-xo/browser' import eslintPluginImport from 'eslint-plugin-import' import eslintPluginUnicorn from 'eslint-plugin-unicorn' import globals from 'globals' export default [ eslintPluginImport.flatConfigs.errors, eslintPluginImport.flatConfigs.warnings, eslintPluginUnicorn.configs.recommended, ...xo, ...xoBrowser, { ignores: [ '**/*.json', '**/*.min.js', '**/dist/', '.babelrc.js' ] }, { rules: { '@stylistic/comma-dangle': 'off', '@stylistic/function-paren-newline': 'off', '@stylistic/indent': 'off', '@stylistic/indent-binary-ops': 'off', '@stylistic/jsx-quotes': 'off', '@stylistic/max-len': 'off', '@stylistic/object-curly-spacing': 'off', '@stylistic/operator-linebreak': 'off', '@stylistic/quotes': 'off', '@stylistic/semi': 'off', 'arrow-body-style': 'off', 'capitalized-comments': 'off', 'comma-dangle': ['error', 'never'], 'import/extensions': [ 'error', 'ignorePackages', { js: 'always' } ], 'import/first': 'error', 'import/newline-after-import': 'error', 'import/no-absolute-path': 'error', 'import/no-amd': 'error', 'import/no-cycle': [ 'error', { ignoreExternal: true } ], 'import/no-duplicates': 'error', 'import/no-extraneous-dependencies': 'error', 'import/no-mutable-exports': 'error', 'import/no-named-as-default': 'error', 'import/no-named-as-default-member': 'error', 'import/no-named-default': 'error', 'import/no-self-import': 'error', 'import/no-unassigned-import': ['error'], 'import/no-useless-path-segments': 'error', 'import/order': 'error', indent: [ 'error', 2, { MemberExpression: 'off', SwitchCase: 1 } ], 'logical-assignment-operators': 'off', 'max-params': ['warn', 5], 'multiline-ternary': ['error', 'always-multiline'], 'new-cap': [ 'error', { properties: false } ], 'no-console': 'error', 'no-negated-condition': 'off', 'object-curly-spacing': ['error', 'always'], 'operator-linebreak': ['error', 'after'], 'prefer-object-has-own': 'off', 'prefer-template': 'error', semi: ['error', 'never'], strict: 'error', 'unicorn/explicit-length-check': 'off', 'unicorn/filename-case': 'off', 'unicorn/no-anonymous-default-export': 'off', 'unicorn/no-array-callback-reference': 'off', 'unicorn/no-array-method-this-argument': 'off', 'unicorn/no-null': 'off', 'unicorn/no-typeof-undefined': 'off', 'unicorn/no-unused-properties': 'error', 'unicorn/numeric-separators-style': 'off', 'unicorn/prefer-array-flat': 'off', 'unicorn/prefer-at': 'off', 'unicorn/prefer-dom-node-dataset': 'off', 'unicorn/prefer-global-this': 'off', // added to avoid the error: 'Use `globalThis` instead of `window` or `global`' 'unicorn/prefer-module': 'off', 'unicorn/prefer-query-selector': 'off', 'unicorn/prefer-spread': 'off', 'unicorn/prefer-string-raw': 'off', 'unicorn/prefer-string-replace-all': 'off', 'unicorn/prefer-structured-clone': 'off', 'unicorn/prevent-abbreviations': 'off' } }, { files: ['**/*.{js,mjs}'], languageOptions: { sourceType: 'module' } }, { files: ['build/**'], languageOptions: { globals: { ...globals.node }, sourceType: 'module' }, rules: { 'no-console': 'off', 'unicorn/prefer-top-level-await': 'off' } } ] ================================================ FILE: nodemon.json ================================================ { "ignoreRoot": [".git"], "ignore": [ "build", "dist" ], "delay": 2500 } ================================================ FILE: package.json ================================================ { "name": "@coreui/coreui-free-bootstrap-admin-template", "version": "5.3.0", "description": "Free Bootstrap Admin Template", "keywords": [ "admin", "admin panel", "admin template", "bootstrap", "css", "dashboard", "framework", "front-end", "responsive", "sass", "ui kit", "webapp" ], "homepage": "https://coreui.io", "bugs": { "url": "https://github.com/coreui/coreui-free-bootstrap-admin-template/issues", "email": "support@coreui.io" }, "license": "MIT", "author": { "name": "creativeLabs Łukasz Holeczek", "url": "https://coreui.io", "github": "https://github.com/coreui", "twitter": "https://twitter.com/core_ui" }, "contributors": [ { "name": "CoreUI Core Team", "url": "https://github.com/orgs/coreui/people" } ], "main": "dist/index.html", "repository": { "type": "git", "url": "git+https://github.com/coreui/coreui-free-bootstrap-admin-template.git" }, "funding": [ { "type": "opencollective", "url": "https://opencollective.com/coreui" }, { "type": "subscription", "url": "hhttps://coreui.io/pricing/?framework=bootstrap" } ], "scripts": { "build": "npm-run-all clean --parallel css js sync --sequential build-vendors", "build-vendors": "node build/vendors.mjs", "clean": "rimraf dist", "css": "npm-run-all --parallel css-compile* --sequential css-prefix css-minify*", "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --load-path=node_modules/ src/scss/:dist/css/", "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd", "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"", "css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"", "js": "npm-run-all --parallel js-compile* ", "js-compile": "cross-env babel src/js/ --out-dir dist/js/ --source-maps", "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives", "localhost": "browser-sync start --server \"./dist\" --serveStatic \"./\" --files \"./dist/\"", "pug": "node build/pug.mjs", "release-version": "node build/change-version.mjs", "serve": "serve dist", "start": "npm-run-all --sequential clean css js sync --parallel localhost watch", "sync": "npm-run-all --parallel sync-*", "sync-assets": "syncdir src/assets dist/assets", "sync-views": "syncdir src/views dist", "watch": "npm-run-all --parallel watch-*", "watch-assets": "nodemon --watch src/assets --exec \"npm run sync-assets\"", "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"", "watch-html": "nodemon --watch src/views --ext html --exec \"npm run sync-views\"", "watch-js": "nodemon --watch src/js --ext js --exec \"npm-run-all js-lint js-compile\"", "watch-pug": "nodemon --watch src/pug --ext pug --exec \"npm run pug\"", "zip": "npm-run-all --sequential build zip-*", "zip-dist": "cross-env-shell \"rm -rf coreui-free-bootstrap-admin-template-v$npm_package_version-dist coreui-free-bootstrap-admin-template-v$npm_package_version-dist.zip && cp -r dist/ coreui-free-bootstrap-admin-template-v$npm_package_version-dist && zip -qr9 coreui-free-bootstrap-admin-template-v$npm_package_version-dist.zip coreui-free-bootstrap-admin-template-v$npm_package_version-dist && rm -rf coreui-free-bootstrap-admin-template-v$npm_package_version-dist\"", "zip-src": "git archive -o coreui-free-bootstrap-admin-template-v$npm_package_version.zip -9 HEAD" }, "dependencies": { "@coreui/chartjs": "^4.1.0", "@coreui/coreui": "^5.5.0", "@coreui/icons": "^3.0.1", "@coreui/utils": "^2.0.2", "chart.js": "^4.5.1", "simplebar": "^6.3.3" }, "devDependencies": { "@babel/cli": "^7.28.3", "@babel/core": "^7.28.5", "@babel/preset-env": "^7.28.5", "@coreui/vendors-injector": "^1.1.4", "autoprefixer": "^10.4.23", "browser-sync": "^3.0.4", "clean-css-cli": "^5.6.3", "cross-env": "^10.1.0", "eslint": "^9.39.2", "eslint-config-xo": "^0.49.0", "eslint-plugin-import": "^2.32.0", "eslint-plugin-unicorn": "^62.0.0", "find-unused-sass-variables": "^6.1.1", "globals": "^16.5.0", "globby": "^16.0.0", "mkdirp": "^3.0.1", "nodemon": "^3.1.11", "npm-run-all": "^4.1.5", "postcss": "^8.5.6", "postcss-cli": "^11.0.1", "postcss-combine-duplicated-selectors": "^10.0.3", "postcss-drop-empty-css-vars": "^0.0.0", "prettier": "3.7.4", "pug": "^3.0.3", "rimraf": "^6.1.2", "sass": "1.97.0", "serve": "^14.2.5", "shelljs": "^0.10.0", "stylelint": "16.26.1", "stylelint-config-twbs-bootstrap": "^16.1.0", "sync-directory": "^6.0.5" } } ================================================ FILE: src/assets/favicon/browserconfig.xml ================================================ #ffffff ================================================ FILE: src/assets/favicon/manifest.json ================================================ { "name": "App", "icons": [ { "src": "/android-icon-36x36.png", "sizes": "36x36", "type": "image/png", "density": "0.75" }, { "src": "/android-icon-48x48.png", "sizes": "48x48", "type": "image/png", "density": "1.0" }, { "src": "/android-icon-72x72.png", "sizes": "72x72", "type": "image/png", "density": "1.5" }, { "src": "/android-icon-96x96.png", "sizes": "96x96", "type": "image/png", "density": "2.0" }, { "src": "/android-icon-144x144.png", "sizes": "144x144", "type": "image/png", "density": "3.0" }, { "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" } ] } ================================================ FILE: src/js/charts.js ================================================ /* global Chart */ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template charts.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Chart.js Demo Examples * * This module provides demonstration examples for various Chart.js chart types * used in the Charts page (views/charts.html). Each chart is initialized with * sample data to showcase different visualization patterns. * * Chart types included: * - Line chart (canvas-1) * - Bar chart (canvas-2) * - Doughnut chart (canvas-3) * - Radar chart (canvas-4) * - Pie chart (canvas-5) * - Polar area chart (canvas-6) * * All charts use randomly generated data for demonstration purposes. */ /** * Generates a random number between 0 and 100 * @returns {number} Random integer from 0 to 100 */ const random = () => Math.round(Math.random() * 100) // eslint-disable-next-line no-unused-vars const lineChart = new Chart(document.getElementById('canvas-1'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(220, 220, 220, 0.2)', borderColor: 'rgba(220, 220, 220, 1)', pointBackgroundColor: 'rgba(220, 220, 220, 1)', pointBorderColor: '#fff', data: [random(), random(), random(), random(), random(), random(), random()] }, { label: 'My Second dataset', backgroundColor: 'rgba(151, 187, 205, 0.2)', borderColor: 'rgba(151, 187, 205, 1)', pointBackgroundColor: 'rgba(151, 187, 205, 1)', pointBorderColor: '#fff', data: [random(), random(), random(), random(), random(), random(), random()] } ] }, options: { responsive: true } }) // eslint-disable-next-line no-unused-vars const barChart = new Chart(document.getElementById('canvas-2'), { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { backgroundColor: 'rgba(220, 220, 220, 0.5)', borderColor: 'rgba(220, 220, 220, 0.8)', highlightFill: 'rgba(220, 220, 220, 0.75)', highlightStroke: 'rgba(220, 220, 220, 1)', data: [random(), random(), random(), random(), random(), random(), random()] }, { backgroundColor: 'rgba(151, 187, 205, 0.5)', borderColor: 'rgba(151, 187, 205, 0.8)', highlightFill: 'rgba(151, 187, 205, 0.75)', highlightStroke: 'rgba(151, 187, 205, 1)', data: [random(), random(), random(), random(), random(), random(), random()] } ] }, options: { responsive: true } }) // eslint-disable-next-line no-unused-vars const doughnutChart = new Chart(document.getElementById('canvas-3'), { type: 'doughnut', data: { labels: ['Red', 'Green', 'Yellow'], datasets: [{ data: [300, 50, 100], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] }, options: { responsive: true } }) // eslint-disable-next-line no-unused-vars const radarChart = new Chart(document.getElementById('canvas-4'), { type: 'radar', data: { labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(220, 220, 220, 0.2)', borderColor: 'rgba(220, 220, 220, 1)', pointBackgroundColor: 'rgba(220, 220, 220, 1)', pointBorderColor: '#fff', pointHighlightFill: '#fff', pointHighlightStroke: 'rgba(220, 220, 220, 1)', data: [65, 59, 90, 81, 56, 55, 40] }, { label: 'My Second dataset', backgroundColor: 'rgba(151, 187, 205, 0.2)', borderColor: 'rgba(151, 187, 205, 1)', pointBackgroundColor: 'rgba(151, 187, 205, 1)', pointBorderColor: '#fff', pointHighlightFill: '#fff', pointHighlightStroke: 'rgba(151, 187, 205, 1)', data: [28, 48, 40, 19, 96, 27, 100] } ] }, options: { responsive: true } }) // eslint-disable-next-line no-unused-vars const pieChart = new Chart(document.getElementById('canvas-5'), { type: 'pie', data: { labels: ['Red', 'Green', 'Yellow'], datasets: [{ data: [300, 50, 100], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] }, options: { responsive: true } }) // eslint-disable-next-line no-unused-vars const polarAreaChart = new Chart(document.getElementById('canvas-6'), { type: 'polarArea', data: { labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'], datasets: [{ data: [11, 16, 7, 3, 14], backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'] }] }, options: { responsive: true } }) ================================================ FILE: src/js/color-modes.js ================================================ /*! * Color mode toggler for CoreUI's docs (https://coreui.io/) * Copyright (c) 2025 creativeLabs Łukasz Holeczek * Licensed under the Creative Commons Attribution 3.0 Unported License. */ /** * Dark/Light Theme Switcher * * This module manages the application's color scheme (light/dark/auto mode). * It handles: * - Persisting theme preference to localStorage * - Detecting system color scheme preference (prefers-color-scheme) * - Updating the DOM with the selected theme * - Managing the theme toggle UI in the header * - Dispatching ColorSchemeChange events for chart updates * * Theme modes: * - 'light': Force light theme * - 'dark': Force dark theme * - 'auto': Follow system preference * * The theme is applied via [data-coreui-theme] attribute on element. */ (() => { const THEME = 'coreui-free-bootstrap-admin-template-theme' /** * Retrieves the stored theme preference from localStorage * @returns {string|null} Theme name ('light', 'dark', 'auto') or null */ const getStoredTheme = () => localStorage.getItem(THEME) /** * Saves the theme preference to localStorage * @param {string} theme - Theme name ('light', 'dark', or 'auto') */ const setStoredTheme = theme => localStorage.setItem(THEME, theme) /** * Determines the preferred theme based on stored preference or system setting * @returns {string} Preferred theme ('light' or 'dark') */ const getPreferredTheme = () => { const storedTheme = getStoredTheme() if (storedTheme) { return storedTheme } return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' } /** * Applies the theme to the document and dispatches a change event * @param {string} theme - Theme to apply ('light', 'dark', or 'auto') */ const setTheme = theme => { if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-coreui-theme', 'dark') } else { document.documentElement.setAttribute('data-coreui-theme', theme) } const event = new Event('ColorSchemeChange') document.documentElement.dispatchEvent(event) } setTheme(getPreferredTheme()) /** * Updates the theme toggle UI to reflect the active theme * @param {string} theme - Currently active theme */ const showActiveTheme = theme => { const activeThemeIcon = document.querySelector('.theme-icon-active use') const btnToActive = document.querySelector(`[data-coreui-theme-value="${theme}"]`) const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('xlink:href') for (const element of document.querySelectorAll('[data-coreui-theme-value]')) { element.classList.remove('active') } btnToActive.classList.add('active') activeThemeIcon.setAttribute('xlink:href', svgOfActiveBtn) } window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { const storedTheme = getStoredTheme() if (storedTheme !== 'light' || storedTheme !== 'dark') { setTheme(getPreferredTheme()) } }) window.addEventListener('DOMContentLoaded', () => { showActiveTheme(getPreferredTheme()) for (const toggle of document.querySelectorAll('[data-coreui-theme-value]')) { toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-coreui-theme-value') setStoredTheme(theme) setTheme(theme) showActiveTheme(theme) }) } }) })() ================================================ FILE: src/js/colors.js ================================================ /* global coreui */ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template colors.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Theme Color Display * * This module enhances the Colors page (views/theme/colors.html) by automatically * generating color information tables for each theme color swatch. It extracts the * computed background color from elements with the .theme-color class and displays * both HEX and RGB values below each color sample. * * This provides developers with easy access to color values for use in custom styles. */ for (const element of document.querySelectorAll('.theme-color')) { const color = getComputedStyle(element, null).getPropertyValue('background-color') const table = document.createElement('table') table.classList.add('w-100') table.innerHTML = `
HEX: ${coreui.Utils.rgbToHex(color)}
RGB: ${color}
` element.parentNode.append(table) } ================================================ FILE: src/js/config.js ================================================ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template config.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Theme Configuration from URL Parameters * * This module allows setting the initial theme via URL query parameters. * Useful for sharing links with specific theme preferences or testing different themes. * * Usage: Add ?theme=dark, ?theme=light, or ?theme=auto to the URL * Example: http://localhost:3000/index.html?theme=dark * * The selected theme is persisted to localStorage and will be used as the default * until changed by the user or another URL parameter. */ (() => { const THEME = 'coreui-free-bootstrap-admin-template-theme' const urlParams = new URLSearchParams(window.location.href.split('?')[1]) if (urlParams.get('theme') && ['auto', 'dark', 'light'].includes(urlParams.get('theme'))) { localStorage.setItem(THEME, urlParams.get('theme')) } })() ================================================ FILE: src/js/main.js ================================================ /* global Chart, coreui */ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template main.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Dashboard Charts * * This module initializes and manages all charts on the main Dashboard page (index.html). * It includes: * - Card charts (small charts in statistic cards) * - Main chart (large chart showing traffic/metrics over time) * - Custom tooltip configuration using CoreUI's ChartJS utilities * - Theme-aware chart updates (responds to dark/light mode changes) * * All charts use Chart.js with CoreUI's custom styling and color variables. */ // Configure Chart.js defaults for custom tooltips Chart.defaults.pointHitDetectionRadius = 1 Chart.defaults.plugins.tooltip.enabled = false Chart.defaults.plugins.tooltip.mode = 'index' Chart.defaults.plugins.tooltip.position = 'nearest' Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips Chart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color') document.documentElement.addEventListener('ColorSchemeChange', () => { cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary') cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info') mainChart.options.scales.x.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent') mainChart.options.scales.x.ticks.color = coreui.Utils.getStyle('--cui-body-color') mainChart.options.scales.y.border.color = coreui.Utils.getStyle('--cui-border-color-translucent') mainChart.options.scales.y.grid.color = coreui.Utils.getStyle('--cui-border-color-translucent') mainChart.options.scales.y.ticks.color = coreui.Utils.getStyle('--cui-body-color') cardChart1.update() cardChart2.update() mainChart.update() }) /** * Generates a random integer between min and max (inclusive) * @param {number} min - Minimum value * @param {number} max - Maximum value * @returns {number} Random integer between min and max */ const random = (min, max) => Math.floor((Math.random() * (max - min + 1)) + min) const cardChart1 = new Chart(document.getElementById('card-chart1'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'transparent', borderColor: 'rgba(255,255,255,.55)', pointBackgroundColor: coreui.Utils.getStyle('--cui-primary'), data: [65, 59, 84, 84, 51, 55, 40] } ] }, options: { plugins: { legend: { display: false } }, maintainAspectRatio: false, scales: { x: { border: { display: false }, grid: { display: false, drawBorder: false }, ticks: { display: false } }, y: { min: 30, max: 89, display: false, grid: { display: false }, ticks: { display: false } } }, elements: { line: { borderWidth: 1, tension: 0.4 }, point: { radius: 4, hitRadius: 10, hoverRadius: 4 } } } }) const cardChart2 = new Chart(document.getElementById('card-chart2'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'transparent', borderColor: 'rgba(255,255,255,.55)', pointBackgroundColor: coreui.Utils.getStyle('--cui-info'), data: [1, 18, 9, 17, 34, 22, 11] } ] }, options: { plugins: { legend: { display: false } }, maintainAspectRatio: false, scales: { x: { border: { display: false }, grid: { display: false, drawBorder: false }, ticks: { display: false } }, y: { min: -9, max: 39, display: false, grid: { display: false }, ticks: { display: false } } }, elements: { line: { borderWidth: 1 }, point: { radius: 4, hitRadius: 10, hoverRadius: 4 } } } }) // eslint-disable-next-line no-unused-vars const cardChart3 = new Chart(document.getElementById('card-chart3'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(255,255,255,.2)', borderColor: 'rgba(255,255,255,.55)', data: [78, 81, 80, 45, 34, 12, 40], fill: true } ] }, options: { plugins: { legend: { display: false } }, maintainAspectRatio: false, scales: { x: { display: false }, y: { display: false } }, elements: { line: { borderWidth: 2, tension: 0.4 }, point: { radius: 0, hitRadius: 10, hoverRadius: 4 } } } }) // eslint-disable-next-line no-unused-vars const cardChart4 = new Chart(document.getElementById('card-chart4'), { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(255,255,255,.2)', borderColor: 'rgba(255,255,255,.55)', data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82], barPercentage: 0.6 } ] }, options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false, drawTicks: false }, ticks: { display: false } }, y: { border: { display: false }, grid: { display: false, drawBorder: false, drawTicks: false }, ticks: { display: false } } } } }) const mainChart = new Chart(document.getElementById('main-chart'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: `rgba(${coreui.Utils.getStyle('--cui-info-rgb')}, .1)`, borderColor: coreui.Utils.getStyle('--cui-info'), pointHoverBackgroundColor: '#fff', borderWidth: 2, data: [ random(50, 200), random(50, 200), random(50, 200), random(50, 200), random(50, 200), random(50, 200), random(50, 200) ], fill: true }, { label: 'My Second dataset', borderColor: coreui.Utils.getStyle('--cui-success'), pointHoverBackgroundColor: '#fff', borderWidth: 2, data: [ random(50, 200), random(50, 200), random(50, 200), random(50, 200), random(50, 200), random(50, 200), random(50, 200) ] } ] }, options: { maintainAspectRatio: false, plugins: { annotation: { annotations: { line1: { type: 'line', yMin: 95, yMax: 95, borderColor: coreui.Utils.getStyle('--cui-danger'), borderWidth: 1, borderDash: [8, 5] } } }, legend: { display: false } }, scales: { x: { grid: { color: coreui.Utils.getStyle('--cui-border-color-translucent'), drawOnChartArea: false }, ticks: { color: coreui.Utils.getStyle('--cui-body-color') } }, y: { border: { color: coreui.Utils.getStyle('--cui-border-color-translucent') }, grid: { color: coreui.Utils.getStyle('--cui-border-color-translucent') }, ticks: { beginAtZero: true, color: coreui.Utils.getStyle('--cui-body-color'), max: 250, maxTicksLimit: 5, stepSize: Math.ceil(250 / 5) } } }, elements: { line: { tension: 0.4 }, point: { radius: 0, hitRadius: 10, hoverRadius: 4, hoverBorderWidth: 3 } } } }) ================================================ FILE: src/js/popovers.js ================================================ /* global coreui */ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template popovers.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Popover Initialization * * This module automatically initializes all CoreUI Popover components on the page. * Popovers are similar to tooltips but can contain more content and are triggered * by clicks instead of hover. * * Any element with [data-coreui-toggle="popover"] will be initialized automatically. * Used on pages like views/notifications/popovers.html * * @see https://coreui.io/bootstrap/docs/components/popovers/ */ for (const element of document.querySelectorAll('[data-coreui-toggle="popover"]')) { // eslint-disable-next-line no-new new coreui.Popover(element) } ================================================ FILE: src/js/toasts.js ================================================ /* global coreui */ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template toasts.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Toast Notifications * * This module handles the live toast notification demo on views/notifications/toasts.html * Toasts are lightweight notifications that appear temporarily to show messages to users. * * This implementation shows a toast when the demo button is clicked. * * @see https://coreui.io/bootstrap/docs/components/toasts/ */ const toastTrigger = document.getElementById('liveToastBtn') const toastLiveExample = document.getElementById('liveToast') if (toastTrigger) { toastTrigger.addEventListener('click', () => { const toast = new coreui.Toast(toastLiveExample) toast.show() }) } ================================================ FILE: src/js/tooltips.js ================================================ /* global coreui */ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template tooltips.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Tooltip Initialization * * This module automatically initializes all CoreUI Tooltip components on the page. * Tooltips display helpful text on hover and are used throughout the template * for additional context and information. * * Any element with [data-coreui-toggle="tooltip"] will be initialized automatically. * Used on pages like views/notifications/tooltips.html * * @see https://coreui.io/bootstrap/docs/components/tooltips/ */ for (const element of document.querySelectorAll('[data-coreui-toggle="tooltip"]')) { // eslint-disable-next-line no-new new coreui.Tooltip(element) } ================================================ FILE: src/js/widgets.js ================================================ /* global Chart, coreui */ /** * -------------------------------------------------------------------------- * CoreUI Boostrap Admin Template widgets.js * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * Widgets Page Charts * * This module initializes and manages all charts on the Widgets page (views/widgets.html). * It includes multiple chart types: * - Card charts (compact charts for cards) * - Sparkline charts (mini bar and line charts) * - Social box charts (brand-specific charts) * * All charts are configured with: * - Custom CoreUI tooltips * - Theme-aware color updates (dark/light mode support) * - Randomly generated demo data */ // Configure Chart.js defaults for custom tooltips Chart.defaults.pointHitDetectionRadius = 1 Chart.defaults.plugins.tooltip.enabled = false Chart.defaults.plugins.tooltip.mode = 'index' Chart.defaults.plugins.tooltip.position = 'nearest' Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips Chart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color') document.documentElement.addEventListener('ColorSchemeChange', () => { cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary') cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info') cardChart1.update() cardChart2.update() }) const cardChart1 = new Chart(document.getElementById('card-chart1'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'transparent', borderColor: 'rgba(255,255,255,.55)', pointBackgroundColor: coreui.Utils.getStyle('--cui-primary'), data: [65, 59, 84, 84, 51, 55, 40] } ] }, options: { plugins: { legend: { display: false } }, maintainAspectRatio: false, scales: { x: { border: { display: false }, grid: { display: false, drawBorder: false }, ticks: { display: false } }, y: { min: 30, max: 89, display: false, grid: { display: false }, ticks: { display: false } } }, elements: { line: { borderWidth: 1, tension: 0.4 }, point: { radius: 4, hitRadius: 10, hoverRadius: 4 } } } }) const cardChart2 = new Chart(document.getElementById('card-chart2'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'transparent', borderColor: 'rgba(255,255,255,.55)', pointBackgroundColor: coreui.Utils.getStyle('--cui-info'), data: [1, 18, 9, 17, 34, 22, 11] } ] }, options: { plugins: { legend: { display: false } }, maintainAspectRatio: false, scales: { x: { border: { display: false }, grid: { display: false, drawBorder: false }, ticks: { display: false } }, y: { min: -9, max: 39, display: false, grid: { display: false }, ticks: { display: false } } }, elements: { line: { borderWidth: 1 }, point: { radius: 4, hitRadius: 10, hoverRadius: 4 } } } }) // eslint-disable-next-line no-unused-vars const cardChart3 = new Chart(document.getElementById('card-chart3'), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(255,255,255,.2)', borderColor: 'rgba(255,255,255,.55)', data: [78, 81, 80, 45, 34, 12, 40], fill: true } ] }, options: { plugins: { legend: { display: false } }, maintainAspectRatio: false, scales: { x: { display: false }, y: { display: false } }, elements: { line: { borderWidth: 2, tension: 0.4 }, point: { radius: 0, hitRadius: 10, hoverRadius: 4 } } } }) // eslint-disable-next-line no-unused-vars const cardChart4 = new Chart(document.getElementById('card-chart4'), { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(255,255,255,.2)', borderColor: 'rgba(255,255,255,.55)', data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82], barPercentage: 0.6 } ] }, options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false, drawTicks: false }, ticks: { display: false } }, y: { border: { display: false }, grid: { display: false, drawBorder: false, drawTicks: false }, ticks: { display: false } } } } }) // Random Numbers const random = (min, max) => Math.floor((Math.random() * (max - min + 1)) + min) // eslint-disable-next-line no-unused-vars const sparklineChart1 = new Chart(document.getElementById('sparkline-chart-1'), { type: 'bar', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], datasets: [ { backgroundColor: coreui.Utils.getStyle('--cui-primary'), borderColor: 'transparent', borderWidth: 1, data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)] } ] }, options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } } } }) // eslint-disable-next-line no-unused-vars const sparklineChart2 = new Chart(document.getElementById('sparkline-chart-2'), { type: 'bar', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], datasets: [ { backgroundColor: coreui.Utils.getStyle('--cui-warning'), borderColor: 'transparent', borderWidth: 1, data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)] } ] }, options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } } } }) // eslint-disable-next-line no-unused-vars const sparklineChart3 = new Chart(document.getElementById('sparkline-chart-3'), { type: 'bar', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], datasets: [ { backgroundColor: coreui.Utils.getStyle('--cui-success'), borderColor: 'transparent', borderWidth: 1, data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)] } ] }, options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } } } }) // eslint-disable-next-line no-unused-vars const sparklineChart4 = new Chart(document.getElementById('sparkline-chart-4'), { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [ { backgroundColor: 'transparent', borderColor: coreui.Utils.getStyle('--cui-info'), borderWidth: 2, data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)] } ] }, options: { maintainAspectRatio: false, elements: { line: { tension: 0.4 }, point: { radius: 0 } }, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } } } }) // eslint-disable-next-line no-unused-vars const sparklineChart5 = new Chart(document.getElementById('sparkline-chart-5'), { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [ { backgroundColor: 'transparent', borderColor: coreui.Utils.getStyle('--cui-success'), borderWidth: 2, data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)] } ] }, options: { maintainAspectRatio: false, elements: { line: { tension: 0.4 }, point: { radius: 0 } }, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } } } }) // eslint-disable-next-line no-unused-vars const sparklineChart6 = new Chart(document.getElementById('sparkline-chart-6'), { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [ { backgroundColor: 'transparent', borderColor: coreui.Utils.getStyle('--cui-danger'), borderWidth: 2, data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)] } ] }, options: { maintainAspectRatio: false, elements: { line: { tension: 0.4 }, point: { radius: 0 } }, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } } } }) const brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'] const brandBoxChartOptions = { elements: { line: { tension: 0.4 }, point: { radius: 0, hitRadius: 10, hoverRadius: 4, hoverBorderWidth: 3 } }, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { display: false } } } // eslint-disable-next-line no-unused-vars const brandBoxChart1 = new Chart(document.getElementById('social-box-chart-1'), { type: 'line', data: { labels: brandBoxChartLabels, datasets: [{ backgroundColor: 'rgba(255,255,255,.1)', borderColor: 'rgba(255,255,255,.55)', pointHoverBackgroundColor: '#fff', borderWidth: 2, data: [65, 59, 84, 84, 51, 55, 40], fill: true }] }, options: brandBoxChartOptions }) // eslint-disable-next-line no-unused-vars const brandBoxChart2 = new Chart(document.getElementById('social-box-chart-2'), { type: 'line', data: { labels: brandBoxChartLabels, datasets: [{ backgroundColor: 'rgba(255,255,255,.1)', borderColor: 'rgba(255,255,255,.55)', pointHoverBackgroundColor: '#fff', borderWidth: 2, data: [1, 13, 9, 17, 34, 41, 38], fill: true }] }, options: brandBoxChartOptions }) // eslint-disable-next-line no-unused-vars const brandBoxChart3 = new Chart(document.getElementById('social-box-chart-3'), { type: 'line', data: { labels: brandBoxChartLabels, datasets: [{ backgroundColor: 'rgba(255,255,255,.1)', borderColor: 'rgba(255,255,255,.55)', pointHoverBackgroundColor: '#fff', borderWidth: 2, data: [78, 81, 80, 45, 34, 12, 40], fill: true }] }, options: brandBoxChartOptions }) ================================================ FILE: src/pug/_layout/default.pug ================================================ - var count = 1000 doctype html include ../_partials/banner.pug include ../_mixins/breadcrumb.pug include ../_mixins/callout.pug include ../_mixins/callout-custom.pug include ../_mixins/docs-components.pug include ../_mixins/example.pug html(lang='en') head base(href=base) include ../_partials/head.pug block canonical block styles body include ../_partials/sidebar.pug .wrapper.d-flex.flex-column.min-vh-100 include ../_partials/header.pug .body.flex-grow-1 .container-lg.px-4 block view include ../_partials/footer.pug include ../_partials/scripts.pug ================================================ FILE: src/pug/_layout/pages.pug ================================================ - var page = true doctype html include ../_partials/banner.pug html(lang='en') head base(href=base) include ../_partials/head.pug block styles body .bg-body-tertiary.min-vh-100.d-flex.flex-row.align-items-center block view include ../_partials/scripts.pug ================================================ FILE: src/pug/_mixins/breadcrumb.pug ================================================ mixin breadcrumb(items) nav(aria-label="breadcrumb") ol.breadcrumb.my-0 each item, index in items - var href = item.href - var label = item.label li.breadcrumb-item(class=(index === items.length - 1 ? 'active' : false)) if (href) a(href=(href ? href : '#'))= label ? label : item else span= label ? label : item ================================================ FILE: src/pug/_mixins/callout-custom.pug ================================================ mixin callout-custom .callout.callout-info.bg-body block ================================================ FILE: src/pug/_mixins/callout.pug ================================================ mixin callout(name, href) .callout.callout-info.bg-white | CoreUI #{name} has been created as an extension of Bootstrap #{name}. #{name} is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements. br br | For more information please visit our official | a(href=href target="_blank") documentation | . ================================================ FILE: src/pug/_mixins/docs-components.pug ================================================ mixin docs-components(href) .bg-primary.bg-opacity-10.border.border-2.border-primary.rounded.mb-4 .row.d-flex.align-items-center.p-3.px-xl-4.flex-xl-nowrap .col-xl-auto.col-12.d-none.d-xl-block.p-0 img.img-fluid(src='assets/img/components.webp' width='160px' height='160px' alt='CoreUI PRO hexagon') .col-md.col-12.px-lg-4 | Our Admin Panel isn’t just a mix of third-party components. It’s the only open-source Bootstrap dashboard built on a professional, enterprise-grade UI Components Library. | This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs. .col-md-auto.col-12.mt-3.mt-lg-0 a.btn.btn-primary.text-nowrap.text-white(href=href target="_blank" rel='noopener noreferrer') Explore Documentation ================================================ FILE: src/pug/_mixins/example.pug ================================================ mixin example(url, classNames) .example ul.nav.nav-underline-border(role="tablist") li.nav-item a.nav-link.active(data-coreui-toggle="tab" href="#preview-"+count role="tab") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play") | | Preview if url li.nav-item a.nav-link(href=url target="_blank") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code") | | Code .tab-content.rounded-bottom(class=classNames) .tab-pane.p-3.active.preview(role="tabpanel" id="preview-"+count++ ) block ================================================ FILE: src/pug/_partials/banner.pug ================================================ // * CoreUI - Free Bootstrap Admin Template * @version v5.3.0 * @link https://coreui.io/product/free-bootstrap-admin-template/ * Copyright (c) 2025 creativeLabs Łukasz Holeczek * Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE) = "\n" ================================================ FILE: src/pug/_partials/docs-icons.pug ================================================ .bg-warning.bg-opacity-10.border.border-2.border-warning.rounded.mb-4 .row.d-flex.align-items-center.p-3.px-xl-4.flex-xl-nowrap .col-xl-auto.col-12.d-none.d-xl-block.p-0 img.img-fluid(src='assets/img/icons.webp' width='160px' height='160px' alt='CoreUI Icons') .col-md.col-12.px-lg-4 | CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, | and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You | can use them in your digital products for web or mobile app. For more information please | visit our documentation. .col-md-auto.col-12.mt-3.mt-lg-0 a.btn.btn-warning.text-nowrap.text-white(href='https://coreui.io/bootstrap/docs/icons/' target='_blank' rel='noopener noreferrer') | Explore Documentation ================================================ FILE: src/pug/_partials/footer.pug ================================================ footer.footer.px-4 div a(href='https://coreui.io') CoreUI a(href='https://coreui.io/product/free-bootstrap-admin-template/') Bootstrap Admin Template | © 2025 creativeLabs. div.ms-auto | Powered by  a(href='https://coreui.io/bootstrap/docs/') CoreUI UI Components ================================================ FILE: src/pug/_partials/head.pug ================================================ meta(charset='utf-8') meta(http-equiv='X-UA-Compatible', content='IE=edge') meta(name='viewport', content='width=device-width, initial-scale=1.0, shrink-to-fit=no') meta(name='description', content='CoreUI - Open Source Bootstrap Admin Template') meta(name='author', content='Łukasz Holeczek') meta(name='keyword', content='Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard') title CoreUI Free Bootstrap Admin Template link(rel='apple-touch-icon', sizes='57x57', href='assets/favicon/apple-icon-57x57.png') link(rel='apple-touch-icon', sizes='60x60', href='assets/favicon/apple-icon-60x60.png') link(rel='apple-touch-icon', sizes='72x72', href='assets/favicon/apple-icon-72x72.png') link(rel='apple-touch-icon', sizes='76x76', href='assets/favicon/apple-icon-76x76.png') link(rel='apple-touch-icon', sizes='114x114', href='assets/favicon/apple-icon-114x114.png') link(rel='apple-touch-icon', sizes='120x120', href='assets/favicon/apple-icon-120x120.png') link(rel='apple-touch-icon', sizes='144x144', href='assets/favicon/apple-icon-144x144.png') link(rel='apple-touch-icon', sizes='152x152', href='assets/favicon/apple-icon-152x152.png') link(rel='apple-touch-icon', sizes='180x180', href='assets/favicon/apple-icon-180x180.png') link(rel='icon', type='image/png', sizes='192x192', href='assets/favicon/android-icon-192x192.png') link(rel='icon', type='image/png', sizes='32x32', href='assets/favicon/favicon-32x32.png') link(rel='icon', type='image/png', sizes='96x96', href='assets/favicon/favicon-96x96.png') link(rel='icon', type='image/png', sizes='16x16', href='assets/favicon/favicon-16x16.png') link(rel='manifest', href='assets/favicon/manifest.json') meta(name='msapplication-TileColor', content='#ffffff') meta(name='msapplication-TileImage', content='assets/favicon/ms-icon-144x144.png') meta(name='theme-color', content='#ffffff') // Vendors styles link(rel='stylesheet' href='node_modules/simplebar/dist/simplebar.css') link(rel='stylesheet' href='css/vendors/simplebar.css') // Main styles for this application link(href='css/style.css', rel='stylesheet') // We use those styles to show code examples, you should remove them in your application. link(href='css/examples.css', rel='stylesheet') script(src='js/config.js') script(src='js/color-modes.js') ================================================ FILE: src/pug/_partials/header.pug ================================================ header.header.header-sticky.p-0.mb-4 .container-fluid.border-bottom.px-4 button.header-toggler(type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;") svg.icon.icon-lg use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu") ul.header-nav.d-none.d-lg-flex li.nav-item a.nav-link(href="#") Dashboard li.nav-item a.nav-link(href="#") Users li.nav-item a.nav-link(href="#") Settings ul.header-nav.ms-auto li.nav-item a.nav-link(href="#") svg.icon.icon-lg use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell") li.nav-item a.nav-link(href="#") svg.icon.icon-lg use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-list-rich") li.nav-item a.nav-link(href="#") svg.icon.icon-lg use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open") ul.header-nav li.nav-item.py-1 .vr.h-100.mx-2.text-body.text-opacity-75 li.nav-item.dropdown button.btn.btn-link.nav-link.py-2.px-2.d-flex.align-items-center(type="button" aria-expanded="false" data-coreui-toggle="dropdown") svg.icon.icon-lg.theme-icon-active use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast") ul.dropdown-menu.dropdown-menu-end(style='--cui-dropdown-min-width: 8rem;') li button.dropdown-item.d-flex.align-items-center(type='button' data-coreui-theme-value='light') svg.icon.icon-lg.me-3 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-sun") | Light li button.dropdown-item.d-flex.align-items-center(type='button' data-coreui-theme-value='dark') svg.icon.icon-lg.me-3 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon") | Dark li button.dropdown-item.d-flex.align-items-center.active(type='button' data-coreui-theme-value='auto') svg.icon.icon-lg.me-3 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast") | Auto li.nav-item.py-1 .vr.h-100.mx-2.text-body.text-opacity-75 li.nav-item.dropdown a.nav-link.py-0.pe-0(data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false") .avatar.avatar-md img.avatar-img(src="assets/img/avatars/8.jpg" alt="user@email.com") .dropdown-menu.dropdown-menu-end.pt-0 .dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.rounded-top.mb-2 Account a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell") | | Updates span.badge.badge-sm.bg-info.ms-2 42 a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open") | | Messages span.badge.badge-sm.bg-success.ms-2 42 a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-task") | | Tasks span.badge.badge-sm.bg-danger.ms-2 42 a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square") | | Comments span.badge.badge-sm.bg-warning.ms-2 42 .dropdown-header.bg-body-tertiary.text-body-secondary.fw-semibold.my-2 .fw-semibold Settings a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user") | | Profile a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings") | | Settings a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-credit-card") | | Payments span.badge.badge-sm.bg-secondary.ms-2 42 a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-file") | | Projects span.badge.badge-sm.bg-primary.ms-2 42 .dropdown-divider a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lock-locked") | | Lock Account a.dropdown-item(href="#") svg.icon.me-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout") | | Logout .container-fluid.px-4 block breadcrumb ================================================ FILE: src/pug/_partials/scripts.pug ================================================ // CoreUI and necessary plugins script(src='node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js') script(src='node_modules/simplebar/dist/simplebar.min.js') script. const header = document.querySelector('header.header'); document.addEventListener('scroll', () => { if (header) { header.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0); } }); block scripts script block js ================================================ FILE: src/pug/_partials/sidebar.pug ================================================ .sidebar.sidebar-dark.sidebar-fixed.border-end#sidebar .sidebar-header.border-bottom .sidebar-brand svg.sidebar-brand-full(width="88" height="32" alt="CoreUI Logo") use(xlink:href="assets/brand/coreui.svg#full") | svg.sidebar-brand-narrow(width="32" height="32" alt="CoreUI Logo") use(xlink:href="assets/brand/coreui.svg#signet") button.btn-close.d-lg-none(type='button' data-coreui-theme="dark" aria-label='Close' onclick='coreui.Sidebar.getInstance(document.querySelector("#sidebar")).toggle()') ul.sidebar-nav(data-coreui="navigation" data-simplebar) li.nav-item a.nav-link(href='index.html') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer") | Dashboard span.badge.badge-sm.bg-info.ms-auto NEW li.nav-title | Theme li.nav-item a.nav-link(href='colors.html') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-drop") | Colors li.nav-item a.nav-link(href='typography.html') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-pencil") | Typography li.nav-title | Components li.nav-group a.nav-link.nav-group-toggle(href='#') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-puzzle") | Base ul.nav-group-items.compact li.nav-item a.nav-link(href='base/accordion.html') span.nav-icon span.nav-icon-bullet | Accordion li.nav-item a.nav-link(href='base/breadcrumb.html') span.nav-icon span.nav-icon-bullet | Breadcrumb li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/components/calendar/' target='_blank') span.nav-icon span.nav-icon-bullet | Calendar svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='base/cards.html') span.nav-icon span.nav-icon-bullet | Cards li.nav-item a.nav-link(href='base/carousel.html') span.nav-icon span.nav-icon-bullet | Carousel li.nav-item a.nav-link(href='base/collapse.html') span.nav-icon span.nav-icon-bullet | Collapse li.nav-item a.nav-link(href='base/list-group.html') span.nav-icon span.nav-icon-bullet | List group li.nav-item a.nav-link(href='base/navs-tabs.html') span.nav-icon span.nav-icon-bullet | Navs & Tabs li.nav-item a.nav-link(href='base/pagination.html') span.nav-icon span.nav-icon-bullet | Pagination li.nav-item a.nav-link(href='base/placeholders.html') span.nav-icon span.nav-icon-bullet | Placeholders li.nav-item a.nav-link(href='base/popovers.html') span.nav-icon span.nav-icon-bullet | Popovers li.nav-item a.nav-link(href='base/progress.html') span.nav-icon span.nav-icon-bullet | Progress li.nav-item a.nav-link(href='base/spinners.html') span.nav-icon span.nav-icon-bullet | Spinners li.nav-item a.nav-link(href='base/tables.html') span.nav-icon span.nav-icon-bullet | Tables li.nav-item a.nav-link(href='base/tooltips.html') span.nav-icon span.nav-icon-bullet | Tooltips li.nav-group a.nav-link.nav-group-toggle(href='#') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cursor") | Buttons ul.nav-group-items.compact li.nav-item a.nav-link(href='buttons/buttons.html') span.nav-icon span.nav-icon-bullet | Buttons li.nav-item a.nav-link(href='buttons/button-group.html') span.nav-icon span.nav-icon-bullet | Buttons Group li.nav-item a.nav-link(href='buttons/dropdowns.html') span.nav-icon span.nav-icon-bullet | Dropdowns li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/components/loading-buttons/' target='_blank') span.nav-icon span.nav-icon-bullet | Loading Buttons svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='charts.html') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie") | Charts li.nav-group a.nav-link.nav-group-toggle(href='#') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-notes") | Forms ul.nav-group-items.compact li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/forms/autocomplete/' target='_blank') span.nav-icon span.nav-icon-bullet | Autocomplete svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='forms/checks-radios.html') span.nav-icon span.nav-icon-bullet | Checks and radios li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/forms/date-picker/' target='_blank') span.nav-icon span.nav-icon-bullet | Date Picker svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/forms/date-range-picker/' target='_blank') span.nav-icon span.nav-icon-bullet | Date Range Picker span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='forms/floating-labels.html') span.nav-icon span.nav-icon-bullet | Floating labels li.nav-item a.nav-link(href='forms/form-control.html') span.nav-icon span.nav-icon-bullet | Form Control li.nav-item a.nav-link(href='forms/input-group.html') span.nav-icon span.nav-icon-bullet | Input group li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/forms/multi-select/' target='_blank') span.nav-icon span.nav-icon-bullet | Multi Select svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='forms/range.html') span.nav-icon span.nav-icon-bullet | Range li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/forms/range-slider/' target='_blank') span.nav-icon span.nav-icon-bullet | Range Slider svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/forms/rating/' target='_blank') span.nav-icon span.nav-icon-bullet | Rating svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='forms/select.html') span.nav-icon span.nav-icon-bullet | Select li.nav-item a.nav-link(href='https://coreui.io/bootstrap/docs/forms/time-picker/' target='_blank') span.nav-icon span.nav-icon-bullet | Time Picker svg.icon.icon-sm.ms-2 use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link") span.badge.badge-sm.bg-danger.ms-auto PRO li.nav-item a.nav-link(href='forms/layout.html') span.nav-icon span.nav-icon-bullet | Layout li.nav-item a.nav-link(href='forms/validation.html') span.nav-icon span.nav-icon-bullet | Validation li.nav-group a.nav-link.nav-group-toggle(href='#') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star") | Icons ul.nav-group-items.compact li.nav-item a.nav-link(href='icons/coreui-icons-free.html') span.nav-icon span.nav-icon-bullet | CoreUI Icons span.badge.badge-sm.bg-success.ms-auto Free li.nav-item a.nav-link(href='icons/coreui-icons-brand.html') span.nav-icon span.nav-icon-bullet | CoreUI Icons - Brand li.nav-item a.nav-link(href='icons/coreui-icons-flag.html') span.nav-icon span.nav-icon-bullet | CoreUI Icons - Flag li.nav-group a.nav-link.nav-group-toggle(href='#') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell") | Notifications ul.nav-group-items.compact li.nav-item a.nav-link(href='notifications/alerts.html') span.nav-icon span.nav-icon-bullet | Alerts li.nav-item a.nav-link(href='notifications/badge.html') span.nav-icon span.nav-icon-bullet | Badge li.nav-item a.nav-link(href='notifications/modals.html') span.nav-icon span.nav-icon-bullet | Modals li.nav-item a.nav-link(href='notifications/toasts.html') span.nav-icon span.nav-icon-bullet | Toasts li.nav-item a.nav-link(href='widgets.html') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-calculator") | Widgets span.badge.badge-sm.bg-info.ms-auto NEW li.nav-divider li.nav-title | Extras li.nav-group a.nav-link.nav-group-toggle(href='#') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star") | Pages ul.nav-group-items.compact li.nav-item a.nav-link(href='login.html' target="_top") svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout") | Login li.nav-item a.nav-link(href='register.html' target="_top") svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout") | Register li.nav-item a.nav-link(href='404.html' target="_top") svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug") | Error 404 li.nav-item a.nav-link(href='500.html' target="_top") svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug") | Error 500 li.nav-item.mt-auto a.nav-link(href='https://coreui.io/bootstrap/docs/templates/installation/' target='_blank') svg.nav-icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-description") | Docs li.nav-item a.nav-link.text-primary.fw-semibold(href="https://coreui.io/product/bootstrap-dashboard-template/" target="_top") svg.nav-icon.text-primary use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-layers") | Try CoreUI PRO .sidebar-footer.border-top.d-none.d-md-flex button.sidebar-toggler(type="button" data-coreui-toggle="unfoldable") ================================================ FILE: src/pug/views/404.pug ================================================ extends ../_layout/pages.pug block view .container .row.justify-content-center .col-md-6 .clearfix h1.float-start.display-3.me-4 404 h4.pt-3 Oops! You're lost. p.text-body-secondary The page you are looking for was not found. .input-group span.input-group-text svg.icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass") | input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?') button.btn.btn-info(type='button') Search ================================================ FILE: src/pug/views/500.pug ================================================ extends ../_layout/pages.pug block view .container .row.justify-content-center .col-md-6 .clearfix h1.float-start.display-3.me-4 500 h4.pt-3 Houston, we have a problem! p.text-body-secondary The page you are looking for is temporarily unavailable. .input-group span.input-group-text svg.icon use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass") | input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?') button.btn.btn-info(type='button') Search ================================================ FILE: src/pug/views/base/accordion.pug ================================================ extends ../../_layout/default.pug block canonical link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/accordion/') block breadcrumb +breadcrumb( [ { href: '#', label: 'Home'}, { label: 'Components'}, { label: 'Base'}, 'Accordion' ], ) block view +docs-components('https://coreui.io/bootstrap/docs/components/accordion/') .row .col-12 .card.mb-4 .card-header strong Accordion .card-body p.text-body-secondary.small | Click the accordions below to expand/collapse the accordion content. +example('https://coreui.io/bootstrap/docs/components/accordion/#how-it-works') #accordionExample.accordion .accordion-item h2#headingOne.accordion-header button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseOne' aria-expanded='false' aria-controls='collapseOne') | Accordion Item #1 #collapseOne.accordion-collapse.collapse(aria-labelledby='headingOne' data-coreui-parent='#accordionExample' style='') .accordion-body strong This is the first item's accordion body. | It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the code .accordion-body | , though the transition does limit overflow. .accordion-item h2#headingTwo.accordion-header button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo') | Accordion Item #2 #collapseTwo.accordion-collapse.collapse(aria-labelledby='headingTwo' data-coreui-parent='#accordionExample' style='') .accordion-body strong This is the second item's accordion body. | It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the code .accordion-body | , though the transition does limit overflow. .accordion-item h2#headingThree.accordion-header button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseThree' aria-expanded='false' aria-controls='collapseThree') | Accordion Item #3 #collapseThree.accordion-collapse.collapse(aria-labelledby='headingThree' data-coreui-parent='#accordionExample' style='') .accordion-body strong This is the third item's accordion body. | It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the code .accordion-body | , though the transition does limit overflow. .col-12 .card.mb-4 .card-header strong Accordion span.small.ms-1 Flush .card-body p.text-body-secondary.small | Add code .accordion-flush | to remove the default code background-color | , some borders, and some rounded corners to render accordions edge-to-edge with their parent container. +example('https://coreui.io/bootstrap/docs/components/accordion/#flush') #accordionFlushExample.accordion.accordion-flush .accordion-item h2#flush-headingOne.accordion-header button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseOne' aria-expanded='false' aria-controls='flush-collapseOne') | Accordion Item #1 #flush-collapseOne.accordion-collapse.collapse(aria-labelledby='flush-headingOne' data-coreui-parent='#accordionFlushExample') .accordion-body | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. .accordion-item h2#flush-headingTwo.accordion-header button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseTwo' aria-expanded='false' aria-controls='flush-collapseTwo') | Accordion Item #2 #flush-collapseTwo.accordion-collapse.collapse(aria-labelledby='flush-headingTwo' data-coreui-parent='#accordionFlushExample') .accordion-body | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. .accordion-item h2#flush-headingThree.accordion-header button.accordion-button.collapsed(type='button' data-coreui-toggle='collapse' data-coreui-target='#flush-collapseThree' aria-expanded='false' aria-controls='flush-collapseThree') | Accordion Item #3 #flush-collapseThree.accordion-collapse.collapse(aria-labelledby='flush-headingThree' data-coreui-parent='#accordionFlushExample') .accordion-body | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. ================================================ FILE: src/pug/views/base/breadcrumb.pug ================================================ extends ../../_layout/default.pug block canonical link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/breadcrumb/') block breadcrumb +breadcrumb( [ { href: '#', label: 'Home'}, { label: 'Components'}, { label: 'Base'}, 'Breadcrumb' ] ) block view +docs-components('https://coreui.io/bootstrap/docs/components/breadcrumb/') .row .col-lg-12 .card.mb-4 .card-header strong Breadcrumb .card-body p.text-body-secondary.small | The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/::before') code ::before | and a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/content') code content | . +example('https://coreui.io/bootstrap/docs/components/breadcrumb/#example') nav(aria-label='breadcrumb', role='navigation') ol.breadcrumb li.breadcrumb-item.active(aria-current='page') Home nav(aria-label='breadcrumb', role='navigation') ol.breadcrumb li.breadcrumb-item a(href='#') Home li.breadcrumb-item.active(aria-current='page') Library nav(aria-label='breadcrumb', role='navigation') ol.breadcrumb li.breadcrumb-item a(href='#') Home li.breadcrumb-item a(href='#') Library li.breadcrumb-item.active(aria-current='page') Data nav.breadcrumb a.breadcrumb-item(href='#') Home a.breadcrumb-item(href='#') Library a.breadcrumb-item(href='#') Data span.breadcrumb-item.active Bootstrap // /.row ================================================ FILE: src/pug/views/base/cards.pug ================================================ extends ../../_layout/default.pug block canonical link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/card/') block breadcrumb +breadcrumb( [ { href: '#', label: 'Home'}, { label: 'Components'}, { label: 'Base'}, 'Cards' ], ) block view +docs-components('https://coreui.io/bootstrap/docs/components/card/') .card.mb-4 .card-header strong Card span.small.ms-1 Example .card-body p.text-body-secondary.small | Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards have no top, left, and right margins by default, so use a(href='https://coreui.io/bootstrap/docs/utilities/spacing/') spacing utilities | as needed. They have no fixed width to start, so they’ll fill the full width of its parent. p.text-body-secondary.small | Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various a(href='#sizing') sizing options | . +example('https://coreui.io/bootstrap/docs/components/card/#example') .card(style='width: 18rem;') img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. a.btn.btn-primary(href='#') Go somewhere .card.mb-4 .card-header strong Card span.small.ms-1 Body .card-body p.text-body-secondary.small | The main block of a card is the code .card-body | . Use it whenever you need a padded section within a card. +example('https://coreui.io/bootstrap/docs/components/card/#body') .card .card-body | This is some text within a card body. .card.mb-4 .card-header strong Card span.small.ms-1 Titles, text, and links .card-body p.text-body-secondary.small | Card titles are managed by adding code .card-title | to a code = '' | tag. Identically, links are attached and collected next to each other by adding code .card-link | to an code = '' | tag. p.text-body-secondary.small | Subtitles are managed by adding a code .card-subtitle | to a code = '' | tag. If the code .card-title | also, the code .card-subtitle | items are stored in a code .card-body | item, the card title, and subtitle are arranged rightly. +example('https://coreui.io/bootstrap/docs/components/card/#titles-text-and-links') .card(style='width: 18rem;') .card-body h5.card-title Card title h6.card-subtitle.mb-2.text-body-secondary Card subtitle p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. a.card-link(href='#') Card link a.card-link(href='#') Another link .card.mb-4 .card-header strong Card span.small.ms-1 Images .card-body p.text-body-secondary.small code .card-img-top | places a picture to the top of the card. With code .card-text | , text can be added to the card. Text within code .card-text | can additionally be styled with the regular HTML tags. +example('https://coreui.io/bootstrap/docs/components/card/#titles-text-and-links') .card(style='width: 18rem;') img.card-img-top(src='assets/img/full.jpg' alt='') .card-body p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .card.mb-4 .card-header strong Card span.small.ms-1 List groups .card-body p.text-body-secondary.small Create lists of content in a card with a flush list group. +example('https://coreui.io/bootstrap/docs/components/card/#list-groups') .row .col-lg-4 .card ul.list-group.list-group-flush li.list-group-item An item li.list-group-item A second item li.list-group-item A third item .col-lg-4 .card .card-header | Featured ul.list-group.list-group-flush li.list-group-item An item li.list-group-item A second item li.list-group-item A third item .col-lg-4 .card ul.list-group.list-group-flush li.list-group-item An item li.list-group-item A second item li.list-group-item A third item .card-footer | Card footer .card.mb-4 .card-header strong Card span.small.ms-1 Kitchen sink .card-body p.text-body-secondary.small | Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. +example('https://coreui.io/bootstrap/docs/components/card/#kitchen-sink') .card(style='width: 18rem;') img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. ul.list-group.list-group-flush li.list-group-item An item li.list-group-item A second item li.list-group-item A third item .card-body a.card-link(href='#') Card link a.card-link(href='#') Another link .card.mb-4 .card-header strong Card span.small.ms-1 Header and footer .card-body p.text-body-secondary.small Add an optional header and/or footer within a card. +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer') .card.mb-3 .card-header | Featured .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere p.text-body-secondary.small | Card headers can be styled by adding code .card-header | to code = '' | elements. +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer') .card.mb-3 h5.card-header Featured .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer') .card.mb-3 .card-header | Quote .card-body blockquote.blockquote.mb-0 p A well-known quote, contained in a blockquote element. footer.blockquote-footer | Someone famous in cite(title='Source Title') Source Title +example('https://coreui.io/bootstrap/docs/components/card/#header-and-footer') .card.text-center .card-header | Featured .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .card-footer.text-body-secondary | 2 days ago .card.mb-4 .card-header strong Card span.small.ms-1 Sizing - Using grid markup .card-body p.text-body-secondary.small Using the grid, wrap cards in columns and rows as needed. +example('https://coreui.io/bootstrap/docs/components/card/#using-grid-markup') .row .col-sm-6 .card .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .col-sm-6 .card .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .card.mb-4 .card-header strong Card span.small.ms-1 Sizing - Using utilities .card-body p.text-body-secondary.small | Use some of a(href='https://coreui.io/bootstrap/docs/utilities/sizing/') available sizing utilities | to rapidly set a card’s width. +example('https://coreui.io/bootstrap/docs/components/card/#using-utilities') .card.w-75.mb-3 .card-body h5.card-title Card title p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Button .card.w-50 .card-body h5.card-title Card title p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Button .card.mb-4 .card-header strong Card span.small.ms-1 Sizing - Using custom CSS .card-body p.text-body-secondary.small Use custom CSS in your stylesheets or as inline styles to set a width. +example('https://coreui.io/bootstrap/docs/components/card/#using-custom-css') .card(style='width: 18rem;') .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .card.mb-4 .card-header strong Card span.small.ms-1 Text alignment .card-body p.text-body-secondary.small | You can instantly change the text arrangement of any card—in its whole or specific parts—with a(href='https://coreui.io/bootstrap/docs/utilities/text/#text-alignment') text align classes | . +example('https://coreui.io/bootstrap/docs/components/card/#text-alignment') .card.mb-3(style='width: 18rem;') .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .card.mb-3.text-center(style='width: 18rem;') .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .card.mb-3.text-end(style='width: 18rem;') .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .card.mb-4 .card-header strong Card span.small.ms-1 Navigation .card-body p.text-body-secondary.small | Add some navigation to a card’s header (or block) with Bootstrap’s a(href='https://coreui.io/bootstrap/docs/components/navs-tabs/') nav components | . +example('https://coreui.io/bootstrap/docs/components/card/#navigation') .card.text-center .card-header ul.nav.nav-tabs.card-header-tabs li.nav-item a.nav-link.active(aria-current='true' href='#') Active li.nav-item a.nav-link(href='#') Link li.nav-item a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere +example('https://coreui.io/bootstrap/docs/components/card/#navigation') .card.text-center .card-header ul.nav.nav-pills.card-header-pills li.nav-item a.nav-link.active(href='#') Active li.nav-item a.nav-link(href='#') Link li.nav-item a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled .card-body h5.card-title Special title treatment p.card-text With supporting text below as a natural lead-in to additional content. a.btn.btn-primary(href='#') Go somewhere .card.mb-4 .card-header strong Card span.small.ms-1 Image caps .card-body p.text-body-secondary.small | Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card. +example('https://coreui.io/bootstrap/docs/components/card/#image-caps') .row .col-md-6 .card.mb-3 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.card-text small.text-body-secondary Last updated 3 mins ago .col-md-6 .card .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.card-text small.text-body-secondary Last updated 3 mins ago img.card-img-bottom(src='assets/img/full.jpg' alt='') .card.mb-4 .card-header strong Card span.small.ms-1 Image overlays .card-body p.text-body-secondary.small | Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities. +example('https://coreui.io/bootstrap/docs/components/card/#image-overlays') .card.bg-dark.text-white img.card-img(src='assets/img/full.jpg' alt='') .card-img-overlay h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.card-text Last updated 3 mins ago .card.mb-4 .card-header strong Card span.small.ms-1 Horizontal .card-body p.text-body-secondary.small | Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with code .g-0 | and use code .col-md-* | classes to make the card horizontal at the code md | breakpoint. Further adjustments may be needed depending on your card content. +example('https://coreui.io/bootstrap/docs/components/card/#horizontal') .card .row.g-0 .col-md-4 img.card-img(src='assets/img/full.jpg' alt='') .col-md-8 .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.card-text small.text-body-secondary Last updated 3 mins ago .card.mb-4 .card-header strong Card span.small.ms-1 Card styles - Background and color .card-body p.text-body-secondary.small | Cards include various options for customizing their backgrounds, borders, and color. | Use a(href='https://coreui.io/bootstrap/docs/utilities/colors/') text color | and a(href='https://coreui.io/bootstrap/docs/utilities/background/') background utilities | to change the appearance of a card. +example('https://coreui.io/bootstrap/docs/components/card/#background-and-color') .row .col-xl-4 .card.text-white.bg-primary.mb-3 .card-header Header .card-body h5.card-title Primary card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.text-white.bg-secondary.mb-3 .card-header Header .card-body h5.card-title Secondary card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.text-white.bg-success.mb-3 .card-header Header .card-body h5.card-title Success card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.text-white.bg-danger.mb-3 .card-header Header .card-body h5.card-title Danger card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.text-white.bg-warning.mb-3 .card-header Header .card-body h5.card-title Warning card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.text-white.bg-info.mb-3 .card-header Header .card-body h5.card-title Info card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.text-dark.bg-light.mb-3 .card-header Header .card-body h5.card-title Light card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.text-white.bg-dark.mb-3 .card-header Header .card-body h5.card-title Dark card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .card.mb-4 .card-header strong Card span.small.ms-1 Card styles - Border .card-body p.text-body-secondary.small | Use a(href='https://coreui.io/bootstrap/docs/utilities/borders/') border utilities | to change just the code border-color | of a card. Note that you can put code .text-{color} | classes on the parent code .card | or a subset of the card’s contents as shown below. +example('https://coreui.io/bootstrap/docs/components/card/#border') .row .col-xl-4 .card.border-primary.mb-3 .card-header Header .card-body.text-primary h5.card-title Primary card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-secondary.mb-3 .card-header Header .card-body.text-body-secondary h5.card-title Secondary card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-success.mb-3 .card-header Header .card-body.text-success h5.card-title Success card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-danger.mb-3 .card-header Header .card-body.text-danger h5.card-title Danger card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-warning.mb-3 .card-header Header .card-body.text-warning h5.card-title Warning card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-info.mb-3 .card-header Header .card-body.text-info h5.card-title Info card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-light.mb-3 .card-header Header .card-body h5.card-title Light card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-dark.mb-3 .card-header Header .card-body.text-dark h5.card-title Dark card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .card.mb-4 .card-header strong Card span.small.ms-1 Top border .card-body p.text-body-secondary.small | Use a(href='https://coreui.io/bootstrap/docs/utilities/borders/') border utilities | to change just the code border-top-color | of a card. Note that you can put code .text-{color} | classes on the parent code .card | or a subset of the card’s contents as shown below. +example('https://coreui.io/bootstrap/docs/components/card/#top-border') .row .col-xl-4 .card.border-top-primary.border-top-3.mb-3 .card-header Header .card-body.text-primary h5.card-title Primary card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-top-secondary.border-top-3.mb-3 .card-header Header .card-body.text-body-secondary h5.card-title Secondary card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-top-success.border-top-3.mb-3 .card-header Header .card-body.text-success h5.card-title Success card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-top-danger.border-top-3.mb-3 .card-header Header .card-body.text-danger h5.card-title Danger card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-top-warning.border-top-3.mb-3 .card-header Header .card-body.text-warning h5.card-title Warning card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-top-info.border-top-3.mb-3 .card-header Header .card-body.text-info h5.card-title Info card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-top-light.border-top-3.mb-3 .card-header Header .card-body h5.card-title Light card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .col-xl-4 .card.border-top-dark.border-top-3.mb-3 .card-header Header .card-body.text-dark h5.card-title Dark card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .card.mb-4 .card-header strong Card span.small.ms-1 Mixins utilities .card-body p.text-body-secondary.small | You are able to adjust the borders on the card elements as needed, and even exclude their code background-color | with code .bg-transparent | . +example('https://coreui.io/bootstrap/docs/components/card/#mixins-utilities') .card.border-success.mb-3(style='max-width: 18rem;') .card-header.bg-transparent.border-success Header .card-body.text-success h5.card-title Success card title p.card-text | Some quick example text to build on the card title and make up the bulk of the card's content. .card-footer.bg-transparent.border-success Footer .card.mb-4 .card-header strong Card span.small.ms-1 Card groups .card-body p.text-body-secondary.small | Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use code display: flex; | to become attached with uniform dimensions starting at the code sm | breakpoint. +example() .card-group .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.card-text small.text-body-secondary Last updated 3 mins ago .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text This card has supporting text below as a natural lead-in to additional content. p.card-text small.text-body-secondary Last updated 3 mins ago .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. p.card-text small.text-body-secondary Last updated 3 mins ago p.text-body-secondary.small When using card groups with footers, their content will automatically line up. +example('https://coreui.io/bootstrap/docs/components/card/#card-groups') .card-group .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. .card-footer small.text-body-secondary Last updated 3 mins ago .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text This card has supporting text below as a natural lead-in to additional content. .card-footer small.text-body-secondary Last updated 3 mins ago .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. .card-footer small.text-body-secondary Last updated 3 mins ago .card.mb-4 .card-header strong Card span.small.ms-1 Grid cards .card-body p.text-body-secondary.small | Use the Bootstrap grid system and its a(href='https://coreui.io/bootstrap/docs/layout/grid/#row-columns') code .row-cols | classes | to control how many grid columns (wrapped around your cards) you show per row. For example, here’s code .row-cols-1 | laying out the cards on one column, and code .row-cols-md-2 | splitting four cards to equal width across multiple rows, from the medium breakpoint up. +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards') .row.row-cols-1.row-cols-md-2.g-4 .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.text-body-secondary.small | Change it to code .row-cols-3 | and you’ll see the fourth card wrap. +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards') .row.row-cols-1.row-cols-md-3.g-4 .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. .col .card img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.text-body-secondary.small | When you need equal height, add code .h-100 | to the cards. If you want equal heights by default, you can set code $card-height: 100% | in Sass. +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards') .row.row-cols-1.row-cols-md-3.g-4 .col .card.h-100 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. .col .card.h-100 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text This is a short card. .col .card.h-100 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. .col .card.h-100 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. p.text-body-secondary.small Just like with card groups, card footers will automatically line up. +example('https://coreui.io/bootstrap/docs/components/card/#grid-cards') .row.row-cols-1.row-cols-md-3.g-4 .col .card.h-100 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. .card-footer small.text-body-secondary Last updated 3 mins ago .col .card.h-100 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text This card has supporting text below as a natural lead-in to additional content. .card-footer small.text-body-secondary Last updated 3 mins ago .col .card.h-100 img.card-img-top(src='assets/img/full.jpg' alt='') .card-body h5.card-title Card title p.card-text | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. .card-footer small.text-body-secondary Last updated 3 mins ago ================================================ FILE: src/pug/views/base/carousel.pug ================================================ extends ../../_layout/default.pug block canonical link(rel='canonical' href='https://coreui.io/bootstrap/docs/components/carousel/') block breadcrumb +breadcrumb( [ { href: '#', label: 'Home'}, { label: 'Components'}, { label: 'Base'}, 'Carousel' ], ) block view +docs-components('https://coreui.io/bootstrap/docs/components/carousel/') .card.mb-4 .card-header strong Carousel span.small.ms-1 Slides only .card-body p.text-body-secondary.small | Here’s a carousel with slides. Note the appearance of the code .d-block | also, code .w-100 | on carousel images to override browser default image alignment. +example('https://coreui.io/bootstrap/docs/components/carousel/#slides-only') #carouselExampleSlidesOnly.carousel.slide(data-coreui-ride='carousel') .carousel-inner .carousel-item svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false') title Placeholder rect(width='100%' height='100%' fill='#777') text(x='50%' y='50%' fill='#555' dy='.3em') First slide .carousel-item svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false') title Placeholder rect(width='100%' height='100%' fill='#666') text(x='50%' y='50%' fill='#444' dy='.3em') Second slide .carousel-item.active svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false') title Placeholder rect(width='100%' height='100%' fill='#555') text(x='50%' y='50%' fill='#333' dy='.3em') Third slide .card.mb-4 .card-header strong Carousel span.small.ms-1 With controls .card-body p.text-body-secondary.small | Adding in the previous and next controls. We recommend using code = '