AppStrap Bootstrap 5 Theme

https://themelizeme.github.io/appstrap-docs/index.html
Admin
AppStrap is a comprehensive, responsive HTML template built with Bootstrap 5. It provides 147...
Tokens:8,530
Snippets:46
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Node.js and Project Dependencies for AppStrap Development

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/1-project-setup

This snippet provides the necessary commands to set up your development environment by installing Node.js using NVM (Node Version Manager) and then installing project-specific dependencies via npm. These steps are crucial for running AppStrap's Gulp build processes.

```bash
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install

# verifies the right Node.js version is in the environment
node -v # should print `v20.17.0`

# verifies the right npm version is in the environment
npm -v # should print `10.8.2`
```

```bash
npm install
```

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

### Install AppStrap Theme Dependencies

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/1-project-setup

Installs all required Node.js packages and dependencies for the AppStrap theme using Yarn. This command sets up the development environment by populating the 'node_modules' directory.

```bash
yarn install
```

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

### Example Output: AppStrap Project Creation

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/1-project-setup

Shows a typical console output after successfully executing the 'gulp create-project' command. It details the creation of project directories, copying of essential files (SCSS, source), and the location of the new project's configuration.

```bash
gulp create-project --name=myproject
[07:11:22] Using gulpfile ~/XXX/src/theme/gulpfile.js
[07:11:22] Starting 'create-project'...
INFO: Created project directory: /XXX/src/theme/projects/myproject
INFO: Copied SCSS file: _custom.maps.scss
INFO: Copied SCSS file: _custom.style.scss
INFO: Copied SCSS file: _custom.variables.scss
INFO: Copied SCSS file: theme.style.scss
INFO: Copied ./src to /XXX/src/theme/projects/myproject/src
INFO: Created prettified config file: /XXX/src/theme/projects/myproject/config.myproject.js

Project created successfully!

The project directory is: projects/myproject
The project config can be found at: projects/myproject/config.myproject.js

You can now use the following commands to build your project:
$ yarn gulp --project=myproject
$ yarn gulp build --project=myproject

[07:11:23] Finished 'create-project' after 1.1 s
```

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

### Install Project Dependencies with Yarn

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/3.4-upgrade

After replacing theme files during an upgrade, navigate to the `/theme` folder in your command line and execute the `yarn` command to install or update all necessary project dependencies.

```Shell
yarn
```

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

### Execute Yarn Command for Dependency Installation

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/3.3.3-upgrade

This command instructs users to run `yarn` from within the `/theme` directory. It is essential for installing or updating project dependencies, typically after a theme upgrade or when replacing core files.

```bash
yarn
```

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

### Create a New AppStrap Project

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/1-project-setup

Generates a new, isolated project directory within the AppStrap theme. Each project gets its own '/src' directory and a dedicated configuration file ('config.PROJECT.js'), allowing for separate site development. Replace 'YOURPROJECTNAME' with a machine-friendly name (no spaces or special characters).

```bash
gulp create-project --name=YOURPROJECTNAME
```

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

### Install Project Dependencies with Yarn

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/3.3.2-upgrade

This command is executed within the `/theme` folder to install or update project dependencies. It's a standard practice after cloning a repository or when dependencies have changed, ensuring all necessary packages are available for the theme to function correctly.

```Shell
yarn
```

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

### Example Configuration for Additional Javascript Files

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/unusedassets

This configuration snippet demonstrates how to use the `additionalJS` setting to include extra Javascript files in your AppStrap Docs project. Files listed here will be automatically added to the footer of your HTML pages, allowing for custom functionality or project-specific scripts.

```Javascript
  additionalJS: [ // add additional JS files to footer
    './projects/myproject/js/custom1.js',
    './projects/myproject/js/custom2.js'
  ],
```

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

### Run Appstrap Production Build Command in Shell

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/1-project-setup

This shell command executes the `gulp build` task for a specific Appstrap project. It triggers the entire production build workflow, including asset optimization and minification, and outputs the processed files to the project's `dist` folder. The `--project` flag is mandatory for multi-project setups.

```Shell
gulp build --project=YOURPROJECTNAME
```

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

### AppStrap Docs: pageSettings Configuration Example

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/2-config-customisation

This JavaScript snippet demonstrates how to use the `pageSettings` object within `config.*.js` to apply page-specific overrides to global settings. It shows how to load additional Google Fonts and customize CSS variables for pages matching specific patterns (e.g., 'shop' or 'shop-*'), including the use of `inheritFrom` for setting reuse.

