Minimage - Tailwind CSS 3 Admin Layout & UI Kit HTML Template.
Get start with Minimage . Launch your campaign and benefit from our expertise on designing and managing conversion centered Tailwind CSS html page.
Minimage is a fully responsive landing template built using the latest TailwindCss framework. It’s designed for describing your app, agency or business.
Please follow below steps to install and setup all prerequisites:
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.
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.
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.
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.
To setup the admin theme, follow below-mentioned steps:
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.
|
Change Color & Font Family in tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'body': ['"Public Sans"', 'sans-serif'],
},
},
}
Change Font Family
Link in head tag
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
├── Documentation
└── Admin
├── dist (Compiled versions - Ready to use)
├── src/
│ └── assets - the reusable assets used in different demos
│ │ └── data
│ │ └── fonts
│ │ └── images
│ │ └── js
│ │ └── scss
│ └── source html file
├── gulpfile.js - containing gulp tasks
├── package.json
├── tailwind.config.js
└── README.md
You can change the colour palatte of any demo very easily by simply changing the few CSS variables' value.
In order to modify the colors in existing themes, open
the app.css
and change any variable in it. Your changes would get
reflected automatically in any Tailwind based
components or elements. Note that, this requires you to
include this file in head-css.php.
Minimage provides the RTL support as well. You will simply add attribute in html tage.
simply change the reference of update the html
tag with attribute dir="rtl". E.g.
<html lang="en"
dir="rtl">
We have provided a starter page (check
pages-starter.php). It allows you
to get started easily and helps you to add new page.
Please note following important points:
We've used the following resources as listed. These are some awesome creation and we are thankful to the community.
It is a utility-first CSS framework the core of the style configuration and it provides utility classes for almost every CSS rule available.
Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS.
Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!
Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.
- MyraStudio
Stay Awesome!