Developing a new project starting from the expert starter
It is a blank directory to make a copy of and start a new project with. It includes the required JS and CSS files from TheSaaS as well as icon fonts, PHP files and some images.
Sections in this article:
Install dependencies
- Download and install Node.js if it's not installed on your machine
- Install the Gulp command line tools, gulp-cli, with
npm install gulp-cli -g - Navigate to the root directory of your project and run
npm installto install dependencies - Run
gulp serve.
With the above command, a static web server starts in your browser which points to /src directory. It watch your files to reload the browser upon change to the HTML files, or JS and CSS files. Also, it watch your SCSS and JS files to compile them to page.min.css and page.min.js upon each change.
Write code
Time for development. Now you're ready to create your HTML files and writing your custom CSS and JS codes.
- HTML
Since most of the websites 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 website. Check available layout features such as navbar, header, cover, footer, etc. as well as all the blocks and UI Kit.
- SCSS
Write your additional styles inside /assets/scss/_style.scss. Feel free to create more scss files and even subdirectories inside /scss folder to split your code to smaller chunks and import them inside /scss/page.scss file. Our Gulp task is watching all of the scss files inside /scss directory and recompile the page.min.css upon each change.
- JavaScript
Your additional JavaScript codes should be write inside /assets/js/src/script.js. Again, if you need to split your code to several JS files, simply create them inside /js/src directory and require them inside the /js/src/page.js. Our Gulp task is watching all of the JS files inside /js/src directory and recompile page.min.js after each change using Webpack.
Distribute
Done with development? Run gulp dist to deploy your code inside /dist directory. This task simply remove unnecessary files (scss files, scss folder, unminified css and js files, etc.) in the /dist folder. Now you can use the /dist folder in your server side coding or upload to your web server.