Introduction

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

root-template

dist – result of the built process goes here
_gulp – gulp micro-framework
src
- js – SOW & Vendor Javascript files
- scss – SASS source files
- _starter – files used by "gulp :create"
html_frontend – all Smarty html files (also used as official demo)
html_admin – all Smarty html files (also used as official demo)
~~node_modules~~ – NPM 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
README_FIRST.html
SEED_PROJECT
- LTR – Prepared files to start your project in seconds!
- RTL – Prepared 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">
                  <head>

                    <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="https://fonts.googleapis.com/">
                    <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
                    <link rel="preconnect" href="https://fonts.googleapis.com/">
                    <link rel="preconnect" href="https://fonts.gstatic.com/">
                    <!-- 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="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">

                  </head>
                  <body>

                    <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 -->

                  </body>
                </html>

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.