Quick start 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.html file 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.css which 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.css once you save your modified files. For large projects, it would be better to divide your project into several .scss files and use style.scss to import those file. Place those .scss files 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.js which 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.js which is a starting point. Again, each modification to .js files located inside /script folder and subfolders, will generate an updated script.js and 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 build to place your production code inside a dist directory. This task simply remove unnecessary files (scss files, scss folder, unminified css and js files, etc.) in dist folder. Now you can use the dist folder in your server side coding.