Documentation

Introduction

Get Start With Landrick. Launch your campaign and benefit from our expertise on designing and managing conversion centered Bootstrap 5 html page.

Landrick is a Powerful Saas & Software Bootstrap Template. It is an excellent HTML template for startup, coworking space, cloud hosting, car ride, classic saas, classic application, event, business, application, educational course, personal portfolio, services, enterprise, minimal portfolio single product, saas, Social media marketing, Digital marketing/agency, Email Templates, Online Learning Course, marketing, agency, Careers, Customer Supports, Onepage Landing, and much more. Landrick is fully updated with the latest Bootstrap v5.1.3 and Gulp file. We are provide a Dark version with RTL supported in both the Light and Dark versions.

Admin: We are provide fully responsive Admin Dashboard template. Also, We are provide a Dark version with RTL supported in both the Light and Dark versions

Setup HTML

Introduction

We are using gulp which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can stop messing around while building any project. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Yarn

    Make sure to have the Yarn installed & running in your computer. If you already have installed Yarn on your computer, you can skip this step. We suggest you to use Yarn instead of NPM.

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 16.

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on run command npm install -g gulp from your terminal.

  • Git

    Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command Description
yarn install This would install all the required dependencies in the node_modules folder.
gulp Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.
gulp build Generates a /dist directory with all the production files.

Folder & File Structure

Landing Template
│ ├── dist folder ├── src folder ├── assets ├── fonts ├── images ├── js ├── php └── scss ├── custom ├── icons ├── _variables.scss ├── _variables-dark.scss ├── style.scss ├── style-dark.scss ├── bootstrap.scss ├── bootstrap-dark.scss └── icons.scss ├── partials ├── footer └── All Footer partials html files ├── navbar └── All Navbar partials html files ├── head-css.html ├── main.html ├── component-sidenav.html ├── cookie-popup.html ├── offcanvas-right.html ├── switcherbar.html ├── title-meta.html └── vendor-script.html └── all html pages ├── gulpfile.js ├── package.json └── yarn.lock
Admin Dashboard
│ ├── dist folder ├── src folder ├── assets ├── fonts ├── images ├── js └── scss ├── custom ├── icons ├── _variables.scss ├── _variables-dark.scss ├── style.scss ├── style-dark.scss ├── bootstrap.scss ├── bootstrap-dark.scss └── icons.scss ├── partials ├── footer.html ├── head-css.html ├── main.html ├── offcanvas-right.html ├── sidebar-colored.html ├── sidebar-dark.html ├── sidebar-light.html ├── title-meta.html ├── top-header.html └── vendor-script.html └── all html pages ├── gulpfile.js ├── package.json └── yarn.lock

Theme Styles for both Admin Dashboard and Landing Template

RTL Version

In order to have RTL mode enabled, Please changes in the src/partials/main.html file update the html tag like <html lang="en" dir="rtl"> and than replace the reference of bootstrap.min.css to bootstrap-rtl.min.css and also change style.css to style-rtl.css in the src/partials/head-css.html

Dark Version
Dark Version :

In order to have Dark mode enabled, replace the reference of bootstrap.min.css to bootstrap-dark.min.css and also change style.css to style-dark.css in the src/partials/head-css.html

Dark RTL Version :

In order to have Dark RTL mode enabled, Please changes in the src/partials/main.html file update the html tag like <html lang="en" dir="rtl"> and than replace the reference of bootstrap.min.css to bootstrap-dark-rtl.min.css and also change style.css to style-dark-rtl.css in the src/partials/head-css.html

Menu style for Landing Page Template

Right Side Navbar Menu

If you use right side navbar menu please use src/partials/navbar/nav-right.html

otherwise

If you directly use dist file so please just add one class nav-right along with navigation-menu

Left Navbar Menu

If you use left side navbar menu please use src/partials/navbar/nav-left.html

otherwise

If you directly use dist file so please just add one class nav-left along with navigation-menu

Light Navbar Menu

If you use Light menu so please use src/partials/navbar/nav-light-center.html

otherwise

If you directly use dist file so please just add one class nav-light along with navigation-menu

Light with Left Navbar Menu

If you use Light with Left side navbar menu please use src/partials/navbar/nav-light-left.html

otherwise

If you directly use dist file so please just add two class nav-left nav-light along with navigation-menu

Light with Right Navbar Menu

If you use Light with Right side navbar menu please use src/partials/navbar/nav-light-right.html

otherwise

If you directly use dist file so please just add two class nav-right nav-light along with navigation-menu