Getting Started

This guide will help you get started with a this template, including how to run and customize.

Run your theme

So you’ve downloaded your theme’s .zip file, unpacked it, and you’re ready to start building! To view your theme, you’ll need to run your theme’s "build process" to compile source files and create a local server to preview pages.

Note: Minimax template you are currently viewing is a Tailwind Static HTML Template. NOT a WordPress Theme!. Please DO NOT try to install files into WordPress this will not work.

Tools & Setup development

Minimax is built using modern development toolset like Node Js, Gulp and Browsersync. Follow these steps and you should be ready to rock:

  • Download and install Node.js and open Terminal (Command Line)
  • Open root Minimax directory from terminal
  • Install a theme’s dependencies via npm install
  • After Npm install complete, run npm run dev command
  • Your local server’s address will run on ( localhost:3100 )
  • Now you can edit source files and preview changes instantly with live reload

Yup, that's it

Info: Node js version 12.xx or later and code editor using Visual studio code. Run npm install --global gulp-cli command if you haven't installed Gulp CLI before.

Package.json, Gulp and Browsersync

When install processing completed, you'll be able to run the various commands provided from the command line. Now you have an integrated workflow.

Our package.json and gulpfile.js includes the following tasks:

Core Task Description
npm run dev Start development process with generate src/tailwindcss/*.css to src/css/style.css and launch Browsersync in http://localhost:3100/ with automate page reload
npm run build Generates a dist/ directory with all the production files Minify css, js and other files

If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.

File structures

Download package

A guide to understanding how theme is structured and organized. Once downloaded, unzip the compressed folder and you'll see something like this:

  • Minimax

    • index.html

    • ***.html (all html files)

      • app

        • **.html

      • auth

        • **.html

      • components

        • **.html

      • dashboard

        • **.html

      • docs

        • **.html

      • form-content

        • **.html

      • pages

        • **.html

      • user

        • **.html

    • package.json

    • gulpfile.js

    • config.js

    • tailwind.config.js

    • src

      • css

        • styles.css

      • js

        • theme.js
        • vendors.js

      • tailwindcss

        • tailwindcss.css

      • img

        • logo.png
        • **.jpg ( all source images )

    • dist

      • css

        • bundle.min.css

      • js

        • bundle.min.js

    • vendors

      • alpinejs

      • chart.js

      • -- other vendors

How to customize css?

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with add your custom css or precss in src/tailwindcss/tailwindcss.css file. If you want to add other plugin css or remove some css, please edit this file.

                      
@tailwind base;
@tailwind components;
@tailwind utilities;

********************

plugins css in here

More information about custom in Tailwindcss is in here

How Edit RTL CSS?

Add or edit rtl css from html file like this ltr:text-left rtl:text-right

More information about rtl in here Tailwind RTL

How to customize JS?

To avoid file loss, overrides of your custom js or any other conflicts during the upgrade process, create or modify your custom javascript in src/js/theme.js file.

                      
                        // Custom JS
                        const myCustom = function () {
                          
                          // insert your javascript in here

                        }

How to customize Vendors JS?

We use third party plugins to add features to the theme. If you don't need the feature, you can remove it from the html file before </body>.


<!--start::Global javascript (used in all pages)-->
<script src="../vendors/alpinejs/dist/cdn.min.js"></script><!-- core js -->
<script src="../vendors/flatpickr/dist/flatpickr.min.js"></script><!-- input date -->
<script src="../vendors/flatpickr/dist/plugins/rangePlugin.js"></script><!-- input range date -->
<script src="../vendors/@yaireo/tagify/dist/tagify.min.js"></script><!-- input tags -->
<script src="../vendors/pristinejs/dist/pristine.min.js"></script><!-- form validation -->
<script src="../vendors/simple-datatables/dist/umd/simple-datatables.js"></script><!--sort table-->
<!--end::Global javascript (used in all pages)-->

<!-- Minify Global javascript (for production purpose) -->
<!-- <script src="dist/js/scripts.js"></script> -->

<!--start::Theme javascript ( initialize global javascript )-->
<script src="../src/js/theme.js"></script>

<!--start::Vendor javascript (only on this page)-->
<script src="../vendors/chart.js/dist/chart.min.js"></script><!-- charts -->
<script src="../src/js/chart.js"></script><!-- chart config -->

<script src="../vendors/dropzone/dist/dropzone-min.js"></script><!-- uploader images -->
<script src="../vendors/simplemde/dist/simplemde.min.js"></script><!-- text editor -->
<script src="../vendors/jsvectormap/dist/js/jsvectormap.min.js"></script><!-- vector map -->
<script src="../vendors/jsvectormap/dist/maps/world.js"></script><!-- world map -->
<script src="../vendors/glightbox/dist/js/glightbox.min.js"></script><!-- lightbox -->
<script src="../vendors/@splidejs/splide/dist/js/splide.min.js"></script><!-- carousel -->
<script src="../vendors/dragula/dist/dragula.min.js"></script><!-- drag and drop -->
<script src="../vendors/fullcalendar/main.min.js"></script><!-- calendar events -->
<script src="../src/js/prism.js"></script><!-- highlight code -->
<!--end::Vendor javascript (only on this page)-->

<!--start::Call vendor ( initialize vendor javascript )-->
<script src="../src/js/vendor.js"></script>

How to customize Color and background?

We use a subset of Tailwindcss color palette for generating color schemes.
You can use text- or bg- before color like this text-orange-500 or bg-orange-600 and customize color from HTML file.

Our primary color is text-orange-. You can change all primary color on html file with change text-orange- and bg-orange- with others color.

More complete color can see in Official Tailwindcss

Dark Mode

Minimax is ready in light and dark mode. Very simple to change color skin, just editing html file and add "dark" classes like this <html class="dark" lang="en">.

Read more information about Tailwind dark mode in here https://tailwindcss.com/docs/dark-mode

You can change setting about Tailwindcss from this file. For example: Change Google fonts from tailwind.config.js

                
                  // tailwind.config.js
module.exports = {
  mode: 'layers',
  darkMode: 'class', // or 'media' or false
  theme: {
    extend: {},
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      serif: ['Playfair Display', 'serif'],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

For more information about Theme configuration please read in here

Credits

First, let us take this opportunity to thank all the creative minds for their great products and plugins.

Vendors and Plugins

All third-party plugins (libraries) are located in the vendors/.. folder.

Name URL
Tailwind Css https://tailwindcss.com/
Alpine JS https://github.com/alpinejs/alpine
Chart.js https://www.chartjs.org/
Dragula https://github.com/bevacqua/dragula
Dropzone https://github.com/dropzone/dropzone
Flatpickr https://github.com/flatpickr/flatpickr
FullCalendar https://github.com/fullcalendar/fullcalendar
Gauge.js https://github.com/bernii/gauge.js
Microtip https://github.com/ghosh/microtip
Smooth-scroll https://github.com/cferdinandi/smooth-scroll
Glightbox https://github.com/biati-digital/glightbox
Google Fonts https://fonts.google.com
Jsvectormap https://github.com/themustafaomar/jsvectormap
Prism.js http://prismjs.com
Simple-DataTables https://github.com/fiduswriter/Simple-DataTables
SimpleMDE https://simplemde.com/
Splide https://splidejs.com/
Pristine https://pristine.js.org/
Tagify https://github.com/yairEO/tagify

Images & Assets

Source images are located in the src/img/.. folder

Name Description URL
Tailwinddashboard.com https://tailwinddashboard.com
Pexels https://www.pexels.com/
Boxicons https://boxicons.com/
Bootstrap Icons https://icons.getbootstrap.com/