May 7, 2015 at 17:29Responsive design + Icon fonts = Adaptive icons
- Tutorial
Hello, Habr!
Today we’ll talk about responsive icons and a couple of life hacks with font icons.
Recently, the trend of "responsive design" is gaining momentum. The idea embodied in this methodology is being modified, supplemented and overgrown with new functions in real time. I am not a fan of trends and fashion as such; I have not developed mutual love with them. But in the professional sphere, everything is different: here the trends rule the ball, and throwing them out just doesn’t work.
Responsive and responsive designs continue to capture virtual space and our screens. The presence of a separate mobile version of the site, most likely, will wither away even for such adherents as Facebook and Twitter - more and more patterns and solutions for updating various functions and display through media queries and scripts are appearing.
Born in early 2013, towards the end of its trend captured the minds of web developers. What determines the popularity of flat design?
These are the main positive properties of flat design, causing its growing popularity.
A very recent trend in the world of web design. The idea is simple: create a set of SVG images, and then collect them with a special service that outputs a set of several CSS files for different purposes, the actual font in the EOT, SVG, WOFF, and even TTF formats that can be installed on the system and use, for example, in a graphics editor. Unfortunately, font icons lack some of the charms of SVG, for example, coloring individual elements of a single icon, but in most cases you can make these sacrifices or bypass them with some tricks.
I turn to the main topic of the article - about a pattern that incorporates all of the above trends and the idea of Joe Harrison Responsive Icons , the essence of which is very simple. When the window size is changed, the details of the icon change as well, to always match the capabilities of the screen and not to create pixelated noise at low resolution.
Let's get started. Suppose we have such a design in three sizes:
As you can see, in each version all the icons are different. Let's try to solve this problem without sprites.
Following the methodology of Progressive enhancement, for a start we will create a simple markup for our file (we will leave the logo for later, we will first deal with the lower icons):
Next, let's take a look at the styles. Following the practice of Mobile first, first create a style for the minimum size:
We don’t have any icons yet, therefore we make SVG from design icons for mobile, we name them according to our classes: announces, partners and news. Note that the entire icon in SVG must be a single compound path. We go to the service (I use fontello.com ), create a font there and call it, say, ittalk-font-small:
On the second tab (Customize Names), you can change the default names that will be used in the generated css. Since we named files by classes, we have nothing to do there. On the third tab, you can change the Unicode of each character in the font, thus binding it, for example, to certain letters. But we do not plan to use the font in the operating system, incl. We also skip this page. We click on the “Download webfont (3)” button and save the finished archive to the computer. In the archive we are interested in the “font” folder and the file “ittalk-font-small.css” from the “css” folder. Copy them to the “fonts” subfolder of our project and add the line at the very beginning of the file to the “style-320.css”:
In the file “ittalk-font-small.css” we change all the paths in @ font-face from '../ font / ...' to 'small /'.
So, our links have icons. Not bad. Add some code to the CSS:
Hurrah! We still have one icon. We do the same with medium and large sizes:
Style-720.css:
Style-big.css:
Demo of the intermediate version . Watch in Chrome or Firefox.
Pros :
Cons :
Now we will deal with the logo, at the same time with the problem of the one-color icon. As you can see, it consists of four elements that gradually disappear with a change in the level of detail:
Prepare four SVGs (make sure that the source files have the same height and width), in which each element stands in its place relative to the overall composition, and make up the font . To do this, go to fontello, add SVG and change the binding to the letters "L", "o", "g" and the point, for example, on the third tab.
Name the font “ittalk-logo” and download the finished file. Upload the fonts to the “logo” subfolder and copy @ font-face from the file “ittalk-logo.css” (remember to change the paths).
Add a few lines to all styles.
Style-480.css:
Style-720.css:
Style-big.css
NB : You may have to select the font size values, and padding-top, height and margin-left for it.
The logo is one-color, so no elements are visible. The easiest way to solve this is by slightly messing up the semantics of the html file, adding a few "extra" tags to it.
It looks awful, but I remind you: we just analyze an interesting solution here in the fastest way =).
Next, add the rules to all styles:
Style-big.css
Style-720.css
Style-480.css
Voila! We have responsive icons without the use of SVG and high-resolution bitmap images. Icons that change the detail depending on the width of the screen.
You can watch the demo here . You can change the width of the window and watch the result, or open it on a mobile phone and rotate the screen. Looking at the desktop is better in Chrome or Firefox.
In conclusion, I would like to recall that all the code, all the illustrations are presented here, only to show the possibilities of working with Adaptive icons. Of course, the icons are bad, and the structure of the project leaves much to be desired, it would be possible to make the conditions repeating in each file of styles, it would be possible to refactor the code, create more styles for black-and-white screens and much more. But the purpose of the article is not this, but in presenting a new look at trends, their combination and creating a cool solution that can be useful in some places.
I hope you were interested, and you learned for yourself at least a little new that will be useful in website development. Good luck
Author: Artem Markushev
Today we’ll talk about responsive icons and a couple of life hacks with font icons.
Background. About trends
Recently, the trend of "responsive design" is gaining momentum. The idea embodied in this methodology is being modified, supplemented and overgrown with new functions in real time. I am not a fan of trends and fashion as such; I have not developed mutual love with them. But in the professional sphere, everything is different: here the trends rule the ball, and throwing them out just doesn’t work.
The first trend. Continued expansion of Responsive design.
Responsive and responsive designs continue to capture virtual space and our screens. The presence of a separate mobile version of the site, most likely, will wither away even for such adherents as Facebook and Twitter - more and more patterns and solutions for updating various functions and display through media queries and scripts are appearing.
The second trend. Flat design.
Born in early 2013, towards the end of its trend captured the minds of web developers. What determines the popularity of flat design?
- Simplicity of perception . Minimalism (correct, of course) has always been distinguished by the ease of texture and the freedom that design, content and structure breathe.
- Space and ease of development . The flat design is simple as a square and, in most cases, you do not need to have a three-gigabyte storage with graphic references.
- Lightness . Especially valuable property in the era of mobile Internet. Flat design can operate with images with a minimum of colors, or even do without them. And with the support and popularization of SVG that appeared in browsers, there is the possibility of using vector graphics.
These are the main positive properties of flat design, causing its growing popularity.
The third trend. Icon Fonts.
A very recent trend in the world of web design. The idea is simple: create a set of SVG images, and then collect them with a special service that outputs a set of several CSS files for different purposes, the actual font in the EOT, SVG, WOFF, and even TTF formats that can be installed on the system and use, for example, in a graphics editor. Unfortunately, font icons lack some of the charms of SVG, for example, coloring individual elements of a single icon, but in most cases you can make these sacrifices or bypass them with some tricks.
Adaptive icons
I turn to the main topic of the article - about a pattern that incorporates all of the above trends and the idea of Joe Harrison Responsive Icons , the essence of which is very simple. When the window size is changed, the details of the icon change as well, to always match the capabilities of the screen and not to create pixelated noise at low resolution.
Let's get started. Suppose we have such a design in three sizes:
As you can see, in each version all the icons are different. Let's try to solve this problem without sprites.
The first approach to creating responsive icons
Following the methodology of Progressive enhancement, for a start we will create a simple markup for our file (we will leave the logo for later, we will first deal with the lower icons):
Logo Next, let's take a look at the styles. Following the practice of Mobile first, first create a style for the minimum size:
body {
background-color: #f0f0f0;
text-align: center;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
color: #919191;
margin-bottom: 20px;
width: 100%;
}
We don’t have any icons yet, therefore we make SVG from design icons for mobile, we name them according to our classes: announces, partners and news. Note that the entire icon in SVG must be a single compound path. We go to the service (I use fontello.com ), create a font there and call it, say, ittalk-font-small:
On the second tab (Customize Names), you can change the default names that will be used in the generated css. Since we named files by classes, we have nothing to do there. On the third tab, you can change the Unicode of each character in the font, thus binding it, for example, to certain letters. But we do not plan to use the font in the operating system, incl. We also skip this page. We click on the “Download webfont (3)” button and save the finished archive to the computer. In the archive we are interested in the “font” folder and the file “ittalk-font-small.css” from the “css” folder. Copy them to the “fonts” subfolder of our project and add the line at the very beginning of the file to the “style-320.css”:
@import "fonts/ittalk-font-small.css";
body {
...
In the file “ittalk-font-small.css” we change all the paths in @ font-face from '../ font / ...' to 'small /'.
So, our links have icons. Not bad. Add some code to the CSS:
@import "fonts/ittalk-font-small.css";
body {
background-color: #f0f0f0;
text-align: center;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
color: #919191;
margin-bottom: 20px;
width: 100%;
height: 80px; /* Немного магии, смысл которой в том */
line-height: 80px; /* чтобы убрать текст из ссылки */
overflow: hidden; /* и оставить одну иконку. */
}
.icon:before {
width: 100%;
font-size: 50px;
}
Hurrah! We still have one icon. We do the same with medium and large sizes:
...
Style-720.css:
@import "fonts/ittalk-font-medium.css";
body {
background-color: #f0f0f0;
text-align: center;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
color: #919191;
width: 32%;
height: 130px;
line-height: 130px;
overflow: hidden;
}
.icon:before {
width: 100%;
font-size: 72px;
}
Style-big.css:
@import "fonts/ittalk-font-big.css";
body {
background-color: #f0f0f0;
text-align: center;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
color: #919191;
width: 30%;
height: 210px;
line-height: 210px;
overflow: hidden;
}
.icon:before {
width: 100%;
font-size: 128px;
}
Demo of the intermediate version . Watch in Chrome or Firefox.
Pros :
- Vectoring.
- Little code.
- Easy to use and upgrade.
- Flexibility.
- Lack of JavaScript.
Cons :
- Maximum one color per icon.
- Additional files to download (fonts).
- Problems supporting older browsers.
A second approach to creating responsive icons
Now we will deal with the logo, at the same time with the problem of the one-color icon. As you can see, it consists of four elements that gradually disappear with a change in the level of detail:
Prepare four SVGs (make sure that the source files have the same height and width), in which each element stands in its place relative to the overall composition, and make up the font . To do this, go to fontello, add SVG and change the binding to the letters "L", "o", "g" and the point, for example, on the third tab.
Name the font “ittalk-logo” and download the finished file. Upload the fonts to the “logo” subfolder and copy @ font-face from the file “ittalk-logo.css” (remember to change the paths).
Add a few lines to all styles.
Style-480.css:
@import "fonts/ittalk-font-small.css";
@font-face {
font-family: 'ittalk-logo';
src: url('fonts/logo/ittalk-logo.eot?39703710');
src: url('fonts/logo/ittalk-logo.eot?39703710#iefix') format('embedded-opentype'),
url('fonts/logo/ittalk-logo.woff?39703710') format('woff'),
url('fonts/logo/ittalk-logo.ttf?39703710') format('truetype'),
url('fonts/logo/ittalk-logo.svg?39703710#ittalk-logo') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #f0f0f0;
text-align: center;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
color: #919191;
margin-bottom: 20px;
width: 100%;
height: 80px; /* Немного магии, смысл которой в том */
line-height: 80px; /* чтобы убрать текст из ссылки */
overflow: hidden; /* и оставить одну иконку. */
}
.icon:before {
width: 100%;
font-size: 50px;
}
.icon-logo {
font-family: 'ittalk-logo';
display: inline-block;
word-wrap: break-word;
width: 1px;
line-height: 0px;
font-size: 180px;
padding-top: 100px;
height: 60px;
margin-left: -0.7em;
}
Style-720.css:
@import "fonts/ittalk-font-medium.css";
@font-face {
font-family: 'ittalk-logo';
src: url('fonts/logo/ittalk-logo.eot?39703710');
src: url('fonts/logo/ittalk-logo.eot?39703710#iefix') format('embedded-opentype'),
url('fonts/logo/ittalk-logo.woff?39703710') format('woff'),
url('fonts/logo/ittalk-logo.ttf?39703710') format('truetype'),
url('fonts/logo/ittalk-logo.svg?39703710#ittalk-logo') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #f0f0f0;
text-align: center;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
color: #919191;
width: 32%;
height: 130px;
line-height: 130px;
overflow: hidden;
}
.icon:before {
width: 100%;
font-size: 72px;
}
.icon-logo {
font-family: 'ittalk-logo';
display: inline-block;
word-wrap: break-word;
width: 1px;
line-height: 0px;
font-size: 320px;
padding-top: 200px;
height: 60px;
margin-left: -0.75em;
}
Style-big.css
@import "fonts/ittalk-font-big.css";
@font-face {
font-family: 'ittalk-logo';
src: url('fonts/logo/ittalk-logo.eot?39703710');
src: url('fonts/logo/ittalk-logo.eot?39703710#iefix') format('embedded-opentype'),
url('fonts/logo/ittalk-logo.woff?39703710') format('woff'),
url('fonts/logo/ittalk-logo.ttf?39703710') format('truetype'),
url('fonts/logo/ittalk-logo.svg?39703710#ittalk-logo') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #f0f0f0;
text-align: center;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
color: #919191;
width: 30%;
height: 210px;
line-height: 210px;
overflow: hidden;
}
.icon:before {
width: 100%;
font-size: 128px;
}
.icon-logo {
font-family: 'ittalk-logo';
display: inline-block;
word-wrap: break-word;
width: 1px;
line-height: 0px;
font-size: 640px;
padding-top: 300px;
height: 120px;
margin-left: -0.75em;
}
NB : You may have to select the font size values, and padding-top, height and margin-left for it.
The logo is one-color, so no elements are visible. The easiest way to solve this is by slightly messing up the semantics of the html file, adding a few "extra" tags to it.
Log. It looks awful, but I remind you: we just analyze an interesting solution here in the fastest way =).
Next, add the rules to all styles:
Style-big.css
.icon-logo {
color: #1c82c4;
}
.icon-logo b {
color: #acd03c;
font-weight: normal;
}
.icon-logo i {
color: #fff;
font-style: normal;
}
.icon-logo s {
color: #fff;
text-decoration: none;
}
Style-720.css
.icon-logo {
color: #1c82c4;
}
.icon-logo b {
color: #acd03c;
font-weight: normal;
}
.icon-logo i {
color: #fff;
font-style: normal;
}
.icon-logo s {
display: none;
}
Style-480.css
.icon-logo {
color: #1c82c4;
}
.icon-logo b {
color: #acd03c;
font-weight: normal;
}
.icon-logo i {
display: none;
}
.icon-logo s {
display: none;
}
Voila! We have responsive icons without the use of SVG and high-resolution bitmap images. Icons that change the detail depending on the width of the screen.
You can watch the demo here . You can change the width of the window and watch the result, or open it on a mobile phone and rotate the screen. Looking at the desktop is better in Chrome or Firefox.
Conclusion
In conclusion, I would like to recall that all the code, all the illustrations are presented here, only to show the possibilities of working with Adaptive icons. Of course, the icons are bad, and the structure of the project leaves much to be desired, it would be possible to make the conditions repeating in each file of styles, it would be possible to refactor the code, create more styles for black-and-white screens and much more. But the purpose of the article is not this, but in presenting a new look at trends, their combination and creating a cool solution that can be useful in some places.
I hope you were interested, and you learned for yourself at least a little new that will be useful in website development. Good luck
Author: Artem Markushev