back to main Purchase


Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites.

Smarty is a premium html template!

The only template which does not require javascript & css coding. All plugins are loaded dinamically, according to html classes & atributes.

Smarty is now using the same major version as Bootstrap (Bootstrap 5 : Smarty 5).

Smarty 5 include jQuery because many plugins are still using it! You don' have to include it!

Folder Structure

  • distresult of the built process goes here
  • _gulpgulp micro-framework
  • src
    • jsSOW & Vendor Javascript files
    • scssSASS source files
    • _starterfiles used by "gulp :create"
  • html_frontendall Smarty html files (also used as official demo)
  • html_adminall Smarty html files (also used as official demo)
  • node_modulesNPM dependencies (generated by "npm install")
  • gulp.config.__plugins.js – enable/disable SOW plugins
  • gulp.config.__vendors.js – enable/disable/add Vendor plugins
  • gulp.config.settings – GULP settings - compile destination, etc
  • package-lock.json
  • package.json
    • LTRPrepared files to start your project in seconds!
    • RTLPrepared files to start your RTL (arabic) project in seconds!

* LTR = Left To Right (regular direction)
* RTL = Right To Left (arabic direction)

Starter template

                <!doctype html>
                <!-- <html lang="ar" dir="rtl"> -->
                <html lang="en" dir="ltr">

                    <title>Page title</title>
                    <meta name="description" content="...">

                    <meta charset="utf-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                    <!-- speed up external res -->
                    <link rel="dns-prefetch" href="">
                    <link rel="dns-prefetch" href="">
                    <link rel="preconnect" href="">
                    <link rel="preconnect" href="">
                    <!-- preloading icon font is helping to speed up a little bit -->
                    <link rel="preload" href="assets/fonts/flaticon/Flaticon.woff2" as="font" type="font/woff2" crossorigin>

                    <link rel="stylesheet" href="assets/css/core.min.css">
                    <link rel="stylesheet" href="assets/css/vendor_bundle.min.css">
                    <link href=";400;500;700&display=swap" rel="stylesheet">


                    <h1>Hello, world!</h1>

                    <!-- Core javascripts -->
                    <script src="assets/js/core.min.js"></script>
                    <script src="assets/js/vendor_bundle.min.js"></script>

                    <!-- Your custom javascripts -->


Note: if you don't add vendor_bundle.min.js, will be dynamically loaded by core.min.js!
If you need to create your own javascripts that access bootstrap js core, then you have to add it because bootstrap is packed inside of vendor_bundle.min.js!
jQuery is packed inside of core.min.js, which is always loaded.