Introduction
Theme.Readykit is a bootstrap 4 based completely responsive admin template. It comes with parts of reusable and excellent UI components, form elements, widgets, tables, extra pages and etc. It permits developers to effortlessly construct a super amazing web application. It can be utilized for all sort of dynamic web applications like CRM, HRM, Hospital management dashboard or any kind of application backend.
Files Structure
| Path | Description |
|---|---|
| doc | Theme documentation |
| theme | Main theme folder |
| assets | Contains assets including images and plugins |
| plugins | All plugins css and js files |
| images | Contains all theme images |
| css | Application main css file theme.css |
| js | Contains all scripts |
| scss | All sass files |
| html files | Rest of the files are all theme html pages |
Plugins
We've used the following plugins in our theme as listed
Getting Started
Go to theme/blank.html. Copy the entire code and paste it to your html file. Then start
writing code just after the comment
<!-- Main content goes here -->
Theme Customization
SASS
Theme.Readykit uses SASS for handling our theme
css efficiently. Our base SASS folder exist in theme/scss directory. This folder
contains all our SASS functions, mixins, variables for all HTML files.
scss folder structure
| File | Description |
|---|---|
| bootstrap | Contains all bootstrap scss files |
| forms | Contains styles for all form elements |
| layouts | Contains layout files for theme |
| mixins | Contains sass mixin files for theme |
| navs | Contains topbar and sidebar styles |
| pages | Contains all styles for unique pages |
| utilities | Contains theme utility styles |
| _alerts.scss | Defines alert styles |
| _avatars.scss | Defines style for avatars |
| _badges.scss | Defines badge style |
| _buttons.scss | Defines buttons style |
| _cards.scss | Defines card style |
| _chart.scss | Defines chart style |
| _datatable.scss | Defines styles for datatable |
| _dropdown.scss | Defines dropdown styles |
| _forms.scss |
Defines all imported files from scss/forms folder
|
| _misc.scss | Defines some miscellaneous styles for theme |
| _modals.scss | Defines styles for modals |
| _navs.scss |
Defines all imported files from scss/navs folder
|
| _notes.scss | Defines note styles |
| _preloaders.scss | Defines loader styles |
| _progress-bar.scss | Defines style for profile page |
| _tab.scss | Defines tab menu styles |
| _table.scss | Defines table styles |
| _theme-colors.scss | Defines all css variables for theming |
| _toasters.scss | Defines toaster style |
| _utilities.scss |
Defines all imported files from scss/utilities folder
|
| _variables.scss |
Defines all sass variables for our theme
*** This is the main variables file for scss used by almost all .scss
files
|
| _theme.scss |
The main scss file
*** This files compiles to our main theme css
|
Compilation
We compile our base scss file into theme/css/theme.css file. If you want to change or
modify any style please visit the SASS website
for installation and usage
Javascript
Theme.Readykit uses jQuery, Bootstrap JS and a few of the third-party plugins. There are may more third party plugin which you'll be able utilize according to your needs.
js folder structure
| File | Description |
|---|---|
| chart | Defines js for initialize charts |
| dashboard | JS files for different dashboards |
| ui-components | JS files for ui components |
| bootstrap.bundle.js |
Bootstrap 4 core bundle js (Required in every pages)
|
| calendar.js | JS for handling calendar events |
| feather.min.js |
Feather icon js file (Required in every pages)
|
| global-search.js |
Define js for top navbar search. (Optional) You can remove it if not needed
|
| jquery.min.js |
JQuery file (Required in every pages)
|
| theme.js |
Defines custom js for all html files (Required in every pages)
|
Credits
We've used image asset in our theme from the listed copyright free websites