Static Template

This repo serves as a starter template for static web pages.Instead creating your own front-end architecture, use this for quick and easy development.

📌 Prerequisites
🚀 Installing Static Template
💻 Usage of Static Template
📎 Additional Info
- Errors
💕 Acknowledgements and References
📫 Credits
🤝Contribute

📌 Prerequisites

Before you begin, ensure you have met the following requirements:

If you're using Windows 10 please use this NVM.

Tool	Version	Description
NVM	latest	Node version manager for fast switching node version
Node	14.15.0	Install Node via NVM

⚠️ If you have Node in your local machine please delete and reinstall it using the NVM.

🚀 Installing Static Template

To install Static template in your local machine, run this following script in your terminal:

Windows:

 git clone https://github.com/hipe-japan-inc/static_template.git

⚠️ Optional : If you have Node in your local machine please delete and reinstall it using the NVM.

💻 How to run scss

go to src/ in terminal (recommended : bash).
run npm install. If npm is missing please refer to the Prerequisites.
verify if gulp is working. gulp --tasks
after the dependencies installed, run gulp build or gulp rebuild then gulp sync

Note: gulp --tasks will display all posible gulp options. If dealing with .php instead of .html use gulp watch

Code Block:

cd src
npm install
gulp build # Or gulp rebuild
gulp sync #if html else use gulp watch

When you run this scripts it will generate a bundled file to public/ folder.

⚠️ You must only edit in src/ folder to avoid confusion.

📎 Additional Info

Additional information about Static template

src/ is the main source code
public/ is the dist folder of compressed file from src/.
- release/mini/**/*.css [ minified version of css ]
- release/tiny/**/*.(png,jpg,etc.) [ minified version of images ]
- release/ugly/**/*.js this refers a compressed javascript

For maintaining the integrity of the images please put it under src/image/raw/**, This will generate a directory public/release/tiny/raw/**
For generating the iconfont put the icon_name to src/icons and run gulp rebuild
For generating vendor you can put it inside src/vendor and run gulp vendor to copy it in release folder. Expected result : public/vendor/gulp/**
For release to production try running gulp purge to clean the release css and remove unused css.

⚠️ Errors

If you encounter this problem bash gulp command not found, Try running the command below to the terminal.

#Installing the gulp in global scope.
npm install --global gulp-cli

💕 Acknowledgements and References

This is made by James Ocariza.

📫 Credits

James Ocariza - Creator of Static template
EJ Anton S. Potot - Improving the document

🤝 Contribute

Contributions, issues and feature requests are welcome!

Issue Tracker: https://github.com/HiPE-Inc-ltd/static_template/issues
Source Code: https://github.com/HiPE-Inc-ltd/static_template

hipe-japan-inc/static_template