HTML Skinning Boilerplate

This is a starter kit for HTML Developers, useful to develop HTMLs faster. This uses sass, gulp and gulp-nunjucks-render.


How it is useful?

Suppose, you got a requirement where you just need to develop six HTML pages from the provided images by Designers. There are many common sections which you are copy pasting for each page of HTML files (let say it is Header). Later, the client/designer proposed some changes in header part. In that case, you need to change the header part in a page and need to copy paste again in all the six pages.

And if the changes are frequent in all common sections and there are more pages, it is quite common we miss to change the modified section in a page or two. This boilerplate handles this kind of situations and many more.

You can also write css faster using sass and create svg sprite-sheet.

How it works?

Note: you can also write css in .scss files if you aren't aware of sass and same applies to nunjucks templating.


Here are some easy installation steps:

That's it!! everything is ready now.


To watch for template and sass changes, cd to project directory and then gulp watch.

Note: if you are doing the above step frequently, you can create a batch extension file. I have given examples for Windows and Mac OS which you can find in win-build and mac-build folders respectively.


Very nice articles to know about SVG Spritesheets

PS: Contributors are welcome :)


1) I am getting following error while trying to install node dependencies in command prompt.

Couldn't install optional dependency: Unsupported

For this Boilerplate, the following fix will work. Check this link.