Skip to main content

Introduction

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.

Show components requiring JavaScript
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates
  • Moment for translated date
  • I18Next system for translation
  • Dropzone for uploading form
  • Jquery-ui fro drag and drop
  • Fullcalendar for events
  • Tempusdominus for date picker
  • Inputmask to extend inputs form
  • Modernizr-custom for IE problem with CSS “Cover” function
  • Jquery Sparkline for small charts.
  • mCustomScrollbar to create pretty scroll system
  • Flot chart plugins
  • Toastr & Sweetalert2 for feedback message
  • gmaps & jvqmaps for customizable maps

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. Visit the Layout docs to start laying out your site’s content and components.