12 Documentation Articles

Brandflow HTML Template Documentation

Brandflow HTML Template docs: learn how to set up, customize, and launch your website using the clean and modern Brandflow template.

0 of 0 posts loaded

Documentation Menu

Introduction and Setup

Welcome to the Brandflow HTML Template documentation. Brandflow is a modern, high-performance template designed for creative agencies and portfolios, built with Tailwind CSS v4.

Prerequisites

To get the most out of Brandflow, ensure you have the following installed:

Node.js (Version 16 or higher)
npm (Node Package Manager)

Installation

Open your terminal.
Navigate to the html-brandflow directory.
Install dependencies:

npm install

Running Brandflow

Start the local development server with live reload:

npm run dev

This will launch the site at http://localhost:3000 (or similar).

Building for Production

To generate the optimized CSS for your live site:

npm run build

Key Technologies

Brandflow uses:

Tailwind CSS v4: For all styling and design tokens.
AOS: For smooth scroll animations.
Slick Carousel: For the testimonial and portfolio sliders.
jQuery: For specific interactive elements.

Select an article to see its table of contents

Folder Structure and Layout

Brandflow is organized to make customization intuitive.

Project Directory

root/
- assets/: The core of Brandflow’s design.
  - css/: Contains custom.css (your main edit file) and styles.css (generated output).
  - images/: All assets for Hero, Team, Portfolio, and Blog sections.
  - js/: JavaScript for menus and sliders.
- documentation/: You are here.
- HTML Files: index.html, about.html, portfolio_v1.html, etc.

Brandflow Page Structure

Every page in Brandflow follows this sequence:

Preloader: The “Loading…” screen with the Brandflow animation.
Header Area: Logo and Navigation Menu.
Page Content: Unique sections like Hero, Services, or Team.
Footer Area: Copyright, social links, and secondary navigation.

Moving Sections

Brandflow is modular. To move the Team Section to a different page:

Open index.html (or the source file).
Find the start comment:

<!-- ====================== Our Team Area Start ============================= -->

Copy everything down to:

<!-- ====================== Our Team Area End ============================= -->

Paste it into the desired location in another file (e.g., about.html), ensuring it’s between existing sections and not inside them.

Editing HTML Files

Software Required

For HTML Editing

You can download trial (30 days free) versions by the following links:

Software	Download Link	Description
Adobe Dreamweaver	http://www.adobe.com/products/dreamweaver/	Professional web design software with visual editor and code editor
Microsoft Expression Web	Legacy Download	Microsoft’s web development tool (discontinued but still functional)
Notepad++	https://notepad-plus-plus.org/download/	Free, lightweight text editor with syntax highlighting
Sublime Text	https://www.sublimetext.com	Fast, sophisticated text editor with powerful features
Visual Studio Code	https://code.visualstudio.com/	Free, open-source code editor with excellent HTML/CSS support
Atom	https://atom.io/	Hackable text editor built by GitHub (discontinued but still works)
Brackets	http://brackets.io/	Modern, open-source code editor focused on web development

For Graphics Editing

Software	Download Link	Description
Adobe Photoshop	http://www.adobe.com/products/photoshop/photoshop/	Industry-standard image editing software
GIMP	https://www.gimp.org/	Free, open-source image editor
Figma	https://www.figma.com/	Free collaborative design tool (web-based)
Sketch	https://www.sketch.com/	Vector graphics editor for Mac (paid)
Canva	https://www.canva.com/	Free online design tool for non-designers

Recommended Editor: Visual Studio Code

For editing HTML templates, we highly recommend Visual Studio Code (VS Code) due to its:

Free and Open Source - No cost, actively developed by Microsoft
Excellent HTML/CSS Support - IntelliSense, Emmet, syntax highlighting
Live Preview - See changes in real-time with extensions
Extensions Marketplace - Thousands of free extensions
Git Integration - Built-in version control
Cross-Platform - Works on Windows, Mac, and Linux

Useful VS Code Extensions for HTML Editing

Live Server - Launch a local development server with live reload
HTML CSS Support - Enhanced HTML/CSS IntelliSense
Prettier - Code formatter for consistent style
Auto Rename Tag - Automatically rename paired HTML/XML tags
Bracket Pair Colorizer - Colorize matching brackets
Path Intellisense - Autocomplete filenames in your code

Brandflow Theme Customization

Brandflow relies on Tailwind CSS v4’s @theme configuration for a centralized design system.

Brand Colors

Brandflow uses a specific Gold and Dark color scheme. You can change this globally in assets/css/custom.css.

Find the @theme block:

   --color-goldenrod-800: #EABA3F; /* Primary Accent */
   --color-dark-600: #17171A;      /* Primary Background */
   --color-gray-600: #A3A3A3;      /* Body Text */