```JavaScript
  pageSettings: {

    'shop': {
      additionalFonts: [// Load additional Google fonts ondemand after the initial page load
        'https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap'
      ],
      cssVariables: {
        '--bs-font-sans-serif': '"SUSE", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
      },
    },
    'shop-*': { // Applies to any page starting with 'shop-'
      inheritFrom: 'shop' // inherits all settings from 'shop'
    },

  },
```

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

### Set Relative Plugin Path for AppStrap Subfolders

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/pages-in-subfolders

This HTML snippet provides an example of setting a relative path for AppStrap plugins using the `data-plugins-localpath` attribute. It shows how to specify the path for pages located one level deep in a subfolder, ensuring correct asset loading.

```HTML
<body data-plugins-localpath="../assets/plugins/">
```

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

### AppStrap Docs HTML Page Front Matter Example

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/2-config-customisation

This snippet demonstrates how to define page-specific settings using front matter within an HTML file in AppStrap Docs. The front matter is embedded as a JSON object inside an HTML comment block, allowing developers to override global configurations for individual pages. It includes various settings for page title, navigation, body classes, and component styling.

```HTML
<!--
{
  "pageTitle": "Dashboard",
  "pageKey": "admin",
  "headerSticky": false,
  "navbarBrandUrl": "admin.html",
  "headerNavbarToggle": false,
  "headerOffcanvas": false,
  "bodyClass": "bg-light",
  "dropdownCollapseClass": " dropdown-collapse dropdown-expand-md",
  "dropdownHoverBpClass": "dropdown-hover-md",
  "dropdownMenuClass": " dropdown-menu-light border-md",
  "footerBgClass": "bg-dark op-8",
  "footerBtnsClass": "text-light",
  "footerClass": "py-4",
  "footerHighlightClass": "text-light op-8",
  "headerBrandHClass": "h2",
  "megaMenuClass": " dropdown-menu-md-end",
  "megaMenuShopClass": " dropdown-menu-md-end",
  "megaMenuToggleClass": " dropdown-mega-menu-50",
  "mobileMenuBtnClass": "fs-3 order-last p-1",
  "navbarBelowToggleableClass": "navbar-expand-md",
  "navbarBrandClass": "fs-3 py-3",
  "navbarClass": "bg-white border-bottom py-0 shadow-sm",
  "navbarContainerClass": "container-fluid ps-0",
  "navbarHeaderClasses": "navbar-light p-0 navbar-side-push",
  "navbarMainClass": "navbar-collapse offcanvas offcanvas-end align-items-md-end me-md-3 p-4 p-md-0",
  "navbarMainNavLinkClass": "py-md-4",
  "navbarSecondaryClass": "order-5",
  "navbarToggleClass": "d-md-none",
  "navbarToggleableClass": "navbar-expand-md",
  "navbarVrClass": "vr-60 d-none d-xl-block",
  "searchBtnClass": "fs-5 order-4 p-1",
  "siteSloganClass": "d-none d-xl-block"
}
-->
<html>..............rest of page HTML</html>
```

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

### Render a Navbar Below the Header

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/adding-main-navbar-content

This example demonstrates how to embed content, specifically a custom navigation bar with contact information and a call-to-action button, into the `headerNavbarBelow` block. This content will appear below the main header but within its sticky container.

```Twig
{% embed "@partials/header.html" %}
  {% block headerNavbarBelow %}
  <div class="d-flex align-items-center justify-content-between w-100">
    <div class="hstack gap-4">
      <h6 class="fs-6 my-0 mb-1 text-muted d-flex align-items-center">
        <i class="bi-truck me-2"></i> Free Worldwide Shipping
      </h6>
      <h6 class="fs-6 my-0 text-muted fw-normal d-flex align-items-center">
        <i class="bi-telephone me-2"></i> (+44) 7283643345
      </h6>
    </div>
    <!-- Button aligned right on lg screens, centered on smaller screens -->
    <a href="#" class="btn btn-primary btn-sm w-50 w-lg-auto text-uppercase fw-bold px-3 mt-3 mt-lg-0 ms-auto"> Sale Now On! </a>
  </div>
  {% endblock %}
{% endembed %}
```

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

### Overriding `headerNavbarNav` Block to Render Empty

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/adding-main-navbar-content

This example shows how to override the `headerNavbarNav` block, which typically contains the main navigation, to render nothing. This is achieved by providing an empty block within the embed statement.

```Twig
{% embed "@partials/header.html" %}
  {% block headerNavbarNav %} {% endblock %}
{% endembed %}
```

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

### Customizing `navbarBrandContent` Block

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/adding-main-navbar-content

This example demonstrates how to inject custom HTML content into the `navbarBrandContent` block, which renders before the navbar brand. It's useful for adding elements like a sidebar toggle button to the left of the brand.

