Introduction

54Kb gzipped! Yes, this is Smarty CSS + Bootstrap CSS!
Most Smarty elements/blocks are created using helper classes!

Most useful core plugins (SOW - which you can remove them) are written from scratch!
Are very lightweight, no more megabytes of javascripts you never use!
No more bloated scripts! And yet, you have everything under the hood.

How big is javascript?
All Smarty Core Plugins (SOW) + Full jQuery + Dependencies = 249Kb! Gzipped is under 68Kb!
Modern, lightweight, fast, scalable, high performance!

Smarty is modular! More than 90% of blocks/elements and layouts you'll see, are created using two things: components & utilities!
Limit is beyond the sky! Yes, including the admin side because it's using the exactly same core.

Any frontend element/component can also be used by admin because there is actually no separation between them.
As an example, this documentation is using the admin layout & ajax navigation!

The frontend can also use ajax navigation because links & URLs are SEO friendly.
The ajax plugin was written from scratch and is able to reinit plugins for ajax containers!
Full debug is also enabled in this demo, so you can check your browser console to see what/how it's firing.

Core CSS Size: 323Kb (including bootstrap & most used Vendors)
Core JS Size: 249Kb (including jQuery, SOW Plugins and dependencies)

Everything below is optional, only if you want to customize Smarty!
By default, all vendor plugins are enabled but loaded only when needed!

What is Gulp?

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

If the official explanation don't tell you much, Gulp is used to compile .scss files, to concatenate multiple js/css files (creating a single final file from many), to minify files and a lot more other things by adding almost any type of plugin (limit is the sky - there are over than 3000 plugins and growing).

As an overview, getting started is simple: install npm -> install gulp -> build.

1. Install NODE

You need to install Node first.

2. Install GULP

Node was the most important because now we have npm command to install gulp:

npm install --global gulp

3. Install Smarty Modules

At this point, your PC is ready for development. You can check the installation by typing: npm --version and gulp --version
Now we install the required modules used by Smarty to compile the final css/js files. A directory called npm_modules will be created.
In the same directory with package.json file, type in your console:

npm install

4. Compile Files

Now you can see all Smarty functions in GULP:

gulp :help

This default task will create the final css/js files in dist directory, ready for production (to use them in your project):
If you compile the project for RTL, don't forget to edit src/scss/_variables.scss and change $global-rtl-enable: true !default;

gulp

You can enable/disable the plugins you want by editing 2 gulp config files: gulp.config__core.js and gulp.config__vendors.js.
Set for each one you want to disable: enable: false

Wasn't that much, isn't it? Each time you change something in js/scss files, you need to repeat the last step.
BUT! You can also use the watch function and will autobuild when you make changes and save.

gulp watch

New Project

Useful to start a new fresh project. Will create a folder containing the files you need to start.
A builtin webserver is also available! After creating the new project folder, your can start a webserver.

gulp create --new my_project

gulp watch --dest my_project

*watch = an watcher is active for "my_project". When changes are detected to src/js/* & src/scss/*, files are rebuilt.

Builtin Webserver

You can start a local webserver. But please keep in mind that this is a minial webserver.
No PHP server integrated, so contact forms will not work! Its purpose is for preview and development only (html/css/js)!
You can just move your project folder to your real local webserver, as you usually do!

gulp webserver --root my_project

(watch + webserver + browser autoreload)

Smarty Structure

	├── dist/
	│   └── result of the built process goes here
	│
	├── _gulp/
	│   └── gulp micro-framework
	│
	├── node_modules/
	│   └── build process required modules
	│
	├── src/
	│   ├── js/
	│   │   ├── sow.config.js
	│   │   ├── sow.core/
	│   │   └── vendors/
	│   ├── scss/
	│   │   └── sass core files
	│   ├── html/
	│   │   └── Coming Soon - replace in HTML
	│   └── _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)
	│
	└── gulpfile.babel.js
	│
	├── 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
	│
	└── README_FIRST.html