• Home
  • Documentation

MaterialX Documentation


MaterialX is a part of our premium Admin Template called MaterialXPro. We are using the famous Bootstrap 4 framework and maintain Material Design pattern. The technology that we are using is HTML5, CSS3, jQuery and we are using CSS preprocessor SASS. It is super easy to customize and 100% responsive.

It can be used for most types of dashboards and app templates. It has all types of the component which needs for developing any types of web app or website. If you can't see any feature that you need for your project on this free version, definitely you should use MaterialXPro, here we added all kinds of possible features, components, and elements for you.


MaterialX can be installed using multiple methods. Pick your favorite method from the list below.

npm i materialx-yoo
Via Git
  • You can fork MaterialX Repository. GitHub fork Guidline
  • Clone your machine by using this Command
    git clone https://github.com/yookits/materialx.git

Files Structure

  • Admint
    • assets
      • css
      • scss
      • fonts
      • img
      • js
    • index.html


We have own CSS class naming convention that begins with prefix 'yoo-'. Some examples of MaterialX class names would be: yoo-main-header, yoo-sidebarheader, yoo-footer. For this naming convention, you can integrate unlimited 3rd party plugins and resources without worrying about class naming conflicts. However for Bootstrap and other 3rd party plugins class extending we used their own CSS naming format.

We use SASS as a CSS preprocessor. SASS is the most mature, stable, and powerful professional grade CSS extension language in the world.

If don't know SASS coding, don't worry you can directly edit CSS file.

CSS Helper Classes

We are creating some global class for easy work.

Class Description
Margin helper classes where [size] can accept 0 to 15. Example: yoo-margin-0, yoo-margin-top-15
Margin helper classes where [size] can accept 0 to 15. Example: yoo-padding-0, yoo-padding-top-15
yoo-height-b[size] - This is for Larg Screen
yoo-height-lg-b[size] - This is for Mobile Screen
Space helper classes where [size] can accept 0, 5, 10, 15, 20. Example: yoo-height-b10, yoo-height-lg-b20
yoo-font-style-i Italic Font helper classes.
Text transform helper classes.
yoo-font-[weight] Weight helper classes where [weight] can accept light, regular, medium, semi-bold, bold, black. Example: yoo-font-bold
yoo-radious[size] Radious helper classes where [size] can accept 1 to 10. Example: yoo-radious1, yoo-radious10


We are using jQeury. All custom jQuery and plugin initialize code are written in materialX.js (there is a separate file for chart and svg map initialize) file. And all are function-based. Like if you did not want any JS block you just remove or comment that function.

For SVG Maps, we are creating an svg-map folder. Please take your desired file. We also create an SVG map preview page.

Function Description
mainMenu() Initialize Main Menu.
mobileMenu() Initialize Mobile Menu.
sideBarHeader() Initialize Sidebar Menu.
stickyHeader() Initialize Sticky Header.
calendarInt() Initialize Calender Plugin.
nicescrollInt() Initialize Nice Scroll.
customToggleInt() Initialize Custom Toggle Button.
bootstrapInt() Bootstrap Element Initialize
rippleEffect() For Material Ripple Effect
checkMark() For Custome Check Box
formField() For Material Form Style

Color Palettes

All color comes from SASS variable, if you would like to use your own color pallet, just go to variables.scss file and replace color to your own color. The compiler will change all colors to your color.

Customer Support

If you are facing any issues or you can not understand any part you can request for support. Our dedicated support team will assist you within Two Business Day.