```Twig
{% embed '@partials/header.html' %}
  {% block navbarBrandContent %}
    <!-- Toggle the #navbar-side-primary navbar-side element -->
    <a href="#" class="navbar-text fs-5 align-self-stretch border-end navbar-border navbar-side-toggler bg-gray-300 bg-op-1 bg-op-hover-2 rounded-0 transition waves-btn order-first" data-bs-toggle="navbar-offcanvas" data-bs-target="#navbar-side-primary"> <i class="bi-list icon-1x"></i> <span class="visually-hidden-focusable">Main Menu Panel</span> </a>
  {% endblock %}
{% endembed %}
```

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

### Fix SCSS Import Paths for Project-Based AppStrap

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/4.0.1-upgrade

This snippet provides the corrected SCSS import structure for `theme.style.scss` files in project-based AppStrap setups. It replaces the single `@import "base.scss";` line with a comprehensive list of imports for Bootstrap, custom, and core SCSS files, ensuring proper loading of variables, maps, utilities, and mixins. This fix is crucial for SASS includePaths to work correctly with `./projects/PROJECT/_custom.*.scss` files.

```scss
@import "bootstrap/scss/functions";

// @Custom variables
@import "custom.variables.scss"; // Your custom site variables
@import "core/variables.scss"; // Theme variables & overrides

// @Bootstrap variables
@import "bootstrap/scss/variables";

// @Custom maps
@import "custom.maps.scss"; // Your custom site variables
@import "core/maps.scss"; // Theme map overrides

// @Bootstrap maps
@import "bootstrap/scss/maps";

// @Bootstrap utilities
@import "bootstrap/scss/utilities";

// @Custom utilities overrides - after Bootstrap to override existing as needed
@import "core/utilities.scss"; // Theme utilities overrides

// Mixins
@import "bootstrap/scss/mixins";
@import "core/mixins.scss";

// Bootstrap files
@import "bootstrap/scss/bootstrap";
```

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

### Conditionally Apply Body Class with Twig

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/3-editing-files

This Twig templating example demonstrates how to dynamically add a CSS class to the HTML `<body>` tag. It checks if the `bodyClass` variable is defined; if so, it includes a `class` attribute with the variable's value. This allows for flexible styling based on page-specific configurations passed to the Twig template.

```Twig
<body {% if bodyClass %} class="{{bodyClass}}" {% endif %}>
```

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

### Run AppStrap Development Gulp Task for a Project

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/1-project-setup

Executes the primary development tasks for a specified AppStrap project. This command compiles SCSS to CSS, processes JavaScript, handles HTML compilation, and uses BrowserSync for automatic browser refreshing on file changes, making it ideal for live development.

```bash
gulp --project=YOURPROJECTNAME
```

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

### Configure Appstrap Build Settings in JavaScript

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/1-project-setup

This JavaScript object defines various settings for the Appstrap `gulp build` process. It allows control over features like launching a development server, enabling unused CSS/asset cleanup, and critical CSS generation. These settings are typically found in the `config.PROJECT.js` file.

```JavaScript
buildSettings: {
  launchServer: false,
  unusedCss: true,
  unusedAssets: true,
  criticalCss: true // @todo: coming soon
}
```

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

### Gulp Build and Asset Management Commands

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/unusedassets

These commands are essential for compiling, processing, and optimizing project assets. `yarn gulp` runs default development tasks, while `yarn gulp build` performs a comprehensive production build, including image compression and optional unused asset removal.

```Shell
yarn gulp
```

```Shell
yarn gulp build
```

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

### AppStrap Docs Javascript Events API

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/3-editing-files

Documentation for key Javascript events provided by AppStrap Docs, allowing custom code to react at different stages of theme loading and plugin integration. These events enable developers to hook into the theme's lifecycle.

```APIDOC
AppStrap Docs Javascript Events:
- themePreload: Before any AppStrap Docs Javascript has run
- themePrePlugins: Before any AppStrap Docs Javascript has run
- themeLoaded: After the theme has loaded everything
- themePluginsExtras: Add new plugin integrations or override existing ones.
```

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

### Configure Additional Javascript Files

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/3-editing-files

Demonstrates how to include additional Javascript files in the footer of your HTML pages using the `additionalJS` configuration setting. This is useful for adding project-specific scripts.

```JSON
  additionalJS: [ // add additional JS files to footer
    './projects/myproject/js/custom1.js',
    './projects/myproject/js/custom2.js'
  ],
```

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

### Twig Template Inclusion

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/3-editing-files

Demonstrates how to include other Twig templates to promote code reuse and modularity, allowing for a cleaner and more organized codebase.

```Twig
{% include '@partials/head.html' %}
```

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

