Thank you for Purchasing



Maestrolux - HTML Landing Page Collection

Version 3.0.1

  • Created : 21 Jul 2020
  • Latest Update : 29 Nov 2024

What is Maestrolux?

banner

Maestrolux Is a Powerful, Responsive and Multipurpose One Page Template. 45 Landing Page Collection packed with flexible technologies and frameworks HTML5, Bootstrap 4, jQuery, MaterializeCSS and Pug.js. Then for UI templates, Sketch files includes as well.

Maestrolux provides you dramatic 24 color variation combined with Dark/Light mode, it’s thoughtfully designed to make Your users and visitors get fantastic user experience and greb information easier. But, that’s not all - this template also has RTL support and translation ready with 6 languages.

We have included 45 ready to use templates + starter-project. Be it Medical Health, Education, Corporate Agency, Interior Architect, Movie Entertaintment, Cryptocurrency, Fashion, Cloud Hosting, Mobile Apps, 4 Portfolios and Saas. Those awesome things is supported by hundreds of components based on material-ui designs. That all for you to boost your web app development process. Maestrolux is very easy to fit your business needs! Try to visit the demo and get convinced!

Template Feature

HTML5 + jQuery version

  • 45 landing page templates. Built with one of most popular and flexible javascript library jQuery, Bootstrap, MaterializeCSS (Material Design) and Pug.js for HTML template engine.
  • Various modern design Medical, Education, Movie, Agency, Architect, Cryptocurrency, Fashion, Hosting, Mobile, 4 Portfolios and Saas
  • Premium designs. Simple and elegant multi color scheme
  • Easy integration Write in HTML5, JS and SCSS
  • Easy modification Generate dynamic HTML content and layout with Pug.js and Gulp.js
  • Dark Mode. Creative and modern design along with dark mode to make it easy on your eyes.
  • RTL Support. RTL adjustment styling with rtl-saas.
  • Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, and 󠁥󠁮󠁧󠁿Português.
  • 100+ Pug.js section components and UI modules which reusable and easy to modify.
  • Interactive and Attractive show. Stunning animation, parallax, scrolling effects, even video background will make your site wilder
  • Responsive design Based on standard 12 Grid System
  • Starter Project. Build app from scratch without without being distracted from innate feature.
  • Support mono repo . Modern architecture to managing modules in multiple project.
  • Fully vector icons and font icons.
  • And many more...

Sketch Version

  • 45 elaborate high quality designs
  • Including Dark and Light version
  • Based on standard 12 Grid System
  • Fully Vector Icons
  • Easy to edit and well organized layers, and goups.

Folder Structure

├── packages
│   └── [theme-name]
│       ├── 404.html
│       ├── README.md
│       ├── assets/
│       ├── blank-page.html
│       ├── contact.html
│       ├── crossdomain.xml
│       ├── gulpfile.js
│       ├── humans.txt
│       ├── index.html
│       ├── multilang/
│       ├── package-lock.json
│       ├── package.json
│       ├── robots.txt
│       └── src/

Install NPM

This template has include the 3rd party plugins and libraries in assets/[css,js]/vendors/ But in modern development exclude 3rd party packages from project and use package manager like npm or yarn to install them. To begin installation please follow this guide bellow:
  • Connect to the internet
  • Install NodeJs from NodeJs Official Page *We recommend to use LTS version, which recommended for most users
  • Unzip the Maestrolux file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you've unzipped the product)
  • Go to packages and choose a template. Example packages/agency/
  • Install Modules
    Install module dependencies by run this script in terminal 
    npm install
    It will download some necessary dependencies, and just wait until finish.
    process
  • For installation by use lerna, please check this link Installation using lerna

Installation With Lerna

