### 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 ``` -------------------------------- ### 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 ..............rest of page 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 %}
Free Worldwide Shipping
(+44) 7283643345
Sale Now On!
{% 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 %} Main Menu Panel {% 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 `` 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 ``` -------------------------------- ### 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 './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 ``` -------------------------------- ### 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
``` -------------------------------- ### 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 tags in the head section. additionalFonts: Array of URLs for additional font files to be loaded via 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