Quickstart Start your project as soon as possible, without overwhelming in details.

Step 1

Make a copy of starter/directory to your desire workspace.

Step 2

1. Download and install Node
2. Install the Grunt command line tools, grunt-cli, with npm install -g grunt-cli.
3. Navigate to the root directory of your project and run npm install.
4. Run grunt serve.

Step 3

While at this stage you are ready to develop your pages using our extensive documentation, but we want to make sure that you understand the directory structure of TheAdmin.

- HTML

Since most of we applications have a global layout for whole of the application, you might want to start modifying index.htmlfile and create a global layout for your app. Check available layout features like sidebar, topbar, header, footer, etc.

- CSS

Write your additional styles inside assets/css/style.css. Upon each modification, the grunt task that you executed in the step 2, will generate style.min.csswhich is used in html files.

If you prefer writing SCSS, write it inside assets/css/style.scss. Our grunt tasks will automatically generate style.min.cssonce you save your modified files. For large projects, it would be better to divide your project into several .scssfiles and use style.scssto import those file. Place those .scssfiles inside assets/css/scss/directory and don't worry about creating subdirectories.

- JavaScript

Write your custom Javascripts inside assets/js/script.js. Upon each modification, the grunt task that you executed in the step 2, will generate script.min.jswhich is used in html files.

If you are going to write a lot of javascript, it would be better to organize your code and writing inside several files. For this purpose, open assets/js/script/main.jswhich is a starting point. Again, each modification to .jsfiles located inside /scriptfolder and subfolders, will generate an updated script.jsand script.min.js.

Step 4

At this stage, you are ready to develop your pages. When you were done with creating web pages, run grunt buildto place your production code inside a distdirectory. This task simply remove unnecessary files (scss files, scss folder, unminified css and js files, etc.) in distfolder. Now you can use the distfolder in your server side coding.