Materialcss Documentation

Materialcss is a admin template based on materializecss. Builded with CSS and jQuery.


Materialcss is a multipurpose admin template designed based on the google material and jQuery frameworks.

Materialcss has a huge collection of material design animation & widgets, UI Elements, jQuery plugins and works seamlessly on all major web browsers, tablets and phones with multiple layout. User friendly and intuitive to use.


This is the simple static HTML template so no need any headech to install it.

  • 1. Unzip Downloaded File.
  • 2. Open Page in your favorite browser and Enjoy your demo.
Note: we recomonded you to please add css in style.css and js in script.js file that already included in materialcss pages.

Layout options

Below class help for customize page, Add these class in id control-body according to your need.

example: -
1. For Boxed layout, fixed sidebar and fixed header class="layout-boxed fixed-sidebar medium-sidebar fixed-nav"
2. For Default layout, unfixed sidebar and fixed header class="unfixed-sidebar medium-sidebar fixed-nav"
etc ..
Class Description
.layout-boxed Its define box body
.fixed-sidebar Its define position fixed left sidebar
.unfixed-sidebar Its define position unfixed left sidebar
.fixed-nav Its define position fixed header or navbar
.unfixed-nav Its define position unfixed header or navbar

How to change theme color

Replace default color #3949ab to which color you want in theme-1.css file

Template Structure

All template files have fixed structure consisting of header,prepage loader, left sidebar, right sidebar, content and footer.

Font Family

The standard font Material Design uses is Roboto. We have included the font files with our framework.

We bundle our framework with the latest iteration of Roboto Google has released. It comes with 5 different font weights you can use: 100, 300, 400, 500, 600.

html{font-family: "Roboto", sans-serif;}

Folder Structure

we follow simple structure for the template

  • materialcss
    • assets
      • css - All css files
      • data - Demo data use in datatable
      • fonts - Fonts
      • images - All demo images
      • js - All js file
      • vendors - All external jquery and css library
      • video - Video use for demo
    • html - HTML pages
    • html-options - More layout HTML pages
    • Index.html - Materialcss lunch page
    • - Materialcss redme

Theme Files

HTML Files

  • index.html: Index page
  • dashboard.html: Admin Dashboard page
  • buttons.html: Buttons page
  • breadcrumbs.html: Breadcrumbs page
  • collections.html: Collections page
  • collapsibles.html: Collapsibles page
  • dropdown.html: dropdown page
  • tabs.html: Tabs page
  • pagination.html: Pagination page
  • preloader.html: Preloader page
  • toasts.html: Toasts page
  • tooltip.html: Tooltip page
  • waves.html: Waves page
  • typography.html: Typography page
  • icons.html: Google material icons page
  • animations.html: Animations css page
  • shadow.html: Box shadow page
  • media.html: CSS media page
  • pulse.html: CSS button pulse page
  • chips.html: Chips page
  • cards.html: Cards page
  • carousel.html: Owl carousel page
  • modals.html: Modals page
  • range-slider.html: Range Slider page
  • sweetAlert.html: SweetAlert page
  • highlight.html: Prism syntax highlight page
  • chartjs-charts.html.html: Chart JS chartspage
  • echarts-charts.html: echarts charts page
  • google-charts.html: google chart Charts page
  • form-elements.html: Form Elements page
  • form-layouts.html: Form Layouts page
  • form-validations.html: Form Validations page
  • form-masks.html: Form Masks page
  • text-editor.html: Text Editor page
  • basic-table.html: Basic Tables page
  • data-table.html: Data Tables page
  • login.html: Login page
  • signup.html: Signup page
  • reset.html: Reset page
  • lock.html: Screen lock page
  • change-password.html: Change Password page
  • contactus.html: Contactus page
  • blank.html: Landing blank page
  • 404.html: 404 page not found page for landing page
  • 500.html: 500 server error page for landing page
  • 404-admin.html: 404 error page for dashboard page
  • 500-admin.html: 500 error page for dashboard page
  • blank.html: Dashboard blank page
  • grid.html: Grid page
  • color.html: Color page
  • helpers.html: Helpers page
  • docs.html: MaterialMe docs page

CSS Files

  • app.css: Theme styles
  • theme-1.css: Theme color styles
  • style.css: Your custom styles
  • materialize.min.css: materialize css
  • plugins: Plugins folder
    • prism: Prism syntax highlighter
      • prism.css: Main File
    • animate: Animate css plugin
      • animate.min.css: Main File
    • sweetalert: Alert jquery plugin
      • sweetalert.css: Main File
    • OwlCarousel2: Carousel jquery plugin
      • owl.carousel.min.css: Main File
      • owl.theme.default.min.css: Owl theme File
    • quill: Web text editor jquery plugin
      • quill.snow.css: Main File
    • DataTables: Table jquery plugin
      • jquery.dataTables.min.css: Main File
    • material-icons: Google material icons
      • material-icons.css: Main File

