Within the download you'll find the following file structure and contents

Once downloaded, unzip the compressed folder and you'll see something like this:

Smile/
├── templates/
│   ├── client/
│   │     ├── dist/
│   │     └── src/
│   │          ├── assets/
│   │          ├── node_modules/
│   │          ├── views/
│   │          ├── .bowerrc
│   │          ├── 404.html
│   │          ├── bower.json
│   │          ├── gulpfile.js
│   │          ├── index.html
│   │          └── package.json
│   ├── admin/
│   ├── installer/
│   └── email_tempaltes/
│   
├── app/
├── psd/
└── docs/

Introduction of the important files:

".bowerrc"
file is hidden, and is used for config Twitter Bower
"bower.json"
is the JSON file of Twitter Bower (You can click the link to know more).
"package.json"
is the JSON file of Gulp (You can click the link to know more). This file is used by npm to store metadata for projects published as npm modules. You will list gulp and the Gulp plugins your project needs as devDependencies in this file.

Bower is a front-end package manager for the web by Twitter.

Smile use Bower to manage all the front-end dependencies and to make things clean, tidy and simple.

If you haven't try Bower before, then give it a shot, it will make your life easier, you'll fall in love with it.

Inside the bower.json file of Bower, you'll see the list dependencies (package name and version).

If you want to know more about the packages, you can click here to search packages and find more.

Gulp is a JavaScript task runner (Automation), save yourself from repetitive tasks.

"gulpfile.js"
is the configure file of Gulp (You can click the link to find more). It is used to configure or define tasks and load Gulp plugins.
"package.json"
is the JSON file of Gulp (You can click the link to find more). This file is used by npm to store metadata for projects published as npm modules. It will list gulp and the Gulp plugins your project needs as devDependencies in this file.

Inside package.json file, you'll see all the Gulp plugins that help to automate the tasks.

And all the plugins are configured in gulpfile.js file.

If you want to know more about the plugins, you can click here.

 "devDependencies": {
    "bower": "^1.4.1",
    "browser-sync": "^2.7.13",
    "del": "^1.2.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-minify-html": "^1.0.3",
    "gulp-ruby-sass": "^1.0.5",
    "gulp-uglify": "^1.2.0"
  }

Just open the index.html in a browser.

Due to the fact that the templates are already compiled, all you have to do is to navigate to the dist directory and open the index.html file (or any other .html file) in a browser and that's it.

In order to do development with it, you'll need to have Node.js (NPM comes along with it), Gulp, Ruby and Sass installed.

And you'll need to know how to use them, click the links to learn more if you're not familiar with these yet.

If you already know how to use them, here's what you have to do in order to start developing:

  1. Enter "src" folder with your command line.
  2. Install NPM packages with NPM.

    npm install
  3. Install Bower packages with Bower.

    bower install
  4. Then type gulp and you are ready to go. (browser-sync will setup a localhost server and it will automatically open in your default browser the website. Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices.)

All the files for development are under Smile/Templates/client/ folder.

Structures of the folders inside client folder.

client/
  ├── dist/
  └── src/
       ├── assets/
       │     ├── fonts/
       │     ├── img/
       │     ├── js/
       │     ├── sass/
       │     └── vendors/
       │
       ├── node_modules/
       ├── views/
       ├── .bowerrc
       ├── 404.html
       ├── bower.json
       ├── gulpfile.js
       ├── index.html
       └── package.json
            

Introduction of important folders and files:

dist
here will be the compiled code, this is the folder you want on your server.
src
here is the actual code, this is where you will make changes
fonts
contains the fonts used.
images
is where all the images is.
js
contains all the custom scripts.
sass
contains all the custom stylesheets (sass).
vendors
contains all the libraries and frameworks used (installed using bower).
views
contains all the template files (HTML).
index.html
The main HTML file.