Get started with Melvin

Premium Bootstrap 4 template for building responsive, mobile-first, sites with translation system.

Quick start

Melvin comes with three different directories. One is the gulp source code version. An other is the HTML commented files with all javascripts and css scripts. The last is the documentation

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

    <!-- CSS -->
    <link rel="stylesheet" href="css/application.min.css" media="all">
    <link rel="stylesheet" href="css/inputmask.css" media="all">
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css" media="all">
    <link rel="stylesheet" href="css/tempusdominus-bootstrap-4.min.css">
    <link rel="stylesheet" href="css/fullcalendar.print.min.css" media="print">
    <link rel="stylesheet" href="css/jqvmap.min.css" media="all">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/ionicons.min.css" rel="stylesheet" type="text/css">

Copy-paste the font <link> into your <head> after all other stylesheets to load font family.

FONTS 

    <!-- FONTS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,400italic,700'>

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

<!-- MOMENT JAVASCRIPT -->
<script src="js/moment.min.js"></script>
<script src="js/moment-timezone.min.js"></script>
<script src="js/moment-timezone-with-data-2012-2022.min.js"></script>
<!-- JQUERY JAVASCRIPT -->
<script src="js/jquery.min.js"></script>
<!-- BLOCK UI FOR RELOAD X-CARD EVENT JAVASCRIPT -->
<script src="js/blockUI.min.js"></script>
<!-- I18NEXT TRANSLATION SYSTEM JAVASCRIPT -->
<script src="js/i18next.min.js"></script>
<script src="js/jquery-i18next.min.js"></script>
<script src="js/i18nextXHRBackend.min.js"></script>
<script src="js/i18nextBrowserLanguageDetector.min.js"></script>
<!--DROPZONE JAVASCRIPT -->
<script src="js/dropzone.js"></script>
<script>
  Dropzone.autoDiscover = false;
</script>
<!-- JQUERY DRAG AND DROP JAVASCRIPT -->
<script src="js/jquery-ui.min.js"></script>
<!-- CALENDAR JAVASCRIPT -->
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/locale-all.js"></script>
<!-- DATE PICKER JAVASCRIPT -->
<script src="js/tempusdominus-bootstrap-4.min.js"></script>
<!-- INPUT MASK JAVASCRIPT -->
<script src="js/jquery.inputmask.bundle.js"></script>
<script src="inputmask/bindings/inputmask.binding.min.js"></script>
<!-- IE COVER JAVASCRIPT -->
<script src="js/modernizr-custom.min.js"></script>
<!-- SPARKLINE JAVASCRIPT -->
<script src="js/jquery.sparkline.min.js"></script>
<!-- BOOTSTRAP AND APPLICATION JAVASCRIPT -->
<script src="js/popper.min.js"></script>
<script src="js/application.min.js"></script>
<!-- CUSTOM SCROLLBAR JAVASCRIPT -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- CHART.JS JAVASCRIPT -->
<script src="js/Chart.bundle.min.js"></script>
<!-- FLOT CHART JAVASCRIPT -->
<script src="js/jquery.flot.min.js"></script>
<script src="flotchartplugins/jquery.flot.time.min.js"></script>
<script src="flotchartplugins/jquery.flot.selection.min.js"></script>
<script src="flotchartplugins/jquery.flot.stack.min.js"></script>
<script src="flotchartplugins/jquery.flot.resize.min.js"></script>
<script src="flotchartplugins/jquery.flot.pie.min.js"></script>
<!-- TOASTR FEEDBACK JAVASCRIPT -->
<script src="js/toastr.min.js"></script>
<script src="js/promise.min.js"></script>
<!-- SWEETALERT FEEDBACK JAVASCRIPT -->
<script src="js/sweetalert2.min.js"></script>
<!-- MAPS JAVASCRIPT -->
<script src="js/jquery.vmap.min.js"></script>
<script src="js/gmaps.min.js"></script>

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <!--META CHARSET -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--PAGE TITLE -->
    <title>Template for admin style with sidebar</title>
    <!-- MOBILE SPECIFIC -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- FAVICON -->
    <link rel="shortcut icon" href="http://www.themacart.com/melvin/img/favicon.ico">
    <!-- CSS -->
    <link rel="stylesheet" href="css/application.min.css" media="all">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/ionicons.min.css" rel="stylesheet" type="text/css">
       <!-- Optional Css -->
    <!-- FONTS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,400italic,700'>
</head>
  <body>
    <h1>Hello, world!</h1>


<!-- MOMENT JAVASCRIPT -->
<script src="js/moment.min.js"></script>
<script src="js/moment-timezone.min.js"></script>
<script src="js/moment-timezone-with-data-2012-2022.min.js"></script>
<!-- JQUERY JAVASCRIPT -->
<script src="js/jquery.min.js"></script>
<!-- BLOCK UI FOR RELOAD X-CARD EVENT JAVASCRIPT -->
<script src="js/blockUI.min.js"></script>
<!-- I18NEXT TRANSLATION SYSTEM JAVASCRIPT -->
<script src="js/i18next.min.js"></script>
<script src="js/jquery-i18next.min.js"></script>
<script src="js/i18nextXHRBackend.min.js"></script>
<script src="js/i18nextBrowserLanguageDetector.min.js"></script>
<!-- IE COVER JAVASCRIPT -->
<script src="js/modernizr-custom.min.js"></script>
<!-- BOOTSTRAP AND APPLICATION JAVASCRIPT -->
<script src="js/popper.min.js"></script>
<script src="js/application.min.js"></script>
<!-- CUSTOM SCROLLBAR JAVASCRIPT -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- TOASTR FEEDBACK JAVASCRIPT -->
<script src="js/toastr.min.js"></script>
<script src="js/promise.min.js"></script>
<!-- SWEETALERT FEEDBACK JAVASCRIPT -->
<script src="js/sweetalert2.min.js"></script>
    <!-- Optional JavaScript -->
  </body>
</html>

That’s all you need for overall page requirements.

← Keoby.com: Your Guide to the Best Deals!
Melvin content →