### Execute Yarn Command for AppStrap Theme Upgrade

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/3.3.1-upgrade

This snippet provides a command-line instruction to run 'yarn' within the '/theme' directory. This action is necessary to update dependencies and ensure compatibility, specifically as part of the AppStrap 3.3.1 upgrade to Bootstrap 4.2.1.

```Shell
yarn
```

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

### Configure Additional CSS Files

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/3-editing-files

Shows how to add static CSS files to your pages using the `additionalCSS` configuration setting. This allows for easy inclusion of custom stylesheets without integrating them into the SASS build process.

```JSON
additionalCSS: [ // add additional CSS files to <head>
  './projects/myproject/css/custom2.css'
  './projects/myproject/css/custom2.css'
],
```

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

### Reference Assets in HTML Files

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/unusedassets

This path format is used within HTML to link to assets (e.g., images) that have been processed and copied by Gulp from the source directory to the distribution directory.

```HTML
/assets/img/FOLDER/FILE.EXTENSION
```

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

### Set Absolute Plugin Path for AppStrap Pages

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/pages-in-subfolders

This HTML snippet illustrates how to use an absolute domain path for AppStrap plugins via the `data-plugins-localpath` attribute. This method allows specifying the full URL to the plugin assets, useful for consistent loading regardless of page location.

```HTML
<body data-plugins-localpath="http://example.com/assets/plugins/">
```

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

### Pass Configuration Options to Slider Revolution via Data Attributes

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/slider-revolution

This HTML snippet shows how to pass configuration options to a Slider Revolution instance using the `data-settings` HTML5 attribute. The `data-toggle="slider-rev"` attribute invokes the slider, and `data-settings` accepts a JSON object for various slider parameters like `startwidth`, `startheight`, and `delay`.

```HTML
<div class="rev_slider fullscreenbanner" data-toggle="slider-rev" data-settings='{\"startwidth\":1100, \"startheight\":520, \"delay\":10000}'>
```

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

### Slider Revolution Configuration API

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/slider-revolution

This section outlines the interface for configuring Slider Revolution within the AppStrap theme. Options are passed via HTML5 data attributes on the slider element, specifically `data-toggle` to activate the slider and `data-settings` for a JSON object of parameters.

```APIDOC
Slider Revolution Configuration:
  Element: HTML div with `data-toggle="slider-rev"`
  Attributes:
    data-toggle: string
      Description: Activates the Slider Revolution instance.
      Value: "slider-rev"
    data-settings: JSON Object
      Description: Contains configuration parameters for the slider.
      Properties:
        startwidth: number
          Description: Initial width of the slider in pixels.
          Example: 1100
        startheight: number
          Description: Initial height of the slider in pixels.
          Example: 520
        delay: number
          Description: Delay before the next slide transition in milliseconds.
          Example: 10000
```

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

### Appstrap Twig Configuration Variables Reference

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/2-config-customisation

A comprehensive list of Twig variables used to customize the Appstrap theme, including their descriptions and typical usage scenarios. These variables are injected into the Twig context to control various aspects of the theme's rendering.

```APIDOC
additionalCSS: Array of additional CSS files to include, dynamically loaded via <link> tags in the head section.
additionalFonts: Array of URLs for additional font files to be loaded via <link> tags.
additionalJS: Array of additional JavaScript files to be loaded after the primary scripts.
cssVariables: Key-value pairs for defining CSS variables dynamically in the page, injected into a <style> block in the head.
currentPageKey: A variable that indicates which page is currently active, used to set the active class on corresponding menu items.
footerClass: Applies custom classes to the <footer> element to adjust its appearance (e.g., padding, background color).
footerHighlightClass: Used to style certain highlighted text in the footer, such as section headings (e.g., "Contact Us," "About Us").
headerOffcanvas: Boolean flag to enable or disable the off-canvas sidebar region.
headerOffcanvasCart: Boolean flag to enable or disable the off-canvas sidebar cart for shop pages.
headerSearch: Toggles the visibility of the search form in the header.
headerSticky: Controls whether the header remains fixed at the top of the page while scrolling.
includeColourSwitcher: Boolean flag to include a color scheme switcher component (intended for demo purposes).
includeCustomJS: Boolean flag to load a custom JavaScript file (custom.script.min.js) if set to true.
jsFilesBase: Base path for the JavaScript files, used to generate paths for various scripts like vendors.min.js and script.min.js.
mobileMenuBtnText: Text for the mobile menu button, usually displayed next to the icon.
mobileMenuTarget: Target ID for the mobile menu, used in the data-bs-target attribute to control which menu opens.
mobileMenuType: Type of mobile menu (e.g., off-canvas or dropdown), used in conjunction with mobileMenuTarget.
pageIsActive: A function used to check whether a particular page is active, applying the active class to its corresponding link.
pageKey: Key identifier for the homepage, used for navigation and active states.
pageTitle: Defines the title of the homepage, displayed in the <title> element.
siteFooterCopyright: Holds the text for the copyright notice displayed in the footer.
siteLogo: Properties for the site logo, such as src, alt, width, and height.
```

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

