Installation

You can install AsteroAdmin in three ways:

1. Using npm

npm install asteroadmin

After installation, you can import the CSS and JavaScript files in your project:

// Import CSS
import 'asteroadmin/dist/css/style.css'

// Import JavaScript (if needed)
import 'asteroadmin/dist/js/main.js'

2. Using CDN

Add the following CDN links to your HTML file (replace 1.0.5 with the desired version):

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/asteroadmin@1.0.5/dist/css/style.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/asteroadmin@1.0.5/dist/js/main.min.js" type="module"></script>

3. Clone the repository

git clone https://github.com/asterodigital/bootstrap-admin-template.git
cd bootstrap-admin-template

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The development server will start at http://localhost:1234

Build System

AsteroAdmin uses a custom-built, optimized build system that handles:

• SCSS compilation with source maps
• JavaScript bundling and minification
• Asset optimization
• Live reloading
• Production builds with optimizations

Available Scripts

Project Structure

.
├── config/             # Build and tool configurations (PostCSS, Rollup, etc.)
├── dist/               # Compiled files (generated by build process)
├── src/                # Source files
│   ├── assets/         # Static assets (images, fonts, data, etc.)
│   ├── html/           # Astro components, layouts, and pages (.astro files)
│   │   ├── components/ # Reusable UI components (Astro)
│   │   ├── layouts/    # Page layouts (Astro)
│   │   └── pages/      # Site pages (Astro)
│   ├── js/             # JavaScript source files
│   │   ├── components/ # JS for specific components
│   │   ├── layout/     # JS for layout features (dark mode, sidebar)
│   │   └── main.js     # Main JavaScript entry point
│   ├── scss/           # SCSS stylesheets
│   │   ├── base/       # Base styles (typography, reset)
│   │   ├── components/ # Component-specific styles
│   │   ├── core/       # Core mixins and utilities
│   │   ├── layout/     # Layout styles (header, sidebar, footer)
│   │   ├── pages/      # Page-specific styles
│   │   ├── utilities/  # Utility classes
│   │   ├── variables/  # SCSS variables (colors, fonts, config)
│   │   └── style.scss  # Main SCSS entry point
│   └── utils/          # Utility functions (JS)
├── tools/              # Build system scripts (.mjs files)
├── .browserslistrc     # Target browsers for CSS prefixes
├── .editorconfig       # Editor configuration
├── .gitignore          # Files ignored by Git
├── eslint.config.js    # ESLint configuration
├── index.html          # Redirect or simple landing page (if used)
├── LICENSE             # Project license (MIT)
├── package.json        # Project dependencies and scripts
├── pnpm-lock.yaml      # PNPM lock file (if using PNPM)
└── README.md           # This file

Customization

Themes

AsteroAdmin comes with both light and dark themes. You can customize the themes by modifying the variables in src/scss/variables/. The dark mode provides a sleek, eye-friendly experience that:

• Is easier on the eyes
• Improves readability
• Minimizes distractions
• Enhances visual appeal

Components

All UI components are modular and can be found in src/scss/components/ and src/scss/extra-components/. You can easily modify or extend these components to match your requirements.

Creating New Pages

To create a new page:

1. Create a new .astro file in the src/html/pages/ directory.
2. Use existing Astro components from src/html/components/ and layouts from src/html/layouts/.
3. Import necessary CSS and JS as needed.
4. Run npm run dev to see your changes live.

Dashboard Layouts

AsteroAdmin offers multiple dashboard layouts to suit different needs:

• Analytics Dashboard - For data visualization and metrics
• Compact Sidebar - Space-efficient navigation
• Dark Mode - Eye-friendly interface for low-light environments
• Various Components - Extensive UI element collection
• Offcanvas Navbar - Modern responsive navigation

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Technologies Used

• Astro (^5.5.5) - Static site generator for building fast websites.
• Bootstrap (^5.3.3) - Front-end component library.
• Sass (Embedded) (^1.86.0) - CSS preprocessor.
• ESBuild (^0.25.1) - JavaScript bundler and minifier.
• Rollup (^4.36.0) - JavaScript module bundler (used alongside ESBuild).
• LightningCSS (^1.29.3) - CSS parser, transformer, bundler, and minifier.
• PostCSS (^8.5.3) - Tool for transforming CSS with JavaScript plugins.
• SimpleBar (^6.3.0) - Custom scrollbar plugin.
• Prettier (^3.5.3) - Code formatter.
• ESLint (^9.23.0) - Code linter for JavaScript and Astro.
• Stylelint (^16.16.0) - CSS linter.

Performance Optimization

AsteroAdmin is optimized for performance:

• Minified CSS and JavaScript
• Optimized asset loading
• Efficient build process
• Code splitting where appropriate
• Vendor prefixing for cross-browser compatibility

Frequently Asked Questions

What is included in the theme?
The package includes a full set of templates, and documentation.

Is the theme mobile-friendly?
Absolutely, the theme is designed to be responsive across devices.

Can I customize the design?
Yes, the theme is fully customizable to match your branding needs.

How do I install the theme?
Installation is simple and comes with detailed instructions in the docs.

Change Log

Version 1.0.5 - April 3, 2025

• Updated dependencies (Bootstrap 5.3.3, Astro 5.5.5, etc.)
• Refreshed project structure in README
• Updated build tools and configurations
• Added bundlewatch script

Version 1.0.0 - March 13, 2025

• Initial release

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, please visit https://asterodigital.com/bootstrap-admin-template or create an issue in the GitHub repository.

Author

AsteroDigital - https://asterodigital.com

Made with ❤️ by AsteroDigital