Templates

A Template is a pre-designed structure or framework used to create consistent content within a project. It provides a standardized format with placeholders, allowing users to quickly generate new documents or components. Templates save time, ensure uniformity, and make the creation process more efficient.

Step 1: Log In to Your Account

• Go to flyonui.com and log in using your credentials.

Step 2: Navigate to the Templates Page

• Visit the Templates page to explore different types of templates.

Step 3: Download the Templates(.zip)

• Click the “Download” button to get the .zip file and extract the file.

**Template Name**/
├── html/
│   ├── ...../                  # Folder 
├── assets/                     # Build assets and outputs
│   ├── css/                    # Source CSS files
│   │   └── main.css            # Main TailwindCSS source
│   ├── js/                     # JavaScript files
│   ├── img/                    # Images and graphics
│   ├── json/                   # JSON data files
│   ├── dist/                   # Built assets (previously vendor)
│   │   ├── css/                # Compiled CSS
│   │   │   └── output.css      # Generated TailwindCSS output
│   │   ├── js/                 # Built JavaScript
│   │   └── libs/               # External libraries

If you do not have pnpm installed, follow the steps below to get started:

1. Install Node.js(if not already installed): Visit Node.js website and download the latest LTS version.

2. Install pnpm: Run the following command in your terminal:

   npm install -g pnpm

1. Install dependencies: This will install node_modules in your file automatically.

pnpm install

2. Start development: This will start TailwindCSS in watch mode and compile changes automatically.

pnpm run build

3. Preview your site: This will start a local server at http://localhost:8080

pnpm run serve

3. Start Development: This will start TailwindCSS in watch mode and compile changes automatically.

pnpm run dev

• pnpm run dev - Start TailwindCSS development mode with file watching and local server.
• pnpm run watch - Start TailwindCSS in watch mode (CSS compilation only)
• pnpm run serve - Start a local HTTP server for preview

• pnpm run build - Build all assets for development
• pnpm run build:css - Compile TailwindCSS without minification
• pnpm run build:js - Copy JavaScript files to dist directory
• pnpm run build:libs - Build external libraries from node_modules
• pnpm run build:assets - Build all assets for development
• pnpm run build:prod - Build all assets for production with minification

The main TailwindCSS configuration is defined in the source CSS file at css/main.css. This file uses TailwindCSS 4.x syntax with @import directives and can include custom CSS.

Build settings are managed through a configuration system that controls compilation options, dependencies, environment variables, and build targets for consistency and optimization.

• package.json
• gulpfile.js
• build-config.js
• libs-build.js

1. Start by installing the desired library via your terminal or command line interface. You can do this using npm or yarn as follows:

pnpm install nouislider

This will add the library to your `node_modules directory and include it in your package.json dependencies.

2. After installation, verify that the library is present in your package.json under the dependencies section, and check that it has been successfully added to the node_modules directory.

You can check package.json for a corresponding entry:

"dependencies": {
  "nouislider": "~15.8.1"
}

3. Next, you’ll need to include the library in the libs-build.js configuration file. Open this file and add the library to the list of assets in alphabetical order, ensuring that the build process knows to include it in the final output.

For example:

nouislider: {
  src: ['nouislider/dist/nouislider.min.js']
}

4. Run the build process to bundle the libraries. Use the following command to trigger the build process:

pnpm run build

This will generate the necessary files and output them into the assets/dist/libs/ directory. Verify that the nouislider.min.js file (or your specific library) is placed correctly within the assets/dist/libs/ folder.

5. Finally, reference the installed library in your HTML or JavaScript files. Add the corresponding <script> tag to your HTML file to include the library from the assets/dist/libs/ directory.

For example:

<script src="../assets/dist/libs/nouislider/dist/nouislider.min.js"></script>