Change these hex codes to match your brand identity. For example, replacing #EABA3F with a blue hex code will update buttons, links, and accents across the entire site.

Typography

Brandflow loads DM Sans and Work Sans from Google Fonts.

To switch fonts:

Update the <link> tag in the <head> of your HTML files.
In assets/css/custom.css, update the font families if you are defining custom utilities, or simply rely on Tailwind’s font stack.

Container Width

Brandflow uses a custom responsive container. Adjust the max-width in assets/css/custom.css under @utility container if you need a wider or narrower layout.

Animation Settings

Brandflow uses AOS (Animate On Scroll).

Duration: data-aos-duration="1000" (1 second).
Effect: data-aos="fade-up".

Edit these attributes directly in the HTML tags to speed up, slow down, or change the animation style.

Content Editing in Brandflow

Editing Text

Brandflow’s text is hardcoded in the HTML files.

Headings: Look for <h1>, <h2> tags.
Paragraphs: Look for <p> tags.

Tip: Use your editor’s “Find in Files” feature to locate specific phrases like “Strategic perceptions” or “Meet the TEAM” to quickly find where to edit.

The menu is static. To change “Portfolio” to “Work”:

Open index.html.
Find the <nav> or header-nav section.
Locate:

<a href="portfolio_v1.html">Portfolio</a>

Change “Portfolio” to “Work”.
Important: You must repeat this change in all HTML files (about.html, contact.html, etc.) since there is no server-side include.

Rich Text (Prose)

For Blog Details and Case Studies, Brandflow uses the Tailwind Typography plugin (prose class).

This means you don’t need to add classes to every <p> or <h3> inside the content area.
Just write standard HTML, and the theme will style it automatically with Brandflow colors (White headings, Gray text, Gold links).

Managing Media in Brandflow

Image Structure

Brandflow organizes images by section in assets/images/:

Blog: blog-1.webp through blog-10.webp
Portfolio: showcase-1.webp, portfolio-v-1.webp
Team: team-1.webp, team-2.webp
Backgrounds: hero-bg-1.webp, shpae-1.png

Replacing Assets

Hero Background

The main hero background is often set via an <img> tag with absolute positioning or a CSS background.

Look for hero-bg-1.webp in index.html.
Replace this file to change the main landing visual.

Logos

header-logo.svg: The main logo in the navigation.
Ensure your replacement SVG or PNG has similar dimensions to maintain alignment.

Hover Effects & Overlays

Brandflow uses CSS-based overlays for images (e.g., the gold tint on hover).

These are often <div class="overlay-images ..."> elements sitting on top of the <img>.
If you change an image size, ensure the parent container (relative) and the overlay (absolute) dimensions still match.

Video

If the template includes video sections (often using standard <video> tags or embeds), ensure you provide a poster image (poster="image.jpg") that matches the site’s aesthetic while the video loads.

Header and Hero Section

The Header and Hero are the first things visitors see. Here is how to customize them in Brandflow.

The header code is located at the top of the <body> tag, inside <header class="header-area ...">.

Logo

To change the logo:

Find <div class="header-logo">.
Update the src of the <img> tag:

<img src="assets/images/header-logo.svg" alt="Brandflow">

The menu uses a grid system (grid-cols-12).

Left: Logo (col-span-2)
Center: Navigation Links (col-span-8)
Right: Search/Action buttons (col-span-2)

To add a Dropdown: Brandflow supports nested menus.

   <li class="group relative">
      <a href="#">Services</a>
      <ul class="submenu ...">
         <li><a href="service-1.html">Service 1</a></li>
      </ul>
   </li>

Hero Section

The Hero section immediately follows the header.

Background

The hero often uses a large image:

<img class="hero-bg ..." src="assets/images/hero-bg-1.webp">

Replace this image in assets/images/ to change the vibe of the homepage.

Main Heading

The large text (e.g., “Digital Agency”) is usually in an <h1> tag with text-[80px] or larger classes.

   <h1 class="... text-white ...">
      Your <span class="text-goldenrod-800">Headline</span>
   </h1>

Use the span with text-goldenrod-800 to highlight key words in Brandflow’s signature gold color.

Services Section

The Services section showcases what you offer. In Brandflow, this is often a grid of cards or a list with icons.

Structure

Look for <section class="service-area ...">.

Service Items

Each service is typically a <div> with a class like service-item.

   <div class="service-item ...">
      <div class="icon">...</div>
      <h3>Service Title</h3>
      <p>Description...</p>
   </div>

Customizing Icons

Brandflow uses SVG icons directly in the HTML. To change an icon:

