venumadhavnitturu / html-skinning-boilerplate Goto Github PK

##HTML Skinning Boilerplate

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

###Advantages:

• Obeys DRY concept (Don't repeat yourself) for both css and html.
• Manage all svgs as SVG sprite-sheet.
• No need to run any web server (optional).
• Later, you can use the same setup to create a single page application based on nunjucks template engine. (in that case, don't use 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?

• To write sass, you can refer sass documentation.
• I already implemented common layouting styles in _mini-bootstrap.scss file, with comments.
• To write in nunjucks template, you can refer nunjucks documentation.
• The whole setup runs on gulp, which I tried to explain in this link
• Using gulp-svgstore, I wrote a small code in gulpfile.js which will be helpful to create svg sprite-sheet. This svg spritesheet works only when run on any web server

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

###Installation:

Here are some easy installation steps:

• This Boilerplate needs nodejs (for templating and for sass). So, install it first.
• After installing nodejs, fork/download this repo in your local.
• cd to the project folder through CLI.
• npm install (add prefix sudo in mac, if necessary).

That's it!! everything is ready now.

###Usage

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.

###References:

Very nice articles to know about SVG Spritesheets

• Inline SVG vs Icon Fonts
• An Overview of SVG Sprite Creation Techniques
• Styling SVG Content with CSS

PS: Contributors are welcome :)

###FAQ:

#####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.