Introduction
Elstar is a complete HTML admin template with developer experience friendly & highly scalable, it comes with a complete set of UI components meticulously crafted with Tailwind CSS, it fulfilled most of the use case to create modern and beautiful UI and application
Elstar offers several themes and layout options that allow you to update the style of your application in no time, it also supports dark theme & RTL which let you kickstart any project quickly..
Core libraries used
Here is a list of some core libraries that we use in Elstar:
-
JQuery
A fast, small, and feature-rich JavaScript library.
-
TailwindCSS
A utility-first CSS framework packed with classes.
-
Gulp
We use Gulp as our build tool to bundle JavaScript & Css.
-
Bootstrap(Javascript)
We included Bootstrap, but only javascript part for the ease of some component functionality.
Installation
Prerequisites
Before you begin with Elstar, you may need to install the following tools make sure your development environment able to run the template.
Installing Elstar
Once have you uncompressed the .zip file you have downloaded, you will find 4 folder as below:
-
demo
Demo is the main preview project, it included everything that can see in the live demo. This package is just for reference only, we do not recommend using this version to build your app.
-
starter
This is a starter pack for developer, it initialize the basic of the template. You can create pages and write your own code here, we highly recommend you copy this folder to your workspace for development.
-
documentation
This folder contain a index.html that redirect to our online documentation.
After choosing the package you want to install, navigate to project root directory, where the
package.json located and run the command below in console:
This will take some time and install all necessary dependencies into the node_modules directory in order for you to start developing.
TailwindCSS
Tailwind CSS is a utility-first CSS framework with predefined classes that you can use to build and design the UI directly in the HTML. We use Tailwind as our core CSS framework, most of the UI in Elstar is built entirely with it features, so you can easily update the theme & base by altering
tailwind.config.js under the root directory.
Tooling
If you are using VS Code as your IDE, we suggest to install Tailwind CSS IntelliSense plugin, it provides autocomplete, syntax highlighting, and linting based on your Tailwind config which can speed up your development.
@apply directive underlying, in some cases, applying tailwind classes on these component might not working, you might need to use
!important modifier to override the default high specificity selectors.
You can make any utility important by adding a ! character to the beginning, E.g:
You can always visit the official doc to find out classes usage & Tailwind configuration: https://tailwindcss.com/
Starter
As we mentioned in Installation section, we have provided a starter version with minimum core components and functionality setup, we strongly recommend developer use this version to build the app on top.
After opened the starter pack, you can run npm run dev commands and start working
Major Command
| COMMAND | DESCRIPTION |
|---|---|
npm run dev
|
Create a build directory & start a local static HTML web server
http://localhost:9050
which will which auto update & refresh when any html, css, js files was changes.
|
npm run build
|
It will create a
dist
folder & copy all compiled & minimized files into it for production ready.
|
Other Command
| COMMAND | DESCRIPTION |
|---|---|
npm run css
|
Compile SCSS to CSS. |
npm run js
|
Compile ES6 to ES5 and concatnate core vendor JS. |
Updating
Since the platform does not provide a version control system, updating can be difficult. However, we have provided some suggestions here that may help you keep your templates more easily updated.
- Before starting your new project, you might host the original template to your own reposity.
- Pull a branch from the repository as your workspace.
- For every new update released, you can push the latest version content to the repository.
- Merging workspace branch with the original branch to update the latest changed.
Folder Structure
In this section you will find the basic folder structure and everything you need to get the template up and running. Both the demo and starter versions have the same structure, except that the starter version will have fewer files or folders than the demo version as they are not required in the starter.
Below is a schematic diagram of directory structure:
SCSS
Although we have been using TailwindCss, we also have some underlying styling that is written in the scss,
which located at src/scss/*.
This is our styles folder structure
Every folders inside styles directory contain an index.scss
that will carry all other css files under the same directory and all these index.scss
will eventually import into the entry css.
Custom Css
If in some cases tailwind is unable to meet your needs, you can add your custom css under this folder. We suggest to utilize functions & directives provided by tailwind while adding a custom css, such as
@apply,
@layer,
theme() & etc.
You can refer to the official documentation for further information & usage.
Javascript
ES
Elstar JS logics was built with ES6 and will transpile into ES5(most web browsers supportted version) by using our task runner(refer to Starter section).
Transplied JS files can be found under src/js folder.
The following is the folder strcture of src/es
JS
src/js included all transpiled ES file and other other JS files
JS
In HTML pages, you can include your own js or any pages js under <-- Page js -->
<!-- Core Vendors JS -->
<script src="js/vendors.min.js"></script>
<!-- Other Vendors JS -->
<!-- Import optional vendors JS here -->
<!-- e.g -->
<!-- <script src="vendors/apexcharts/apexcharts.js"></script> -->
<!-- Page JS -->
<!-- Import page JS here -->
<!-- e.g -->
<!-- <script src="js/pages/dashborad.js"></script> -->
<!-- Core JS -->
<script src="js/app.min.js"></script>
HTML
Elstar provide 5 types of app layouts & 3 types of auth layouts, all layouts tempalte included in under src directory in starter package.
Layout types
The following explained each of layouts in details.
-
Classic Layout
Template strcture:
-
Modern Layout
Template strcture:
-
Stacked Side Layout
Template strcture:
-
Simple Layout
Template strcture:
-
Decked Layout
Template strcture:
Dark/Light Mode
To activate dark mode, we can add dark to class in html tag. However some components in different layouts require specific class adjustments to work seamlessly in dark mode
RTL
To initialize RTL, simply set dir="rtl" attribute to html tag
Theme Color
We created a new set of color scheme call 'primary' bounded with css variables in tailwind.config.js, making it the primary color palette utilized throughout the template..
To adjust the theme color, just go to src/scss/tailwind/index.scss and modify the theme value.
Example usage
Compile
Run the following command to build the application into /dist directory
Sources & Credits
| Name | URL | License |
|---|---|---|
| @fullcalendar/core | https://github.com/fullcalendar/fullcalendar | MIT |
| @fullcalendar/daygrid | https://github.com/fullcalendar/fullcalendar | MIT |
| @fullcalendar/interaction | https://github.com/fullcalendar/fullcalendar | MIT |
| apexcharts | https://github.com/apexcharts/apexcharts.js | MIT |
| bootstrap | https://github.com/twbs/bootstrap | MIT |
| datatables.net-dt | https://github.com/DataTables/Dist-DataTables-DataTables | MIT |
| jquery | https://github.com/jquery/jquery | MIT |
| perfect-scrollbar | https://github.com/mdbootstrap/perfect-scrollbar | MIT |
| prism | https://github.com/PrismJS/prism | MIT |
| quill | https://github.com/quilljs/quill | MIT |
| gulp | https://github.com/gulpjs/gulp | MIT |
| sass | https://github.com/sass/sass | MIT |
| tailwindcss | https://github.com/tailwindlabs/tailwindcss | MIT |
| jqvmap | https://github.com/10bestdesign/jqvmap | MIT |
| jquery-validation | https://github.com/jquery-validation/jquery-validation | MIT |
| dragula | https://github.com/bevacqua/dragula | MIT |
Changelog
v1.0.0
25 Sep 2023
- - [Release] Initial Release.