Why not SVG !!!

What is new thing in web industry? Your answer is lot of things, I know. But do we ever think all over web industry we use vector graphics as a image. We make them vector, give lot of afford then we converte those as a image file. Why ? We don't resize it because if we do it loose quality. Or if we need html5 canvas animation image file could not help me rather than svg path. We use font icon as icon but if we need it as a background then .... could we do that! So it is time to know SVG.

SVG(Scalable Vector Graphics), is a XML-style markup driven vector graphic rendering engine for the browser. SVG is supported in every browser, except IE < v9 and Android < v3.

Resolution Independence

Every developer loose their passion when application run in different different viewport. Because at present we business not only content, I mean text also have lot of images in there. So application run in different viewport there is a change images loose quality. If you replace images as svg file it will solve.

Set as background

Few years ago we all are use font as icon image. Ya sometime it is very useful. But font, we can not use them as background image and sometime it is very painful. We converted those as image file then set them as background. But I question yourself it is really essential ! You can easily svg as background.

Super-Accessible DOM Node-Based API

So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG. SVG actually uses an XML-compatible format to define its rendering shapes. Beyond this, you can actually style shapes in CSS, and make them interactive with JavaScript. Multiple JS libraries exist to assist you in this world, like D3.js and Raphael. Here's an example of an SVG element group (the Envato leaf). You can also You can also see this example on JSFiddle.

If you are animation lover this link is for you.

Tell me, Why Aren’t You Using SVG?

How can I structure a Sass project

Hello everybody... I already told that I want to write few things about SASS because SASS surprise me a lot. I want to share my regular experience just. Hopefully it will be helpfully for beginner of SASS.

I am working a large application and when it built we did not think that we never use SASS or something. But after two year pass our team leader think that we need to mange our css more effective way. How can we do it? My answer was lets jump into SASS. So it the beginning of mine about SASS.

Sometime if CSS file being large, usually we break-down whole CSS file into each different files. Then we import it into main CSS file. But problem is in main CSS file, ok called it 'style.css' when we import our css file into it... each import we sent a request into server. and all developer want to reduce server hit. But SASS give me a solution also I can break-down my scss file.

Let me tell you, how we can separate our large css file into different SCSS file and what is the folder structure...

Make separate SCSS file by their nature. Note: Before the file name add [ _ ] sign. Something like _button.scss or _input.scss. This underscore sign [ _ ] told sass converter that it is supporting file, you don't need to covert is as css. After that you need to just import in your main SCSS file. just like @import '_fileName' oh you don't to need write file extension also.

A useful tip:

Now a day when we developed a larger application sometime we depended some third party scripts. and those third party script has css files. So we can separate those and make new SCSS file then we import it in our main style.scss file. It is good practice.



Here is a example how we can break them.

I always think that SASS is not very problematic but before SASS is hard. So I make two article for that.

Happy SASS