### AppStrap Dropdown Hover Configuration

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/dropdowns-hover

Details on configuring Bootstrap 5 dropdowns in AppStrap to activate on hover, including required data attributes for trigger links and breakpoint-specific CSS classes for responsive behavior.

```APIDOC
Dropdown Hover Attributes:
  `data-bs-toggle="dropdown"`: Required for Bootstrap dropdown functionality.
  `data-bs-hover="dropdown"`: Enables hover-based dropdown activation.
  `data-close-others="false"`: Prevents parent menu closure when hovering submenus.

Dropdown Hover Breakpoint Classes (apply to `.dropdown` element):
| Class | Dimensions |
| --- | --- |
| `dropdown-hover` | <576px |
| `dropdown-hover-sm` | ≥576px |
| `dropdown-hover-md` *default | ≥768px |
| `dropdown-hover-lg` | ≥992px |
| `dropdown-hover-xl` | ≥1200px |
| `dropdown-hover-xxl` | ≥1400px |
```

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

### Configure AppStrap Plugin Local Path in Body Tag

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/pages-in-subfolders

This HTML snippet demonstrates how to configure the local path for AppStrap plugins by adding a `data-plugins-localpath` attribute to the `<body>` tag. This is necessary for pages located in subfolders to ensure the `script.js` file can correctly find plugin assets.

```HTML
<body data-plugins-localpath="LOCAL-PATH">
```

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

### Configure Google Fonts and CSS Variables in AppStrap `pageSettings`

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/adding-google-fonts

This configuration snippet demonstrates how to add Google Fonts and customize Bootstrap CSS variables for specific pages using AppStrap's `pageSettings` system. The `additionalFonts` URLs are loaded asynchronously via JavaScript after the initial page load, and the `cssVariables` entry modifies the global base font for pages matching the 'shop' or 'shop-*' patterns.

```JavaScript
pageSettings: {
  'shop': {  // Applies to any page starting with 'shop-'
    additionalFonts: [// Load additional Google fonts ondemand after the initial page load
      'https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap'
    ],
    cssVariables: {
      '--bs-font-sans-serif': '"SUSE", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    },
  },
  'shop-*': {
    inheritFrom: 'shop'
  },
},
```

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

### Twig Template Embedding with Block Overrides

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/3-editing-files

Illustrates using Twig's `embed` tag to extend a partial template and override specific content blocks. This powerful feature enables inheritance and reusable content while allowing for custom modifications.

```Twig
{% embed '@partials/header.html' %}
  {% block navbarBrandContent %}
    <a href="#" class="navbar-text fs-5 align-self-stretch">Contact Us</a>
  {% endblock %}
{% endembed %}
```

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

### Twig Block Definitions in AppStrap Docs Header Partial

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/adding-main-navbar-content

This code snippet illustrates the structure of the `@partials/header.html` file in AppStrap Docs. It demonstrates how Twig blocks like `navbarBrandContent` and `navbarSecondaryContent` are defined, enabling parent templates to inject custom HTML. The snippet also includes conditional rendering logic based on various configuration variables such as `headerSticky`, `headerSearch`, and `siteLogo` to control the display of different header elements.

