Ivaylo Gerchev is a self-taught web developer/designer. He loves to play with HTML, CSS, jQuery, PHP, and WordPress, as well as Photoshop and Illustrator. Ivaylo's motto is "Minimum effort for maximum effect!"
The library wraps all the great functionality of the SVG technology, allowing us to create all kind of resolution-independent vector graphics – both static and interactive – in an easier and straightforward manner.
It is firmly orientated towards modern browsers so, in contrast to Raphael, it supports advanced features like masking, clipping, patterns, full gradients, groups, and more.
In this tutorial, we’re going to create an infographic from scratch by using much of the functionality that Snap provides.
The topic that I’ve chosen is about the three layers that make up every web page (HTML, CSS, and JS). It will be mainly static infographic, but will include an animated and interactive component too. You can see the final result in the following screenshot:
Nowadays using icon fonts is quite popular and useful. All major front-end frameworks (such as Bootstrap, Foundation, Semantic UI, UIkit, and Pure) use some sort of icon font. And this is not without reason. Using an icon font brings several important benefits.
- All icons are loaded in a single file, reducing the number of server requests.
- All icons can be styled easily with CSS, thus no need to use an image editor.
- All icons look crisp and sharp on all kinds of displays and resolutions.
In this tutorial, I’ll show you how to create your own custom icon font and then how to use it to build a small CSS icon library. Basically, it will be similar to icon components from other popular front-end frameworks, but with some significant advantages that you’ll see in the next section.
Why Do I Need to Create a Custom Icon Library?
So, why you would want to create your own icon library instead of using already built solutions such as FontAwesome? The simple answer is: You hold full control from the very beginning and implement only the features that meet your specific requirements and needs. Therefore, nothing superfluous!
Now let’s get more detailed about the advantages. You may need a custom icon library because:
- It can include only the icons you want and need.
- It can combine icons from different icon sets (IcoMoon App has plenty of them).
- It can be easily customized (you can add/remove icons as you wish).
- It’s completely portable and self-contained.
- The CSS and font files will be much smaller in size.
As you can see there are many reasons to create your own icon library. So, let’s do it.
Create a Custom Font with IcoMoon App
We’ll call our project Pixie. So the first thing we need to do is create a new project folder and name it Pixie.
Now it’s time to create our custom icon font which, thankfully, for a tool like IcoMoon App, is just a piece of cake. The only thing we need to do is select the icons we want and download the font that’s built.
Let’s say that we plan to create an HTML editor for which we’ll need icons about text editing, and so on. If we use a regular icon font with these icons we’ll also get a whole bunch of icons we don’t need. Fortunately, in our custom font we’ll put only the icons necessary for our project.
Go ahead and open IcoMoon App. From the IcoMoon icon set select the following 22 icons, highlighted in the two images below:
When these are selected, click the “Font” button, and then click the “Download” button. After the
icomoon.zipfile is downloaded, navigate to it and double-click to open it. What we need to get from here is the fonts folder. So grab it and extract it into the project folder.
Now we’re ready to move on to the next step.
In the real world, when we buy a phone, or a microwave or a washing machine, it comes with a quick start guide, a user guide, some technical documentation, and other similar stuff.
Without these documents, we’ll have to learn how to use the product leveraging solely on the ‘trial and error’ method – which is not a pleasant user experience at all.
The same is true for the products and tools made from web developers.
In the last few years we have witnessed huge explosion in the web development world.
There are a vast variety of great projects out there. A deluge of plugins, libraries, frameworks, tools, and services have been created by smart people showing great insight and skill.
But there is one problem: many â€“ perhaps most â€“ lack of good documentation. No matter how great is a particular product might be, if it has poor documentation, we’re unlikely to use it fully and properly.
The goal of this article is to address the importance of having a good documentation both for the web developers, and for the users.
I mainly target programming products such as code libraries, plugins, and so forth, but all said below can be easily adapted to any kind of product or service. The principles are the same.
Let’s see them.
The Three Steps to the Great Success
In the web development world there are three steps leading to great success.
- Creating great product. First and foremost, you need to have something useful and valuable to propose to the people out there. It can be a product or a service, but in either case it must be of great quality.
One of the most important instruments in a painter’s toolkit is their canvas. It gives them the freedom to express all kinds of feelings, impressions, ideas, and so forth, in almost unlimited variations and combinations. And that freedom can be restricted only by two things — their skill level and their imagination.
The situation in the web development world is similar. With the ongoing progress of HTML5 and its powerful specifications, web developers have gained the ability to do things that were impossible in the past. Drawing graphics and creating animations directly in the browser is now completely possible thanks to a technology called HTML5 Canvas.
As most of us are probably aware, Bootstrap and Foundation are the current leaders among front-end development frameworks. But history has shown us that eventually something better will come along and in this case that might not be so far away. This article will introduce you to a new candidate on the framework landscape called […]
Beginning a new project is always associated with some repetitive work. And this is because most of our projects, at their starting point, share one and the same minimal code base, best practices and principles. We all know that “reinventing the wheel” every single time is not only superfluous, but also a quite boring job. […]
Often using UI widget library for our projects is a better choice instead of collecting random jQuery plugins from all over the Web. In fact, most jQuery widgets don’t integrate well with each other. They can lack features, contain bugs and require a lot of time to properly fit into a real project. On the […]
After months of hard work and joint effort, the brand new version of Bootstrap, a framework of choice for many web designers/developers, has finally come out. It comes with lots of exciting changes and new features, and has been completely rewritten and redesigned to satisfy the latest web trends and user needs. With more than […]
Preprocessors are great for managing your CSS. Now how do we manage all the preprocessors? Ivaylo Gerchev profiles Prepros, a tool built to do just that.
Ivaylo Gerchev has compiled a list of 10 frameworks that will help you build responsive websites. The first part focused the Bootstrap family, but there are more to consider.