Find the <svg> tag inside the service item.
Replace the entire <svg>...</svg> block with a new SVG code (e.g., from Heroicons or Phosphor Icons).
Ensure the new SVG has fill="white" or fill="currentColor" and appropriate width/height classes to match the design.

Adding a Service

Copy an entire service-item div.
Paste it into the grid container (usually grid-cols-1 or grid-cols-3).
Update the content.

Animations

Service items often have staggered animations.

Item 1: data-aos-duration="800"
Item 2: data-aos-duration="1000"
Item 3: data-aos-duration="1200" Increase the duration by 200ms for each subsequent item to create a smooth “waterfall” loading effect.

Portfolio and Showcase

The Portfolio is the heart of Brandflow. It supports grid layouts and detailed hover effects.

Main Showcase (Index Page)

On the homepage, the portfolio is a list of large, interactive cards.

Adding a Project

Find the showcase-item div:

   <div class="showcase-item relative group overflow-hidden">
      <!-- Overlay -->
      <div class="overlay-images ..."></div>
      
      <!-- Image -->
      <img src="assets/images/showcase-1.webp" ...>
      
      <!-- Hover Card Info -->
      <div class="hover-card ...">
         <h2>Project Title</h2>
         <p>Category</p>
      </div>
   </div>

Important: Ensure you keep the group and overflow-hidden classes on the parent, and the group-hover classes on the inner elements. This controls the sliding overlay animation.

Portfolio Page (Grid View)

In portfolio_v1.html or portfolio_v2.html, projects are arranged in a grid.

To add a new row, simply duplicate the project column divs.
Ensure images are consistent in size (e.g., all landscape or all portrait) to keep the grid aligned.

Filtering (Isotope)

If your template uses Isotope for filtering (buttons like “All”, “Branding”, “Design”):

Add a data-filter category to the button:

<button data-filter=".branding">

Add the corresponding class to the portfolio item:

<div class="portfolio-item branding">

Team and About Section

The Team Section highlights your members with social links that appear on hover.

Editing Team Members

Team members are wrapped in team-item divs.

Image

   <div class="team-images ...">
      <img src="assets/images/team-1.webp" ...>
   </div>

Replace the image with a square or portrait photo of your team member.

The social icons in Brandflow are hidden by default and slide up on hover.

   <div class="social-icon ... group-hover:bottom-0 ...">
      <ul>
         <li><a href="#">Facebook SVG...</a></li>
         <li><a href="#">Twitter SVG...</a></li>
      </ul>
   </div>

To edit a link:

Change the href="#" to the member’s social profile URL.

To remove an icon:

Delete the <li> block containing that icon.

About Content

The About page (about.html) usually contains a “Who We Are” text section.

Mission Statement: Look for the large text block next to the image.
Stats/Counters: If there are counters (e.g., “50+ Projects”), simply edit the numbers in the HTML.

Blog Section

Brandflow includes a stylish blog layout with a grid list and detailed single post pages.

Blog List (blog.html)

The blog list is a grid of blog-item elements.

Anatomy of a Post Card

Image: Top section, links to the details page.
Date/Meta: Usually appearing above the title (e.g., “October 20, 2023”).
Title: Link to blog_details.html.
Read More: A button or text link.

To add a new post to the list:

Copy a blog-item.
Paste it into the grid.
Update the image src, date, title, and link.

Blog Details (blog_details.html)

This is the single post view.

Using Prose for Content

The main content area uses the prose class (Tailwind Typography).

   <div class="prose max-w-none ...">
      <p>Your article text goes here.</p>
      <h2>Subheading</h2>
      <blockquote>Quote...</blockquote>
   </div>

You do not need to style individual paragraphs. The prose class handles font size, line height, and spacing automatically.

Author Box

At the bottom of the post, there is an author info box. Update the name, bio, and avatar image to match the post author.

Contact and Footer

Contact Page (contact.html)

The contact page features a form and contact details.

Contact Info

Update your address, phone, and email in the contact-info section.

   <div class="contact-item">
      <h4>Email</h4>
      <p>hello@brandflow.com</p>
   </div>

Contact Form

The form (<form>) is static HTML. To make it functional, you have a few options:

Formspree: Change the <form action="..."> URL to your Formspree endpoint.
PHP: Point the action to a .php script (if you have a backend).
Netlify/Vercel: Add netlify attributes if hosting on those platforms.

The footer appears on every page.

Editing Links

The footer typically has columns for “Quick Links”, “Services”, etc.

   <ul class="footer-links">
      <li><a href="about.html">About Us</a></li>
      ...
   </ul>

Remember to update these links in every HTML file since they are not dynamically included.

Copyright

Find the copyright text at the bottom:

   <p>&copy; 2023 Brandflow. All rights reserved.</p>

Update the year and company name here.

Search Documentation