```Twig
{% if headerSticky %}<div data-bs-toggle="sticky">{% endif %}

  {% if headerSearch %}
    <!--Header search region - hidden by default -->
    <div class="header-search collapse" id="search">
      <form class="search-form container-fluid {{ 'flex align-items-center'|classMerge(navbarContainer) }}">
        <input type="text" name="search" class="form-control search" value="" placeholder="Search">
        <button type="button" class="btn btn-link"><span class="visually-hidden">Search </span><i class="bi-search fs-3"></i></button>
        <button type="button" class="btn btn-link close-btn" data-bs-toggle="search-form-close"><span class="visually-hidden">Close </span><i class="fa fa-times search-icon"></i></button>
      </form>
    </div>
  {% endif %}

  <!--Header & Branding region-->
  <div id="navbar-header" class="navbar {{ 'navbar'|classMerge(navbarToggleableClass, navbarClass) }}">
    {% if navbarContainerClass %}<div class="{{ navbarContainerClass }}">{% endif %}
      {% if block('navbarBrandContent') is defined or siteLogo or siteName or siteSlogan %}
        <!--branding/logo -->
        <div class="{{ 'hstack gap-3'|classMerge(navbarBrandWrapperClass) }}">
          {% if block('navbarBrandContent') is defined %}
            <!--
              Utility area to place additional brand area content within the header. Use .order- classes to order this in the header.
              By default this is empty.
              Override in parent pages like this, @see ./src/html/admin.html for an example:
              {#
                {% embed "@partials/header.html" %}
                  {% block navbarBrandContent %}<a class="btn btn-primary d-none d-lg-block order-4" href="#">Contact Us</a>{% endblock %}
                {% endembed %}
              #}
            -->
            {% block navbarBrandContent %}{% endblock %}
          {% endif %}

          <a class="{{ 'navbar-brand me-0 fw-bolder'|classMerge(navbarBrandClass) }}" href="{{ navbarBrandUrl }}" title="Home">
            {% if siteLogo and siteLogo.src %}
              <!-- siteLogo -->
              <img
                src="{{ siteLogo.src }}"
                alt="{% if siteLogo.width %}{{ siteLogo.alt }}{% else %}Site logo{% endif %}"
                {% if siteLogo.width %}width="{{ siteLogo.width }}"{% endif %}
                {% if siteLogo.height %}height="{{ siteLogo.height }}"{% endif %}
                {% if siteLogo.class %}class="{{ siteLogo.class }}"{% endif %}
              />
            {% endif %}

            {% if siteNameHidden %}
            <span class="visually-hidden">{{ siteName }}</span>
            {% else %}
            {{ siteName }}
            {% endif %}
          </a>

          {% if siteSlogan %}
          <span class="{{ 'vr'|classMerge(navbarVrClass) }}"></span>
          <div class="{{ 'navbar-text'|classMerge(siteSloganClass) }}">{{ siteSlogan }}</div>
          {% endif %}
        </div>
      {% endif %}

      {% if block('navbarSecondaryContent') is defined or headerSearch or headerNavbarToggle or headerShoppingCart %}
      <!-- other header content -->
      <div class="{{ 'hstack gap-3'|classMerge(navbarSecondaryClass) }}">
        {% if block('navbarSecondaryContent') is defined %}
          <!--
            Utility area to place additional content within the header. Use .order- classes to order this in the header.
            By default this is empty.
            Override in parent pages like this, @see ./src/html/header-navbar-below.html for an example:
            {#
              {% embed "@partials/header.html" %}
                {% block navbarSecondaryContent %}<a class="btn btn-primary d-none d-lg-block order-4" href="#">Contact Us</a>{% endblock %}
              {% endembed %}
            #}
          -->
          {% block navbarSecondaryContent %}{% endblock %}
        {% endif %}

        {% if not headerNavbarNavVrHide %}
          <span class="{{ 'vr'|classMerge(navbarVrClass) }}"></span>
        {% endif %}

        {% if headerSearch or headerNavbarToggle or headerOffcanvas %}
          <div class="navbar-nav flex-row gap-1 gap-lg-2 align-items-center">
            {% if headerSearch %}
            <!-- Search Trigger -->
              <a href="#search" class="{{ 'nav-link'|classMerge(searchBtnClass) }}" data-bs-toggle="search-form" data-bs-target=".header-search"><i class="bi-search"></i></a>
            {% endif %}
```

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

### Main Header Template Structure and Conditional Elements

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/adding-main-navbar-content

This extensive Twig snippet defines the core structure of the header, including conditional rendering for mobile menu toggles, offcanvas elements (general and shopping cart), and placeholders for main navigation and a utility area below the navbar. It showcases the use of Twig blocks for extensibility.

