Frox

https://wp.alithemes.com/html/frox/docs
Admin
Frox is a clean, modern, and multipurpose TailwindCSS dashboard template with light/dark modes,...
Tokens:2,218
Snippets:9
Trust Score:8.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Development Commands

Source: https://wp.alithemes.com/html/frox/docs/index

Commands to start the development server and build the production version of the project.

```bash
npm run dev
npm run build
```

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

### Frox HTML Structure Example

Source: https://wp.alithemes.com/html/frox/docs/index

Provides a basic outline of the main HTML structure for a Frox template page. It includes the essential tags like `<html>`, `<head>`, `<body>`, and structural elements such as wrapper, aside, header, main, and footer.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frox Dashboard</title>
    <!-- Link to CSS files -->
</head>
<body class="....... /* Body classes for styling */">
    <div class="wrapper... /* Main wrapper */">
        <aside class="...... /* Sidebar */">
            <!-- Sidebar content -->
        </aside>
        <header class="...... /* Header */">
            <!-- Header content -->
        </header>
        <main class="...... /* Main content area */">
            <div class="...... /* Content section */">
                <!-- Page specific content -->
            </div>
            <footer class="...... /* Footer */">
                <!-- Footer content -->
            </footer>
        </main>
    </div>
    <!-- Link to JS files -->
</body>
</html>
```

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

### Frox Change Log

Source: https://wp.alithemes.com/html/frox/docs/index

This section details the update history of the Frox dashboard template, starting from version 1.0. It lists new features, improvements, and updates for each version, providing a clear overview of the template's evolution.

```APIDOC
Change Log:
VERSION 5.0 - 11 November 2022
  - Add Mailbox, Help Center, Social Network, Project Manage dashboards
  - Add Authentication Pages
VERSION 4.1
  - Update Chat Pages
VERSION 4.0
  - Add File manage dashboard
VERSION 3.0
  - Add Analytics, Crypto, Online Course dashboard.
VERSION 2.0
  - Add CMS and CRM dashboard.
VERSION 1.0
  - First release.
```

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

### Gulp Dependencies

Source: https://wp.alithemes.com/html/frox/docs/index

Lists the development and production dependencies required for the project, managed by Gulp and npm.

```json
"devDependencies": {
  "@prettier/plugin-pug": "^1.20.1",
  "browser-sync": "^2.27.10",
  "cssnano": "^5.1.7",
  "gulp": "^4.0.2",
  "gulp-autoprefixer": "^8.0.0",
  "gulp-postcss": "^9.0.1",
  "gulp-pug": "^5.0.0",
  "gulp-rename": "^2.0.0",
  "gulp-sass": "^5.1.0",
  "gulp-terser": "^2.1.0",
  "nodemon": "^2.0.19",
  "npm-run-all": "^4.1.5",
  "postcss-cli": "^10.0.0",
  "prettier": "^2.6.2",
  "sass": "^1.50.0",
  "tailwindcss": "^3.0.24"
},
"dependencies": {
  "@tailwindcss/line-clamp": "^0.4.0",
  "chart.js": "^3.9.1",
  "daisyui": "^2.24.0",
  "tailwind-scrollbar-hide": "^1.1.7"
}
```

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

### CSS Structure

Source: https://wp.alithemes.com/html/frox/docs/index

Includes the main stylesheet and Tailwind CSS for styling. Also includes links for Google Fonts.

```html
<link rel="stylesheet" href="assets/styles/tailwind.min.css">
<link rel="stylesheet" href="assets/styles/style.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chivo:wght@400;700;900&family=Noto+Sans:wght@400;500;600;700;800&display=swap">
```

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

### Frox Development File Structure

Source: https://wp.alithemes.com/html/frox/docs/index

This details the source file structure for developing the Frox template using Gulp. It includes the 'src' directory containing fonts, images, scripts, styles, and Pug view files, along with configuration files like package.json and tailwind.config.js.

```APIDOC
Development Project Structure:
/src
  /assets
    /fonts
    /images
    /scripts
    /styles
  /views
    /blocks
      /mixins
      /avatar.pug
      /badge.pug
      /...
    /footer.pug
    /go-to-top.pug
    /header.pug
    /mixins.pug
    /scripts.pug
    /sidebar.pug
/.gitignore
/gulpfile.js
/package.json
/package-lock.json
/postcss.config
/tailwind.config.js
```

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

### Frox Template Technologies

Source: https://wp.alithemes.com/html/frox/docs/index

Frox dashboard template is built using a modern technology stack including TailwindCSS 3 for styling, Pug for HTML templating, and Sass for CSS pre-processing. It also incorporates Gulp 4 as a module bundler and includes developer tools like Autoprefixer, PostCSS, Terser, Eslint, Cssnano, and Browsersync for an efficient development workflow.

```APIDOC
Technologies Used:
- TailwindCSS 3
- Pug
- Sass
- ES6
- Gulp 4
- Autoprefixer
- PostCSS
- Terser
- Eslint
- Cssnano
- Browsersync
```

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

### Frox File Structure (Compiled)

Source: https://wp.alithemes.com/html/frox/docs/index

This outlines the directory structure of the compiled Frox template, typically found in the 'dist' folder after running Gulp. It includes compiled assets like CSS, images, scripts, and the main HTML files.

```APIDOC
Compiled Project Structure:
/assets
  /styles
    /style.min.css
    style.min.css.map
    tailwind.min.css
  /images
    /icons
  /scripts
    /plugins
    /vendor
    /app.js
    /...
/index.html
/ecommerce-dashboard.html
/finance-dashboard.html
/.........
```

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

### JavaScript Structure

Source: https://wp.alithemes.com/html/frox/docs/index

Lists the JavaScript files loaded at the end of the body, including vendor scripts like jQuery and Chart.js, along with custom application scripts.

```javascript
// Vendor JS
<script type="text/javascript" src="assets/scripts/vendors/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="assets/scripts/chart-utils.min.js"></script>
<script type="text/javascript" src="assets/scripts/chart.min.js"></script>
<script src="assets/scripts/app.js"></script>
```
Tokens:
Raw