### Start AsteroAdmin development server

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Run the development server to preview changes with live reloading. This command is essential for active development, providing instant feedback on code modifications. The server typically starts at `http://localhost:1234`.

```bash
npm run dev
```

--------------------------------

### Install AsteroAdmin project dependencies

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

After cloning the repository, install all required Node.js dependencies using npm. This command fetches all necessary packages for the project's build system and development environment.

```bash
npm install
```

--------------------------------

### Git Workflow for Contributions

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Provides a step-by-step guide for developers to contribute to the project using standard Git commands, including creating a feature branch, committing changes, and pushing to the remote repository.

```Shell
git checkout -b feature/amazing-feature
git commit -m 'Add some amazing feature'
git push origin feature/amazing-feature
```

--------------------------------

### Install AsteroAdmin via npm

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Install the AsteroAdmin package using npm. This command adds the package to your project's dependencies, allowing you to integrate it into your build process.

```bash
npm install asteroadmin
```

--------------------------------

### Clone AsteroAdmin repository

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Clone the AsteroAdmin GitHub repository to get the full source code. This allows for local development and customization of the template. Navigate into the project directory after cloning.

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

--------------------------------

### HTML Examples for Button Sizing Variants

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/SIZING_CONSISTENCY.md

Demonstrates the application of custom sizing classes (`.btn-xs`, `.btn-sm`, `.btn-lg`, `.btn-xl`) to standard HTML buttons. This snippet illustrates how to achieve the defined extra small, small, default, large, and hero button sizes, showcasing the visual consistency and hierarchy.

```HTML
<button class="btn btn-primary btn-xs">Compact (24px/11px)</button>
<button class="btn btn-primary btn-sm">Small (30px/13px)</button>
<button class="btn btn-primary">Default (38px/16px)</button>
<button class="btn btn-primary btn-lg">Large (46px/18px)</button>
<button class="btn btn-primary btn-xl">Hero (56px/20px)</button>
```

--------------------------------

### Import AsteroAdmin CSS and JavaScript in a project

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

After installing AsteroAdmin via npm, import its CSS and JavaScript files into your project. This step is crucial for applying the template's styles and enabling its functionalities within your application.

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

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

--------------------------------

### HTML for Bootstrap Input Group with Sizing

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/SIZING_CONSISTENCY.md

Illustrates how to create a Bootstrap input group with a specific size (`input-group-sm`), combining an `input-group-text` addon, a `form-control` input, and a `btn` within a single component. This example shows a compact input group suitable for secondary actions or dense layouts.

```html
<div class="input-group input-group-sm">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
  <button class="btn btn-primary" type="button">Go</button>
</div>
```

--------------------------------

### Build AsteroAdmin for production

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Builds optimized files for production deployment. This process includes minification, bundling, and asset optimization to ensure the best performance for the live application.

```bash
npm run build
```

--------------------------------

### Serve built AsteroAdmin files locally

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Serves the optimized production-ready files locally for testing. This allows developers to verify the final build output before deployment.

```bash
npm run serve
```

--------------------------------

### AsteroAdmin Project Directory Structure

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Detailed breakdown of the AsteroAdmin project's file and directory organization, outlining the purpose of each major folder and file for development and build processes. This structure facilitates modularity and maintainability.

```plaintext
.
├── 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
```

--------------------------------

### Run AsteroAdmin code quality checks

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Executes linting to ensure code quality and adherence to coding standards. This helps maintain a consistent and error-free codebase.

```bash
npm run lint
```

--------------------------------

### Process and optimize AsteroAdmin static assets

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Handles the processing and optimization of static assets like images and fonts. This command ensures that all non-code assets are prepared for efficient delivery.

```bash
npm run assets
```

--------------------------------

### Check AsteroAdmin bundle sizes

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Checks the sizes of generated bundles against predefined limits to monitor performance impact. This helps ensure that the application remains lightweight and performs well.

```bash
npm run bundlewatch
```

--------------------------------

### Bundle and optimize AsteroAdmin JavaScript

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Bundles and optimizes JavaScript files for improved performance and smaller file sizes. This step ensures that all JavaScript code is efficiently packaged for production use.

```bash
npm run js
```

--------------------------------

