Using Icon SVG(Scalable Vector Graphics) for icons
I remember the time when we used to have 100s of icons and we put all as a image, then we move to use icon sprite which reduced the image pull request to server and improved speed, but now a day as a revolution we start using icons as a SVG files its like a revolution in using icons. Ohh its such a revolution.
Benefit of using SVG file
- Small file size and it compress well.
- We can use it in any size and it will no loss its quality at all.
- Its look great on ratina screens as well.
- We can control its look and fill with different CSS filters.
Now a days if we try to search for any icons there are various site availabe which provide us free SVG(Scalable Vector Graphics) icons same as other format is images like JPEG(Joint Photographic Experts Group), PNG(Portable Network Graphics), GIF(Graphic Interchange Format).
Some Site from where we can download free SVG icons
For the same porpose we can use Fontawsome, Typicons, useiconic etc.
Or u can create ur own SVG icons using Adobe Illustrator easily. Then using some online tools we can convert then into font file and then we can use them in out projects, this is the best solution as in this we can just add the selected icons which we are using in our web so no extra icon wil be there.
Some tools which help use converting our SVG file into fonts
- fontastic.me this is the first tool I used for this purpose 🙂
So now we need not to create all time icons in different sizes, such a big relax, also we get rid of that dirty code due to all time image.
As a Front end developer we need solid base which gives us almost everything a typical website would require but also flexible enough for customization, We should thanks to all developers who worked hard and spend there time in create lots of Frameworks which make our work smooth and easy.
Now a days in market we have dozens of CSS frameworks here is my views in support of bootstrap
Bootstrap has responsive CSS adjusts to phones, tablets, and desktops. It have Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework. It have large number of Browser compatibility: Bootstrap is compatible with all modern browsers like Chrome, Firefox, Internet Explorer 8+, Safari, and Opera)
There are many reason to Adopt for bootstrap
Easy to get started
Bootstrap is on responsive 12-col grid system, whether we need fixed layout or fluid layout, it will be just a small change we just choose class accordingly.
Grid class examples:
Extra small devices (Phones (<768px))
Small devices (Tablets (≥768px))
Medium devices (Desktops (≥992px))
Large devices (Desktops (≥1200px))
Base styling for most HTML elements
It covers almost all elemens can be use like
- Progress Bar
- Forms Elements
- Labels & Badges
- And lots more
Bundles of pre define JS for
- Navigation Bars
All of above we can always can modifiy all above as per out requirements
The industry’s finest CSS pre-processor, sitting on top of the enormously helpful Compass library, makes for a more modular, pragmatic approach to presentation.
The biggest reason to choose bootstrap is it has great documentation with examples and demos which make the this transparent to us and we feel ease to get into it.
Link to get started: http://getbootstrap.com/
Hello Friends I am back with some some latest posts after a very very long time.
I hope my future posts will help you.
To Get the above result in a form please go thought the following code…
border: 1px solid #781351;
border: 1px solid #781351;
padding: 2px 6px
<p><label for=”name”>Name</label> <input type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail</label> <input type=”text” id=”e-mail” /><br /></p>
<p class=”submit”><input type=”submit” value=”Submit” /></p>
If we have a bunch of nested DIVs. How is this better than the nested tables they replaced? Now the answer lies in the way the tag was intended to be used. DIVs imply a logical and structural grouping. Even when they are nested they remain structural markup. In our example we grouped images with their captions (first level), and then grouped these image/caption pairs with similar image/caption pairs (second level). These are both examples of structural grouping that is handled much better by the DIV tag.
Whenever, tables imply a relationship between column and/or row headers, and the data in the table cells. When we use them for layout, we lose the structural semantics of a table. And we are back to using HTML for layout. Nesting tables only compounds the problem and as well now a days its not ideal to use table for layout its not good for search engin results too.
creating Navigation with CSS
<li><a href=”index.html”><div id=”home”>Home</div></a></li>
<li><a href=”news.html”><div id=”news”>News</div></a></li>
<li><a href=”#”><div id=”how”>How it works</div></a></li>
<li><a href=”#”><div id=”affiliated”>Affiliated membership</div></a></li>
<li><a href=”#”><div id=”location”>our location</div></a></li>
<li><a href=”#”><div id=”about”>about us</div></a></li>
<li><a href=”#”><div id=”stuff”>hot stuff</div></a></li>
<li><a href=”#”><div id=”contact”>contact us</div></a></li>
<p id=”vjContent”>CSS3 I am loving it. </p>