Lerna is A tool for managing JavaScript projects with multiple packages. This template has 11 packages(projects) inside packages/ folder. So to install them at once you can use lerna. See full docs of lerna here https://github.com/lerna/lerna. Here's the installation guide:

  • Let's start by installing Lerna globally with npm: 
    npm install --global lerna
  • Go to your root project (where you've unzipped the product)
  • Then install all packages 
    lerna bootstrap
    Note: This process will take a few minutes, because there's lot of modules to be installed. If got stuck for this step. Please install the packages(projects) one by one by use npm install instead.

Use HTML, CSS, JS

View and Edit HTML

  • After extract the package just open the HTML file in packages/[theme-name]/[file.html]
  • In example packages/agency-theme/index.html
  • To view it you can open in browser
  • To edit it you can open in text editor (sublime, visual studio code, atom, bracket, etc). After edit and save, please open or reload in browser to see the changes

Change HTML layout and theme

To change HTML layout and theme is applicable in every .html file

  • RTL and LTR layout:
    1. In html file change the dir and lang attribute in body tag
      - LTR 
      <html lang="en" dir="ltr">
      - RTL 
      <html lang="ar" dir="rtl">
    2. Change the css vendor framworks, which are bootstrap.css and materialize.css with rtl version 
      <link href="assets/css/rtl-vendors/bootstrap-rtl.css" rel="stylesheet">
<link href="assets/css/rtl-vendors/materialize-rtl.css" rel="stylesheet">
    3. Note: if you add another css plugin that need transform to rtl verion. Please visit https://rtlcss.com/
  • Theme Color
    1. In html file just change the class name
    2. For dark/light mode in .m-application by switch between .theme--dark or .theme--light
      - Dark mode: 
      <div class="m-application theme--dark transition-page" id="app">
      - Light mode: 
      <div class="m-application theme--light transition-page" id="app">
    3. For theme color in .m-content by change .[theme-name]-var with available theme from src/scss/utils/_color-var.scss - In example joker theme color 
      <div class="m-content green-leaf joker-var" id="main-wrap">

Edit CSS and JS

This template use SCSS to create CSS by Gulp.js. More than that Gulp.js also use for merge css and js files to a single file.

We recommend to do not edit files: assets/css/styles.css and assets/js/scripts.js Because those are generated files, and will be replaced automatially by gulp.js. Please edit from the source in src/ folders
  • To add or modify css, please open src/scss/. If you add new scss files, don't forget to register it in src/scss/styles.scss
  • To add or modify js, please open src/js. If you add new js files, You don't need register it, it will automatically merge in assets/js/scripts after run gulp command bellow.
  • To build the js and css assets run 
    gulp assets
    and for watch the changes 
    gulp watch_assets
  • The result will be placed in:
    - CSS: assets/css/styles.css
    - JS: assets/js/scripts.css

Use HTML in different language

  • After extracting file, there will be multilang/ folder in packages/[theme-name]. Most of the text content is appropriate for that's language
  • In example for site with Bahasa Indonesia packages/agency-theme/multilang/id/index.html
  • To view it you can open in browser
  • To edit it you can open in text editor (sublime, visual studio code, atom, bracket, etc). After edit and save, please open or reload in browser to see the changes
  • The rest modification such as theme, js and css are same as described above.

Troublehooting

Here's most common error problem when installation and first setup project

  • if got warning like this :
    
npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
    Don't worry the app will run as well

    For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.

  • if got an error with a dependencies installation. Try to remove the all module node_modules/. Then install again with npm install. If error still happen, please try to remove the problematic package node_modules/ foler. After that try to install the problematic package manually. npm install ‹package_name› --save-dev
  • if still got an error. Try to update the problematic package instead.
  • If you get error messages when start project npm run dev like this
    ERROR in ./app/styles/layout/base.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!./app/styles/layout/base.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  • It mean the node-sass not installed succesfully. May because connection problem, changed node environment during installation, or blocked node-sass repository
  • Please install node-sass manually by npm install node-sass --save
  • Try to start project again npm start
  • You will get this warning message if not use HTTPS 
    A cookie associated with a resource at http://doubleclick.net/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.
    Here's the guide to setup HTTPS:


Basic Code Structure

Folder structure

template-theme                                                                          
├── 404.html
├── README.md
├── assets
│   ├── css
│   ├── favicon.ico
│   ├── favicons
│   ├── images
│   └── js
├── blank-page.html
├── contact.html
├── crossdomain.xml
├── gulpfile.js
├── humans.txt
├── index.html
├── multilang
│   ├── ar
│   ├── de
│   ├── en
│   ├── id
│   ├── pt
│   └── zh
├── package-lock.json
├── package.json
├── robots.txt
└── src
    ├── api.json
    ├── js
    ├── locales
    ├── pug
    └── scss

Code preview



Landing Page

Landing page structure src/pug/pages/index.pug and index.html

code

Header

You can put google analytics, font icon, embeded fonts, etc here: src/pug/layout/document.pug and index.html

code2

SCSS

/src/scss/styles.scss

code2


Directory and File

Name Directory Description Sample Use
Pug.js UI Components src/pug/components/ Modular HTML components written in pug.js include ../components/parallax/dot.pug
Images assets/images Store static images - HTML
<img src="assets/images/agency-logo.svg" alt="logo" />
- PUG
img(src=assets+"/images/agency-logo.svg" alt="logo")/
- SCSS/CSS
background-image: url(../images/agency-logo.svg)
SCSS src/scss Output destination: assets/css/styles.css @import './components/expertise';
JS src/js Output destination: assets/js/scripts.js Just create file in src/js then run gulp assets to merge in to assets
Dummy text and link src/api.json It use for pug.js only span #{brand.agency.name}



Template Architecture

This is template architecture in diagram visualization. Click diagram or full screen button full screen to show in new tab with full screen

HTML and SCSS Generated by Gulp.js

Before work with the tasks bellow, please install all necessary packages by run npm install

  1. Build all files

    Source Result
    src/pug/pages/*.pug *.html
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for build static HTML (converted from Pug.js exclude multi-language), scss and merge js

    gulp build

  2. Watch all files files

    Source Result
    src/pug/pages/*.pug *.html
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for watch changes of static HTML (converted from Pug.js, exclude multi-language), scss and js

    gulp
    It will open the page in default browser automatically in port 900x. For example agency-theme will run in port:9001

  3. Build assets only

    Source Result
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for watch changes of scss and js

    gulp assets

  4. Watch assets only

    Source Result
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for watch changes of scss and js

    gulp watch_assets
    It will open the page in default browser automatically in port 900x. For example agency-theme will run in port:9001

  5. Translate

    Source Result
    src/pug/pages/*.pug mutlilang/[lang]/*.html

    This command use generate multi-language HTML. It's uses locale files from src/locale/*.json as translated library and generated by pugI18n

    Pug setup required, please change base.pug before run gulp command
    src/pug/layouts/base.pug 
    
//- Available env: dev, prod, and node_modules
- var env = 'dev'

//- HTML attribute
- var doc_lang = 'en'
- var doc_dir = 'ltr'

//- Assets Path
- var multilang = '../../assets'
- var prod = '../assets'
- var dev = './assets'

//- Use assets path
- var assets = multilang // Change this
    In Console/Terminal 
    gulp translate
    The generated result will be placed in multilang/[lang]/*.html. For example for template with Bahasa Indonesia multilang/id/index.html

  6. Translate RTL

    Source Result
    src/pug/pages/*.pug mutlilang/ar/*.html
    src/assets/css/vendors/ src/assets/css/rtl-vendors/

    The gulp translate command is not make layout switched to RTL. You need run this command to generate multi-language HTML with RTL layout. It's uses locale files from src/locale/ar.json as translated library and generated by pugI18n

    Pug setup required, please change base.pug before run gulp command
    src/pug/layouts/base.pug 
    
//- Available env: dev, prod, and node_modules
- var env = 'dev'

//- HTML attribute
- var doc_lang = 'ar' // Change this       
- var doc_dir = 'rtl' // Change this       

//- Assets Path
- var multilang = '../../assets'
- var prod = '../assets'
- var dev = './assets'

//- Use assets path
- var assets = multilang // Change this
    In Console/Terminal 
    gulp build
    gulp translate_rtl
    The generated result will be placed in multilang/ar/*.html. If you have new languge with RTL required, it will placed on multilang/[new-lang]/index.html

  7. Build Production

    Source Result
    mutlilang/[lang]/*.html dist/[lang]/*.html
    src/assets/css/ dist/assets/css/
    src/assets/js/ dist/assets/js/
    src/assets/img/ dist/assets/img/

    This command is usually used for production purpose which is generate minified css, js even html.

    Pug setup required, please change base.pug before run gulp command
    src/pug/layouts/base.pug 
    
//- Available env: dev, prod, and node_modules
- var env = 'prod' // Change this       

//- HTML attribute
- var doc_lang = 'en'
- var doc_dir = 'ltr'

//- Assets Path
- var multilang = '../../assets'
- var prod = '../assets'
- var dev = './assets'

//- Use assets path
- var assets = prod // Change this
    In Console/Terminal 
    gulp build
    gulp translate
    gulp translate_rtl
    gulp prod
    The generated result will be placed in dist/.

Pug.js Coding

Follow this guide bellow to modify user interface, create pages, branding identity, language, etc.
Create New Page and Component
Brand/Project Name
Navigation Menu
Youtube Config
Change Layout(RTL) and Theme
Set Language

External Reference

Here's some external reference of library that we used


Fonts Used



roboto font

Icons Used

Material Font Icons

  • Please make sure Google Material Icons already embeded in head tag
    If not just embed this inside head tag 
    <head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
</head>
  • Connect to internet
  • Then use it inside Vue templates. Example for use add icon 
    <i class="material-icons">add</i>
  • Here's the cheatsheet for Material Icon https://materializecss.com/icons.html




IonIcons Font

  • Please make sure IonIcons already embeded in head tag.
    If not just embed this inside head tag 
    <head>
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>
  • Connect to internet
  • The sample usage 
    <span class="ion-ios-world-outline" />
  • Here's the ionicons cheatsheet https://ionicons.com/v2/cheatsheet.html

    • Sources and Credit

    Fonts :
    Roboto, Robot Condensed, Lato, Open Sans, Montserrat

    Preview Images Used
    Unsplash
    Pixabay
    randomuser.me

    Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.


    Credits
    Name Repository License
    materializecss https://github.com/Dogfalo/materialize MIT
    animate.css https://www.npmjs.com/package/animate.css MIT
    jQuery https://github.com/jquery/jquery MIT
    Bootstrap https://github.com/twbs/bootstrap MIT
    Pug.js https://github.com/pugjs/pug MIT
    node-sass https://www.npmjs.com/package/node-sass MIT
    gulp.js https://github.com/gulpjs/gulp MIT
    gulp-pug https://github.com/gulp-community/gulp-pug MIT
    gulp-i18n-pug https://github.com/felixzapata/gulp-i18n-pug MIT
    gulp-saas https://github.com/dlmanning/gulp-sass MIT
    rtl-sass https://www.npmjs.com/package/rtl-sass ISC
    enllax https://github.com/mmkjony/enllax.js MIT
    jquery-navScroll https://github.com/jhammann/jquery-navScroll MIT
    slick https://github.com/kenwheeler/slick/ MIT
    wow.js https://github.com/graingert/wow MIT
    jQuery Youtube Background https://github.com/rochestb/jQuery.YoutubeBackground MIT
    gulp-rtlcss https://github.com/jjlharrison/gulp-rtlcss MIT
    jQuery form validator https://github.com/victorjonsson/jQuery-Form-Validator Dual licensed under the MIT or GPL Version 2 licenses

    Online Suport

    If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

    A product by Ilham Meidi Brata



    Enjoy and don’t forget to rate my template.

    Thank you very much!

    Change Log

    Version 3.0.1 – 29 Nov, 2024
    Fixed: Error load asset for 2D Agency and Education
    File changes
    - /minimal2d/agency-theme
    - /minimal2d/education-theme
    Version 3.0.0 – 17 Aug, 2024
    Features: Added New Themes
    File changes
    - /minimal2d
    - /minimal3d
    - /creative
    Version 2.1.0 – 25 May, 2024
    Chore: Upgrade to Bootstrap v5
    File changes
    - /packages/[theme-name]/*.html
    - /packages/[theme-name]/assets/css
    - /packages/[theme-name]/assets/js
    - /packages/[theme-name]/src/js/
    - /packages/[theme-name]/src/scss/
    - /packages/[theme-name]/src/pug/
    Feature: Added slider fature for mobile-app theme
    File changes
    - /packages/mobile-apps-theme/src/scss/utils/_overide.scss
    - /packages/mobile-apps-theme/src/pug/components/feature.pug
    - /packages/mobile-apps-theme/index.html
    File changes
    - /packages/[theme-name]/*.html
    - /packages/[theme-name]/assets/css
    - /packages/[theme-name]/assets/js
    - /packages/[theme-name]/src/js/
    - /packages/[theme-name]/src/scss/
    - /packages/[theme-name]/src/pug/
    Version 2.0.1 – 8 Jul, 2023
    Fixed: Sass configuration and package version
    File added
    - /packages/[theme-name]/packages.json
    - /packages/[theme-name]/gulfile.js
    Version 2.0 – 14 May, 2022
    Add new theme for portfolio
    File added
    - /packages/femine-theme
    - /packages/maskulino-theme
    - /packages/unisex-theme
    Version 1.3 – 14 aug, 2021
    Sketch: Update alignment and spacing
    Files changes:
    - sketch-files/*.sketch
    Fixed: Crypto contact home btn
    Files changes:
    - packages/crypto-theme/assets/css/styles.css
    - packages/crypto-theme/login.html
    - packages/crypto-theme/register.html
    - packages/crypto-theme/src/pug/components/forms/auth-frame.pug
    - packages/crypto-theme/src/scss/components/_form.scss
    Feature: Add swipe event for animated slider
    Files changes:
    - packages/[crypto-theme, fashion-theme, and hosting-theme]/index.html
    - packages/[crypto-theme, fashion-theme, and hosting-theme]/assets/js/script.js
    - packages/[crypto-theme, fashion-theme, and hosting-theme]/src/js/promotion.js
    - packages/[crypto-theme, fashion-theme, and hosting-theme]/src/pug/components/promotions.pug
    Docs: Add guide to change svg gradient color
    Version 1.2.1 – 27 Dec, 2020
    Chore: Update Gulp Saas version for node v14
    Files changes:
    - /packages/[theme-name]/package.json
    Version 1.2 – 9 Nov, 2020
    Sketch: Optimize resolution width
    Files changes:
    - sketch-files/*.sketch
    Fixed: Page title
    Files changes:
    - /packages/[theme-name]/src/pug/pages/*.pug
    Feature: Add translation for notification
    Files changes:
    - packages/[theme-name]/src/pug/components/notification.pug
    Version 1.1 – 24 Aug, 2020
    Fixed mobile issue
    Saas Theme:
    - Update active tab color in dark mode
    - Update header color in error page
    Medical, Movie and Education
    - Fixed missing google font
    Version 1.0 – 21 Jul, 2020
    Maestrolux released