Documentation
- Galura ID
- Documentation
Introduction
Get start with Galura ID. Launch your campaign and benefit from our expertise on designing and managing conversion centered Tailwind CSS html page.
Galura ID is a Powerful Tailwind CSS Multipurpose Landing & Admin Dashboard Template. It is an excellent HTML template for startup, cloud hosting, business, corporate, minimal portfolio single product (Smartwatch) , Saas, Social media marketing, Digital marketing/agency, Email Templates, Marketing, Agency, Careers and Jobs, Helpcenter, and much more.
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│ └── css │ └── custom │ └── pages │ │ └── _helper.css │ │ └── _hero.css │ │ └── _countdown.css │ │ └── _portfolio.css │ │ └── _contact.css │ │ │ └── plugins │ │ └── _swiper-slider.css │ │ └── _testi.css │ │ └── _choices.css │ │ └── _datepicker.css │ │ │ └── strucure │ │ └── _topnav.css │ │ └── _footer.css │ │ │ └── _general.css │ │ │ └── tailwind.css │ │ └── fonts │ └── images │ └── js │ └── php │ │ │ └── Partials│ └── All partials Files │ │ │ └── All HTML Files │ └── gulpfile.js└── package.json└── postcss.config.js└── tailwind.config.js
Admin Dashboard Template│ ├── dist folder├── src folder│ └── assets│ └── css │ └── custom │ └── pages │ │ └── _helper.css │ │ └── _countdown.css │ │ └── _portfolio.css │ │ │ └── plugins │ │ └── _testi.css │ │ └── _calendar.css │ │ └── _ckeditor.css │ │ └── _apexchart.css │ │ │ └── strucure │ │ └── _topnav.css │ │ └── _footer.css │ │ │ └── _general.css │ │ │ └── tailwind.css │ │ └── fonts │ └── images │ └── js │ └── php │ │ │ └── Partials│ └── All partials Files │ │ │ └── All HTML Files │ └── gulpfile.js└── package.json└── postcss.config.js└── tailwind.config.js
CSS
Files are explained below:
| File | Description |
|---|---|
| CSS | You use icons.css and tailwind.css. |
| Dark Version | In order to have Dark mode enabled, only add dark class in HTML tag like, <html className="dark" lang="en"> |
| RTL Version | In order to have RTL mode enabled, Please changes in the src/partials/main.html file update the html tag like <html className="dark scroll-smooth" lang="en" dir="ltr"> |
How to change the color in Galura ID?
It's easy to change your color if your color is indigo-600 to another (red-600, red-400, orange-700, etc. as your theme primary color) please check and read the below link to the customizing colors docs, https://tailwindcss.com/docs/customizing-colors
How to change the fonts family in Galura ID?
First of all open tailwind.css (path: HTML/src/assets/css/tailwind.css)
and add your font family @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
Import the @import link from your Google Fonts.
And then please open the tailwind.css and please create your google fonts name in the module.exports > theme > fontFamily
For example: --font-nunito: "Nunito", "serif";
add your Google fonts like the above example.
Please refer this below link for font-family: https://tailwindcss.com/docs/font-family#customizing-your-theme
Menu style for Landing Page Template
Right Side Navbar Menu
If you use right side navbar menu so please use src/partials/navbar/nav-right.html
otherwise
If you directly use dist file so please just add one class nav-right !justify-end along with navigation-menu
Left Navbar Menu
If you use left side navbar menu so please use src/partials/navbar/nav-left.html
otherwise
If you directly use dist file so please just add one class nav-left !justify-start along with navigation-menu
Light Navbar Menu
If you use Light menu so please use src/partials/navbar/nav-center-light.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 so please use src/partials/navbar/nav-left-light.html
otherwise
If you directly use dist file so please just add two class nav-left !justify-start nav-light along with navigation-menu
Light with Right Navbar Menu
If you use Light with Right side navbar menu so please use src/partials/navbar/nav-right-light.html
otherwise
If you directly use dist file so please just add two class nav-right !justify-end nav-light along with navigation-menu