News and information about front-end web development tips, tools, modern trends and website engineering. Productivity advice for highly motivated digital professionals.
MotionPath is one of the new animation features in GSAP 3. This plugin allows you to turn any path from SVG into the motion path of your animated element. Beginning of work: Connecting gsap Connecting MotionPathPlugin. It needs to be connected separately, since it is not part of the gsap kernel. Next we create the […]
Let’s consider creating an animation of elements when scrolling a page using a specific task as an example. What do we have The section where two blocks are placed (fig. 1). On the left there is a title and a block with icons (1), on the right there are blocks with text (2). Hereafter, the […]
Main definitions Theme WordPress theme – it’s a common design of the site that includes colour, graphics, and text. The theme – this is what is sometimes called ‘skin’ or ‘template’, but it’s neither one nor the other. ‘Skin’ and ‘template’ is a decoration of the site. WordPress theme is a place where the code meets […]
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, […]
Hi, developer! When developing large projects, it is often necessary to create a library of blocks. This allows you to make your project more modular and controllable. Such library can be created using sc5 styleguide. In this lesson, we use sass as a style preprocessor and gulp for automation. SC5 also works great with other […]
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”) […]
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. […]
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 […]
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 […]