Javascript Files

  • app.js: Theme js
  • script.js: Your custom js
  • jquery.min.js: jquery javascript plugin
  • materialize.min.js:materialize js file
  • plugins: Plugins folder
    • prism: Prism syntax highlighter
      • prism.js: Main file
    • sweetalert: Alert jquery plugin
      • sweetalert.min.js: Main file
    • echarts: echarts charts
      • echarts.min.js: Main File
      • map-world.js: echarts map plugin
    • Chartjs: Chart jquery plugin
      • Chart.min.js: Main file
    • OwlCarousel2: Carousel jquery plugin
      • owl.carousel.min.js: Main file
    • jquery-validation: Form validater jquery plugin
      • jquery.validate.min.js: Main file
    • formatter: Form formatter jquery plugin
      • jquery.formatter.min.js: Main file
    • quill: Web text editor jquery plugin
      • quill.min.js: Main file
    • DataTables : Table jquery plugin
      • jquery.dataTables.min.js: Main file
  • loader.js:google charts file

Source and Plugins

Plugin Website Licence
materializecss Framework MIT
jQuery JavaScript Library MIT
Google Material icons Apache 2.0
quill Text editor BSD
chartjs MIT
Datatables Multi
Sweet Alerts MIT
animate.css MIT
formatter.js MIT
jquery-validation MIT
echarts BSD
Google charts Apache 2.0
OwlCarousel2 MIT
Prism syntax highlighter MIT
rangeSlider MIT

Helper Classes

We make classes to help you in your developement process, and make it fast. checkout the below link for the helper classes

Check the live Preview

Grid options

Checkout the below link for the Grid classes

Check the live Preview

Color options

Checkout the below link for the Color classes

Check the live Preview

CSS Files Included In Template

<!-- materialize stylesheet -->
<link href="asset/vendors/materialize/materialize.min.css" type="text/css" rel="stylesheet" />
<!-- google material design icons -->
<link href="asset/vendors/material-icons/material-icons.css" type="text/css" rel="stylesheet" />
<!-- prism syntax highlighter -->
<link href="asset/vendors/prism/prism.css" type="text/css" rel="stylesheet" />
<!-- materialcss app stylesheet -->
<link href="asset/css/app.css" type="text/css" rel="stylesheet" />
<!-- materialcss theme stylesheet -->
<link href="asset/css/theme-1.css" type="text/css" rel="stylesheet" />
<!-- Your custom  stylesheet -->
<link href="asset/css/style.css" type="text/css" rel="stylesheet" />
<!-- animate animation plugin -->
<link href="asset/vendors/animate/animate.css" type="text/css" rel="stylesheet" />
<!-- Owl Carousel 2 carousel jquery plugin -->
<link href="asset/vendors/OwlCarousel2/dist/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<!-- Owl Carousel 2 theme -->
<link href="asset/vendors/OwlCarousel2/dist/assets/owl.theme.default.min.css" type="text/css" rel="stylesheet" />
<!-- rang slider jquery plugin -->
<link href="asset/vendors/rangeSlider/css/ion.rangeSlider.css" type="text/css" rel="stylesheet" />
<!-- rang slider theme -->
<link href="asset/vendors/rangeSlider/css/ion.rangeSlider.skinFlat.css" type="text/css" rel="stylesheet" />
<!-- alert jquery plugin -->
<link href="asset/vendors/sweetalert/sweetalert.css" type="text/css" rel="stylesheet" />
<!-- quill test editor -->
<link href="asset/vendors/quill/quill.snow.css" type="text/css" rel="stylesheet" />
<!-- materializecss data table -->
<link href="asset/vendors/DataTables/media/css/dataTables.materializecss.min.css" type="text/css" rel="stylesheet" />

JS Files Included In Template

<!-- Jquery -->
<script src="asset/vendors/jquery/jquery.min.js" type="text/javascript"></script>
<!-- Materialize js -->
<script src="asset/vendors/materialize/materialize.min.js" type="text/javascript"></script>
<!-- prism syntax highlighter -->
<script src="asset/vendors/prism/prism.js" type="text/javascript"></script>
<!-- materialcss theme script -->
<script src="asset/js/app.js" type="text/javascript"></script>
<!-- Your custom script -->
<script src="asset/js/script.js" type="text/javascript"></script>
<!-- Owl Carousel 2 carousel jquery plugin -->
<script src="asset/vendors/OwlCarousel2/dist/owl.carousel.min.js" type="text/javascript"></script>
<!-- rangslider jquery plugin -->
<script src="asset/vendors/rangeSlider/js/ion.rangeSlider.min.js" type="text/javascript"></script>
<!-- alert jquery plugin -->
<script src="asset/vendors/sweetalert/sweetalert.min.js" type="text/javascript"></script>
<!-- echarts chart -->
<script src="asset/vendors/echarts/echarts.min.js" type="text/javascript"></script>
<!-- echarts map extension -->
<script src="asset/vendors/echarts/map-world.js" type="text/javascript"></script>
<!-- Google chart -->
<script src="" type="text/javascript"></script>
<!-- Chartjs chart -->
<script src="asset/vendors/Chartjs/Chart.min.js" type="text/javascript"></script>
<!-- form validation jquery plugin -->
<script src="asset/vendors/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
<!-- form mask jquery plugin -->
<script src="asset/vendors/formatter/jquery.formatter.min.js" type="text/javascript"></script>
<!-- quill test editor -->
<script src="asset/vendors/quill/quill.min.js" type="text/javascript"></script>
<!-- Data table -->
<script src="asset/vendors/DataTables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<!-- materializecss data table plugin -->
<script src="asset/vendors/DataTables/media/js/dataTables.materializecss.min.js" type="text/javascript"></script>
<!-- Export table into csv data table plugin -->
<script src="asset/vendors/DataTables/media/js/table2csv.min.js" type="text/javascript"></script>