Frontend Blog


How we use SVG sprites

How to use svg sprites fronetnd blog
in Front-end | November 27, 2019

Hi, developer! When making a layout from PSD, icons are often inserted in SVG format, and if not, we ask them from the designer. Earlier we used icon fonts, but recently saw the advantages of sprites and decided to try to play with them to place them into the development process. We like icon fonts, […]

Organizing form elements with pug

Organizing form elements with Pug
in Front-end | November 12, 2019

Hi, developer! In order to layout faster and to support the project in an easier way, we have made a pug mixin for form elements. It looks like a big sausage code: However, in reality it is a very simple mixin to use. With it, we can do the following types of form elements: input(type=”text”) […]

Web fonts: Connect and use

Web Fonts CSS How to use
in Front-end | November 6, 2019

Hi, developer! Previously, in order to connect an off-site font to the site, the @ font-face directive was used with a link to the font in several formats (eot, svg, ttf, woff, etc.). In 2015, it became possible to use font caching in localstorage, and there was also no need to use many different formats. […]

Splitting styles with sass

Splitting styles SASS
in Front-end | September 23, 2019

Hi, developer! Sometimes during layout, it is necessary to split style files into several ones according to some principle. In this article, we will split the styles into the main file and the file for IE9. Folder structure (are displayed only those folders that we need for this article): Since sass does not compile files […]

Icon Fonts

Icon fonts
in Front-end | May 16, 2019

Hi, developer! In this article I will tell you how to create and use an icon font with gulp. We use gulp-iconfont and gulp-iconfont-css. Install plugins and prescribe dependencies gulpfile.js The fontName parameter is required; this is the name of our font. Write the task gulpfile.js And now more detailed: Let’s take all the icons (the path […]

Shopify. Work with sections

Shopify Frontend: work with sections
in Front-end | April 22, 2019

First of all we need to understand what “sections” were embedded for, what exactly they give to the theme developers and to the owners of the stores. The functional of the sections was inculcated by the developers of Shopify at the end of 2016 and it gives an opportunity to create the user interface that […]

Automatic layout testing

Automatic layout testing in Frontend
in Front-end | February 13, 2019

Hi, developer! A frequent problem of a layout designer is that he corrects styles in one place, but they change in several places. And, as a rule, the layout designer notices it too late. In this post, I will talk about regression testing. The main point of the method is that you take screenshots of […]

Block positioning

Block positioning
in Front-end | January 28, 2019

In this short article, we will explain how best to position such blocks. These images should be separate blocks as the video will play in each of them when you hover. 1. Wrong method There is a div.hero_picture which hangs as an absolute and stretches to the full width and height of the section. After […]

Web animation for modern projects

Web animation for modern projects
in Front-end | November 29, 2018

Our team specializes in the development of the complex web animation for sites in the USA and Europe, and we have been embodying the most daring design solutions for our customers for several years. Our accumulated experience allows our developers to make rich, presentable and unique sites, introducing different effects and animation to any elements […]