```Twig
{% if headerNavbarToggle %}
  <!-- Mobile collapse menu button -->
  <a
    href="#"
    class="{{ 'nav-link'|classMerge(mobileMenuBtnClass,navbarToggleClass) }}"
    data-bs-toggle="{{ mobileMenuType }}"
    data-bs-target="{{ mobileMenuTarget }}"
    {{ navbarToggleAttr|raw }}>
    {{ mobileMenuBtnText }}<i class="bi-list{% if mobileMenuBtnText %} ps-1{% endif %}"></i>
  </a>
{% endif %}

{% if headerOffcanvas %}
<!-- Header Offcanvas -->
  <a href="#" title="Click me you'll get a surprise" class="{{ 'nav-link order-5'|classMerge(searchBtnClass) }}" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-sidebar" aria-controls="offcanvas-sidebar">
    <i class="bi bi-three-dots-vertical"></i>
  </a>
{% endif %}

{% if headerOffcanvasCart %}
  <!-- Offcanvas Shop cart  -->
  <a href="#"
    class="lh-1 float-end order-5 position-relative fs-5 op-hover-7 nav-link mx-2 p-1"
    data-bs-toggle="offcanvas"
    data-bs-target="#shop-cart-sidebar">
      <i class="bi-cart-fill"></i>
      <span class="visually-hidden">Cart items: 3</span>
      <span
          class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary text-white border-white lh-1"
          style="--bs-badge-font-size: 10px;">
          3
      </span>
  </a>
{% endif %}
          </div>
        {% endif %}
      </div>
      {% endif %}

      {% block headerNavbarNav %}
        <!--
          Default main menu/navbar
          Override this or hide it like this, @see ./src/html/header-collapse-menu.html for an example:
          {#
            {% embed "@partials/header.html" %}
              {% block headerNavbarNav %}EMPTY or your main menu HTML {% endblock %}
            {% endembed %}
          #}
        -->
        {% include '@partials/main-nav.html' %}

      {% endblock %}
    {% if navbarContainerClass %}</div>{% endif %}
  </div>

  {% if headerNavbarBelow or block('headerNavbarBelow') is defined %}
    <!--
      Utility area below header navBar
      Override in parent pages like this, @see ./src/html/header-collapse-menu.html for an example:
      {#
        {% embed "@partials/header.html" %}
          {% block headerNavbarBelow %}Your headerNavbarBelow HTML content which will be automatically passed to this region in the header{% endblock %}
        {% endembed %}
      #}
    -->
    <div class="{{ 'navbar navbar-below'|classMerge(navbarBelowToggleableClass, navbarBelowClass) }}">
      {% if navbarBelowContainerClass %}<div class="{{ navbarBelowContainerClass }}">{% endif %}
        {% block headerNavbarBelow %}{% endblock %}
      {% if navbarBelowContainerClass %}</div>{% endif %}
      </div>
    </div>
  {% endif %}

{% if headerSticky %}</div>{% endif %}
```

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

### Upgrade Bootstrap JavaScript CDN Link (v4.0.0-beta.2 to v4.0.0-beta.3)

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/3.0.11-upgrade

This snippet illustrates the required update for the Bootstrap JavaScript CDN link as part of the AppStrap 3.0.11 upgrade. It shows the old script tag to be replaced and the new script tag to be used for Bootstrap version 4.0.0-beta.3.

```HTML
<!-- Bootstrap v4.0.0-beta.2 JS via CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
```

```HTML
<!-- Bootstrap v4.0.0-beta.3 JS via CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
```

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

### HTML Markup for Mobile Menu Toggle

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/mobile-menu-options

This HTML snippet defines the anchor tag used for toggling the mobile navigation menu in AppStrap. It dynamically sets classes and data attributes for Bootstrap's collapse or offcanvas functionality based on configuration, and includes an icon.

```HTML/Twig
<a
  href="#"
  class="{{ 'nav-link'|classMerge(mobileMenuBtnClass,navbarToggleClass) }}"
  data-bs-toggle="{{ mobileMenuType }}"
  data-bs-target="{{ mobileMenuTarget }}"
  {{ navbarToggleAttr|raw }}>
  {{ mobileMenuBtnText }}<i class="bi-list{% if mobileMenuBtnText %} ps-1{% endif %}"></i>
</a>
```

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

### Upgrade Bootstrap CSS CDN Link (v4.0.0-beta.2 to v4.0.0-beta.3)

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/3.0.11-upgrade

This snippet illustrates the required update for the Bootstrap CSS CDN link as part of the AppStrap 3.0.11 upgrade. It shows the old link to be replaced and the new link to be used for Bootstrap version 4.0.0-beta.3.

```HTML
<!-- Bootstrap v4.0.0-beta.2 CSS via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
```

```HTML
<!-- Bootstrap v4.0.0-beta.3 CSS via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
```

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

### Trigger Magnific Popup Image Gallery

Source: https://themelizeme.github.io/appstrap-docs/index.html/changelog/3.2-upgrade

HTML attributes used to initialize a Magnific Popup image gallery from a single button. The `data-toggle` attribute activates the popup, and `data-magnific-popup-items` specifies a comma-separated list of image URLs to display in the gallery.

```HTML
data-toggle="magnific-popup" data-magnific-popup-items='IMAGE-URL, IMAGE2-URL'
```

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

### Apply AppStrap Styling to Slider Revolution Container

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/slider-revolution

This HTML snippet demonstrates how AppStrap applies its custom styling to Slider Revolution elements by adding the `.slider-appstrap-theme` class to the container. This is achieved via the `data-page-class` attribute. Removing this attribute will revert to default Slider Revolution styles.

