Does web design need education?
The profession of web designer is now becoming one of the most sought after. Every month, thousands of new people with burning eyes appear who think that this is their…

Continue reading →

Button State Design
From the author: button design is the main element of any design system. The best of the buttons are simple, versatile, perhaps even a little fun. But there are many…

Continue reading →

Productive Parallax
Do you like parallax or hate it, but it will not go anywhere. When used wisely, it can add depth and sophistication to a web application. The problem is that…

Continue reading →

Advanced CSS: Using Sass Maps for UI Components

Sass is a great and very popular CSS preprocessor. If you are not familiar with it, take a look at these lessons.

Associative arrays (Maps) are an extremely underrated feature of Sass. They help automate the creation of user interface elements and improve the architecture of the entire application. Associative arrays will come in handy when you need a set of modifier classes for user interface elements.

A modifier is a class that modifies the style of a block depending on the context. A block is a universal parent class that can be used on its own.

BEM (Block Element Modifier)

I have summarized several code snippets and patterns that I often use. Although, of course, you must be able to apply this technique to other elements of the interface.

Sass Associative Array Syntax
Sass (Scss)
$ map: (
key-1: value-1,
key-2: value-2,
key-3: value-3
);
You can get the value by the key like this:

Sass (Scss)
map-get ($ map, key)
Customization
You probably have a Sass file in which you declare all the variables (something like _variables.scss or _base.scss). If not, you must create it. Here we will describe our map.

After several attempts and errors, I realized that the best way to configure associative arrays is to first declare the variables and then create a Map with these variables. This method allows you to use simple variables in the code (for example, $ color-robin) instead of getting the value using map-get (for example, map-get ($ ui-colors, primary)).

Sass (Scss)
// UI Colors
$ color-robin: # 8FCCCC;
$ color-vista: # 79D1AD;
$ color-mandy: # e67478;
$ color-apricot: # ed8864;
$ color-eastside: # 9279c3;

// UI Colors Map
$ ui-colors: (
default: $ color-robin,
success: $ color-vista,
error: $ color-mandy,
warning: $ color-apricot,
info: $ color-eastside
);
I usually declare 4 maps:

Theme colors (corporate identity colors)
Colors of interface elements (colors for errors, tooltips, buttons)
Grayscale (colors for text, shadows, backgrounds)
Corporate colors (used, for example, for social network icons)
The same template will be used for typography. You can first declare individual variables for fonts, and then put them in an array.

What variables should be used in an associative array? The variables that you will use in mixins to create modifier classes. Except for the obvious – color selection – associative arrays can be used for typography, icons or images. In the following example, I will show how to create different classes for buttons using the UI Colors color map.

Buttons
I use the each directive, which loops through the $ ui-colors array and creates a modifier class for the .button base class. We get modifiers to style buttons like ‘error’ or ‘success’.

Sass (Scss)
.button {
// common styles for all buttons
// …
// generates modifier classes
& – # {$ theme} {
background-color: $ color;
color: transparentize ($ white, .2);
}
& – # {$ theme}: hover,
& – # {$ theme}: focus {
background-color: shade ($ color, 20%);
color: $ white;
}
}
// Usage:
// .button .button – default
// .button .button – success
// .button .button – error
// .button .button – warning
// .button .button – info
This approach eliminates the need for code duplication. And also, if you want to change some color in the color scheme or add new colors – all interface elements will be updated automatically.

A similar pattern can be used for flags, links, and other elements that use modifiers.

Social Networking Icons
I used the same template as in the previous example, but this time I added social network icons. The code below creates a social-media-icon block class and modifiers for various icons.

Sass (Scss)
// Colors
$ color-facebook: # 3B5998;
$ color-twitter: # 55ACEE;
$ color-pinterest: # CC2127;
$ color-youtube: # E52D27;

$ social-media-icons: (
facebook: $ icon-facebook,
twitter: $ icon-twitter,
pinterest: $ icon-pinterest,
youtube: $ icon-youtube
)

// Icons
$ icon-facebook: url (‘assets / facebook.png’);
$ icon-twitter: url (‘assets / twitter.png’);
$ icon-pinterest: url (‘assets / pinterest.png’);
$ icon-youtube: url (‘assets / youtube.png’);

$ social-media-colors: (
facebook: $ color-facebook,
twitter: $ color-twitter,
pinterest: $ color-pinterest,
youtube: $ color-youtube
)
.social-media-icon {
border-radius: 50%;
padding: .5rem;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
@each $ theme, $ color in $ social-media-colors {
& – # {$ theme} {
background-color: $ color;
}
}
@each $ theme, $ icon in $ social-media-icons {
& – # {$ theme} {
background-attachment: $ icon;
}
}
}
// Usage:
// .social-media-icon .social-media-icon – facebook
// .social-media-icon .social-media-icon – twitter

How to create a selling portfolio of web designer?
You can become a web design master in many different ways. For example, there are people who achieve significant results in this activity through a simple internship in the studio.…

...

Web design basics. Analysis of the main blocks on the site
A true web design master 2.0 should be able to surprise people with innovative thinking and a creative approach to solving tasks. However, this does not mean that you need…

...

What is a selling design?
Design is the most important component of any website. This is especially true for selling sites, because in this case it is necessary to interest the visitor and encourage him…

...

Landing design: how to make a capture page
What is a landing page? The concept of landing page, as, in principle, the landing design, came to us relatively recently, according to the official version from the USA, 10-12…

...