Pull to refresh
51.9

CSS *

Cascading Style Sheets

Show first
Rating limit
Level of difficulty

How to add any CSS framework to your project. Part 2

Level of difficultyEasy
Reading time4 min
Views875

Typically, I use the following structure for global styles in any project. This setup allows for a highly flexible, easy-to-read, and maintainable style system, which is crucial for large projects that may last several months or even years.

Let’s review each of these folders:

Common: contains typography styles, imported fonts, icons, and core styles used across the project, such as container.scss or helpers.scss.

Read more

How to add any CSS framework to your project. Part 1

Level of difficultyEasy
Reading time3 min
Views2.1K

There are several ways to integrate a CSS library into your project. By “CSS library,” I mean any modern CSS framework or UI library, such as Bootstrap, NG-Zorro, PrimeNG, etc. While all these methods work, many do not offer great flexibility or support deep customization of the chosen framework.

To build a robust foundation for your design system and ensure easy future customization, it’s best to use the source code styles (SASS or LESS files) instead of the minified version. This approach provides a more convenient workflow, reduces unnecessary code, and increases flexibility.

Read more

The new code as the side effect

Level of difficultyMedium
Reading time4 min
Views1.3K

The new code as the side effect

If we use the reducer function for form data handling It has an infinite list of returned values, which expands when the next development iteration updates the interface defining the form and implements a new field. So the reducer pattern is procedure code, not a functional

Read more

Creating a mini-game with drip effect and moving circles. Part 2. Final

Level of difficultyEasy
Reading time8 min
Views880

Hello, dear users of the IT world!

In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!

I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.

Read more

Creating a mini-game with a drip effect and moving circles. Part 1

Level of difficultyEasy
Reading time7 min
Views1.1K

Hello, dear users of the IT world!

In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!

I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.

Read more

HDR Displays and CSS: Enhancing Color and Brightness on the Web

Level of difficultyEasy
Reading time3 min
Views5.4K

High Dynamic Range (HDR) allows for a wider range of colours and brightness levels. This technology works on displays that support HDR format. Nowadays web advantage of display gamuts such as Display P3 and Rec. 2020, which can display a much larger color space than traditional sRGB displays. It is 50% more colours.

CSS is ready to fix it (at least for Apple users). Find colour gamuts comparison, code examples and device support overview below.

Unlock HDR with CSS - read more

What is the difference between px, em, rem, %? The answer is here

Reading time3 min
Views5.2K

Introduction


Beginners in web-development usually use px as the main size unit for HTML elements and text. But this is not entirely correct. There are other useful units for the font-size in CSS. Let's look at the most widely-used ones and find out when and where we can use them.


Read more →

Eliminating Render-Blocking JavaScript and CSS on WordPress

Reading time4 min
Views1.4K

Outstanding loading speed is an essential website feature for a high ranking in SERP (Search Engine Result Pages). PageSpeed Insights by Google is an excellent tool for precisely that — optimizing your website’s loading speed. Let’s say you’re using this tool and get the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning. No need to worry! In this tutorial, I will show you how to address the issue.

Read more →

3D Keyboard Key on CSS

Reading time3 min
Views1.9K

Introduction


People use their gadgets every day. And the main attribute of any gadget is a keyboard. But have you ever thought about creating a keyboard that would display on your screen?

In this article, we will create a 3D Keyboard Key with awesome animation after clicking on it. And yes, we will not use any programming language. Our key will be on the power of CSS! Let’s get started!

image

Implementation

Read more →

Authors' contribution