### Format AsteroAdmin HTML files with Prettier

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Formats HTML files using Prettier to maintain consistent code style across the project. This ensures readability and uniformity in the markup.

```bash
npm run format:html
```

--------------------------------

### Include AsteroAdmin via CDN

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Add the AsteroAdmin CSS and JavaScript files to your HTML using CDN links. This method is suitable for quick integration without a local build process. Remember to replace the version number with the desired release.

```html
<!-- 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>
```

--------------------------------

### Compile AsteroAdmin SCSS to CSS

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Compiles SCSS files into CSS, adding vendor prefixes for broader browser compatibility. This command is part of the build process to transform pre-processed styles into standard CSS.

```bash
npm run css
```

--------------------------------

### JavaScript Redirect to Dashboard Page

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/index.html

This JavaScript snippet demonstrates how to programmatically redirect the browser's current location to a specific URL. It is commonly used in web applications for navigation after a successful login, initial page load, or a specific user action, directing the user to the dashboard.

```JavaScript
window.location.href = '/pages/dashboard'
```

--------------------------------

### Clean AsteroAdmin build artifacts

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Removes temporary files and build artifacts from previous builds. This command is useful for ensuring a clean slate before a new build or for freeing up disk space.

```bash
npm run clean
```

--------------------------------

### Watch AsteroAdmin files for changes

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Monitors project files for changes and triggers rebuilds or reloads as configured. This command is often used in development workflows for continuous integration.

```bash
npm run watch
```

--------------------------------

### HTML for Bootstrap Form Control Sizing

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/SIZING_CONSISTENCY.md

Demonstrates the use of Bootstrap's `form-control` classes (`form-control-xs`, `form-control-sm`, `form-control-lg`, `form-control-xl`) to apply different predefined sizes to input fields, showcasing compact to hero-sized inputs. These classes control both the height and font size of the input elements.

```html
<input type="text" class="form-control form-control-xs" placeholder="Compact (24px/11px)">
<input type="text" class="form-control form-control-sm" placeholder="Small (30px/13px)">
<input type="text" class="form-control" placeholder="Default (38px/16px)">
<input type="text" class="form-control form-control-lg" placeholder="Large (46px/18px)">
<input type="text" class="form-control form-control-xl" placeholder="Hero (56px/20px)">
```

--------------------------------

### Automatically fix AsteroAdmin linting issues

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/README.md

Automatically corrects identifiable linting issues in the codebase. This command helps developers quickly resolve common code style and quality problems.

```bash
npm run fixlint
```

--------------------------------

### SCSS Variables for Custom Button and Form Control Sizing

Source: https://github.com/asterodigital/bootstrap-admin-template/blob/main/SIZING_CONSISTENCY.md

Defines SCSS variables (`$input-btn-font-size-xs`, `$input-btn-minheight-xs`, etc.) to establish a custom, optimized sizing system for UI elements. These variables control font size, minimum height, and padding for extra small, small, default, large, and extra large variants, ensuring proportional scaling and visual consistency.

```SCSS
// Size System - Custom Optimized Heights with Proportional Font Sizes
// XS size - 24px height
$input-btn-font-size-xs:      0.6875rem !default; // 11px - compact font for 24px height
$input-btn-minheight-xs:      1.5rem !default; // 24px
$input-btn-padding-xs:        0.125rem 0.5rem !default;

// SM size - 30px height
$input-btn-font-size-sm:      0.8125rem !default; // 13px - proportional to 30px height
$input-btn-minheight-sm:      1.875rem !default; // 30px
$input-btn-padding-sm:        0.25rem 0.75rem !default;

// Base size - 38px height
$input-btn-minheight:         2.375rem !default; // 38px
// Default font size remains 1rem (16px) from _config.scss

// LG size - 46px height
$input-btn-font-size-lg:      1.125rem !default; // 18px - proportional to 46px height
$input-btn-minheight-lg:      2.875rem !default; // 46px
$input-btn-padding-lg:        0.5rem 1rem !default;

// XL size - 56px height
$input-btn-font-size-xl:      1.25rem !default; // 20px - proportional to 56px height
$input-btn-minheight-xl:      3.5rem !default; // 56px
$input-btn-padding-xl:        0.75rem 1.25rem !default;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.