```HTML
<div class="slider-wrapper tp-banner-container" data-page-class="slider-appstrap-theme">
```

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

### AppStrap Docs: Twig CSS Class Variables Reference

Source: https://themelizeme.github.io/appstrap-docs/index.html/quickstart/2-config-customisation

This section provides a reference for Twig variables that control various CSS classes within the AppStrap Docs framework. These variables allow for dynamic styling and behavior adjustments of UI components like navigation bars, dropdowns, footers, and mobile menus.

```APIDOC
Classes (Twig Variables):
  dropdownCollapseClass: Class controlling the collapse behavior of dropdown menus in the navigation bar.
  dropdownHoverBpClass: Class that enables hover behavior for dropdown menus on specific screen widths.
  dropdownMenuClass: Class applied to the dropdown menu for controlling its appearance (e.g., background color, borders).
  footerBgClass: Class for styling the background of the footer, such as color and transparency.
  footerBtnsClass: Class for buttons in the footer section, adjusting their style (e.g., text color, padding).
  headerBrandHClass: Class applied to the brand heading in the header (e.g., the site name or logo).
  megaMenuClass: Class controlling the behavior and layout of the mega menu in the navigation bar.
  megaMenuShopClass: Class for customizing the shop's mega menu, affecting its layout and appearance.
  megaMenuToggleClass: Class applied to the mega menu toggle button, influencing its size and behavior.
  mobileMenuBtnClass: Class applied to the mobile menu button for styling, controlling its appearance on smaller screens.
  navbarBelowClass: Class for additional navigation content below the main navigation bar.
  navbarBelowContainerClass: Class applied to the container of the navigation content below the main navbar.
  navbarBelowToggleableClass: Makes the navigation content below the main navbar collapsible on smaller screens.
  navbarBrandClass: Class applied to the branding section of the navbar, adjusting size and appearance.
  navbarClass: Class for styling the main navbar, such as background color, border, and padding.
  navbarContainerClass: Class applied to the container holding the navbar, controlling width and positioning.
  navbarHeaderClasses: Classes used to style the header section of the navbar, influencing its layout and behavior.
  navbarMainClass: Class applied to the main navigation container (`<nav>`).
  navbarMainNavLinkClass: Class for styling individual links in the main navigation, adjusting padding and other properties.
  navbarNavClass: Class applied to the navigation list (`<ul>`) within the navigation bar.
  navbarSecondaryClass: Class for secondary content in the navbar, such as extra links or buttons.
  navbarToggleClass: Class for the toggle button in the navbar, controlling the collapsible behavior.
  navbarToggleableClass: Class that allows the navbar to be expandable or collapsible based on screen size.
  navbarVrClass: Class for a vertical divider (`<span class="vr">`) within the navbar, separating different sections.
  searchBtnClass: Class for styling the search button in the navbar, controlling size and alignment.
  siteSloganClass: Class applied to the site slogan in the header, controlling its visibility based on screen size.
```

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

### Configure Gulp to Disable Unused Asset Removal

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/unusedassets

This configuration setting, located in `config.PROJECT.js`, controls whether Gulp automatically removes assets not referenced in HTML files during the build process. Setting it to `false` ensures all assets are copied to the distribution directory.

```JavaScript
buildSettings.unusedAssets: false
```

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

### Customizing `navbarSecondaryContent` Block

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/adding-main-navbar-content

This snippet illustrates how to add content to the `navbarSecondaryContent` block, which appears before the main navbar. It's suitable for placing elements like a registration button to the right of the header.

```Twig
{% embed '@partials/header.html' %}
  {% block navbarSecondaryContent %}
  <a href="#pricing" data-bs-toggle="scroll-link" class="btn btn-primary btn-sm d-none d-lg-block fw-bold px-lg-3 py-lg-2 ms-lg-3">Register</a>
  {% endblock %}
{% endembed %}
```

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

### Change Primary Color in AppStrap Config

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/override-colours

This method allows users to set the theme's primary color by modifying the `config.PROJECT.js` file. It utilizes a predefined color scheme name to dynamically alter the theme's CSS variables, providing a simple way to switch colors.

```JavaScript
colourScheme: 'COLOUR', // Example: colourScheme: 'purple',
```

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

### Override Primary Color in AppStrap SASS

Source: https://themelizeme.github.io/appstrap-docs/index.html/examples/override-colours

This method offers a more robust way to customize the primary color by directly setting the `$primary` SASS variable within the `/src/scss/_variables.custom.scss` file. This approach ensures that all color functions throughout Bootstrap and AppStrap Docs are updated, providing a complete color change.

```SCSS
$primary: HEX_COLOUR; // Example: $primary: #343566;
```
Tokens:
Raw