Element-ui Technology Revealed (5) – Colors, fonts, borders, and ICONS

preface

The Element-UI component library is popular not only because it is rich in components and document-friendly, but also because it is beautifully designed. As mentioned earlier in the overall design of the component library, there is a strong design team behind Element-UI that has developed a set of design specifications for the component library.

Demand analysis

When designing a component library, the first thing to consider is the basic elements of color, font, border, icon design. They are the building blocks of each component. Without these basic elements, the resulting component library will look like a copycat.

These basic designs need to follow certain design specifications. Experienced designers will develop a set of specifications when designing, and we, as programmers, can also follow certain specifications at the code level when implementing this set of design specifications.

Design and Implementation

Then, we will introduce the design and implementation of these four basic elements from the point of view of code.

color

Element avoids visual differences by using a specific color palette to provide a consistent look and feel for what you’re building.

The main color

Element’s main brand color is bright, friendly blue.

As shown, Element-UI provides a set of blue colors. In addition to the main color #409EFF, you can see a series of blue gradients. How does this work in the code?

Element – the UI on the definition of color – chalk on the packages/theme/SRC/common/var. SCSS in:

$--color-primary: #409EFF ! default;Copy the code

$–color-primary = #409EFF; $–color-primary = #409EFF; $–color-primary = #409EFF; $–color-primary = #409EFF The reason for this is probably related to custom theme colors. If the user defines a new theme color, this variable can point to the new theme color.

For the gradient of theme blue, the implementation of element-UI is as follows:

$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) ! default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) ! default; /* 66b1ff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) ! default; /* 79bbff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) ! default; /* 8cc5ff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) ! default; /* a0cfff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) ! default; /* b3d8ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) ! default; /* c6e2ff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) ! default; /* d9ecff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) ! default; /* ecf5ff */Copy the code

There are nine variables defined here, all using the function Mix, which is a built-in function in SASS. It represents the mixture of two colors. The third parameter represents the proportion of the two colors. Mix ($–color-white, $–color-primary, 10%) indicates that $–color-white is 10% and $–color-primary is 90%.

In this way, Element-UI easily implements primary colors of different color depths.

Auxiliary color

A scene scene other than the primary color needs to be used in a different scene (e.g., a dangerous color indicates a dangerous operation).

The realization of these auxiliary colors is also much the same, we take successful colors as an example, the rest will not be repeated.

$--color-success: #67C23A ! default; $--color-success-light: mix($--color-white, $--color-success, 80%) ! default; $--color-success-lighter: mix($--color-white, $--color-success, 90%) ! default;Copy the code

Also by mixing white with mix, successful colors of different color depths are generated.

Neutral colors

Neutral colors are used for text, background, and border colors. Through the use of different neutral colors, to express the hierarchy.

In terms of text color, four variables are defined from dark to light:

/// color|1|Font Color|2 $--color-text-primary: #303133 ! default; /// color|1|Font Color|2 $--color-text-regular: #606266 ! default; /// color|1|Font Color|2 $--color-text-secondary: #909399 ! default; /// color|1|Font Color|2 $--color-text-placeholder: #C0C4CC ! default;Copy the code

In terms of border color, four variables are defined from dark to light:

/// color|1|Border Color|3 $--border-color-base: #DCDFE6 ! default; /// color|1|Border Color|3 $--border-color-light: #E4E7ED ! default; /// color|1|Border Color|3 $--border-color-lighter: #EBEEF5 ! default; /// color|1|Border Color|3 $--border-color-extra-light: #F2F6FC ! default;Copy the code

In terms of background color, three variables are defined:

/// color|1|Background Color|4 $--color-black: #000000 ! default; /// color|1|Background Color|4 $--color-white: #FFFFFF ! default; /// color|1|Background Color|4 $--background-color-base: #F5F7FA ! default;Copy the code

Note that the third variable here is different from the transparent color in the figure, because transparent backgrounds theoretically do not need to be configured with background, and are transparent by default. The third variable here also represents a base white that is used in multiple components.

The font

Element-ui standardizes fonts in a unified manner, striving to have the best display effect under various operating systems.

The font

The picture shows a variety of font styles, including PingFang SC, which is familiar to MAC users, and MicroSoft YaHei, which is familiar to Win users.

Defines global font styles in Packages /theme-chalk/ SRC /reset.scss:

body { font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei"," Microsoft YaHei", Arial, Sans-Serif; font-weight: 400; font-size: $--font-size-base; color: $--color-black; -webkit-font-smoothing: antialiased; }Copy the code

We know that font-family can specify a list of fonts separated by commas, and the browser will select the first font in the list that is installed on the computer.

The shop name

Element – the UI defines 6 kinds of the size of the font, the definition of them in the packages/theme – chalk/SRC/common/var. SCSS in:

/// fontSize|1|Font Size|0 $--font-size-extra-large: 20px ! default; /// fontSize|1|Font Size|0 $--font-size-large: 18px ! default; /// fontSize|1|Font Size|0 $--font-size-medium: 16px ! default; /// fontSize|1|Font Size|0 $--font-size-base: 14px ! default; /// fontSize|1|Font Size|0 $--font-size-small: 13px ! default; /// fontSize|1|Font Size|0 $--font-size-extra-small: 12px ! default;Copy the code

The minimum is 12px and the maximum is 20px. Font sizes smaller than 12px are generally not recommended in design, as small font sizes are not friendly to people with poor eyesight.

Line height

As shown in the figure, when we encounter multiple lines of text, setting different line-height will have different rendering effects, usually at least 1.5. This will help improve the experience in low-visibility conditions, as well as for people with cognitive impairments such as dyslexia.

Element – the UI in the packages/theme – chalk/SRC/common/var. SCSS defines only 2 kinds of line height:

/// fontLineHeight|1|Line Height|2 $--font-line-height-primary: 24px ! default; /// fontLineHeight|1|Line Height|2 $--font-line-height-secondary: 16px ! default;Copy the code

Element-ui is written directly to the line height in most component implementations, but it is often better to use unitless values rather than specific sizes, because once you change the font size, you don’t need to manually change the line height if you use unitless values. Another particular scenario is that if the text size varies with page scaling, using ununitless values ensures that the line height is scaled equally.

A border

Element-ui standardizes borders that can be used for buttons, cards, pop-ups, etc.

Borders and rounded corners

Element – the UI provides a series of border round style, the definition of the packages/theme – chalk/SRC/common/var. SCSS in:

/// color|1|Border Color|3 $--border-color-base: #DCDFE6 ! default; /// color|1|Border Color|3 $--border-color-light: #E4E7ED ! default; /// color|1|Border Color|3 $--border-color-lighter: #EBEEF5 ! default; /// color|1|Border Color|3 $--border-color-extra-light: #F2F6FC ! default; $--border-width-base: 1px ! default; $--border-style-base: solid ! default; $--border-color-hover: $--color-text-placeholder ! default; $--border-base: $--border-width-base $--border-style-base $--border-color-base ! default; /// borderRadius|1|Radius|0 $--border-radius-base: 4px ! default; /// borderRadius|1|Radius|0 $--border-radius-small: 2px ! default; /// borderRadius|1|Radius|0 $--border-radius-circle: 100% ! default; /// borderRadius|1|Radius|0 $--border-radius-zero: 0 ! default; sCopy the code

This includes variables such as border thickness, color, style, and rounded corner size, as well as hover colors, which are used in components.

projection

Element – the UI provides several commonly used way of projection, defined in the packages/theme – chalk/SRC/common/var. SCSS in:

/// boxShadow|1|Shadow|1 $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) ! default; // boxShadow|1|Shadow|1 $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) ! default; / / / boxShadow | 1 | Shadow | $1 - a box - Shadow - light: 0 2 px 12 px 0 rgba (0, 0, 0, 0.1). default;Copy the code

If students do not understand the box-shadow related attribute values, they can consult relevant materials on MDN to learn by themselves. You can also debug its property values online to see different renderings.

icon

Element-ui provides a set of commonly used ICONS.

Method of use

Use the class name el-icon-iconname. Such as:

Corresponding code:

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">search</el-button>
Copy the code

We simply set the class name to introduce these font ICONS (more on button implementation in the next article). How does this work?

implementation

The icon provided by element-UI is defined in packages/theme-chalk/ SRC /icon.scss using IconFont.

@font-face { font-family: 'element-icons'; src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */ url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, Firefox, opera, iOS 4.2+*/ font weight: normal; font-display: $--font-display; font-style: normal; } [class^="el-icon-"], [class*=" el-icon-"] { /* use ! important to prevent issues with browser extensions that change fonts */ font-family: 'element-icons' ! important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .el-icon-edit:before { content: "\e78c"; } / /...Copy the code

First, we define a custom font with @font-face, which comes from the font icon file defined in the Packages/Theme-chalk/SRC /fonts/ directory.

Secondly, the attribute selector is used to filter elements that start with el-icon- or have class names with el-icon-. Their corresponding font-family is the custom font Elemental-icons.

Then define different el-icon-XXX class names for different ICONS, and specify the corresponding content values through the before pseudo-class, so that users can reference the corresponding ICONS only by using the class name of El-icon-xxx.

Finally, I recommend two websites for creating font icon libraries, Iconfont and IComoon.

conclusion

The main implementation of element-UI for the design specification provided by the designer is to define a number of variables in a public SASS file that will be introduced in the styling of future components, programmatically writing CSS. The font, color, and border values are not written inside each component. This benefit is not only semantic, but also easy to maintain. Once the design of these basic elements changes, I can only modify the value of these variables, without modifying the component. In addition, the overall custom theme design of the component also provides great convenience.

By the end of this article, you can also try to define common style files and variables in your own projects and then introduce them into components. Of course, if your component library supports post-compilation, you can even import variables defined in the component library directly.

If you can’t learn something, you will make progress. If you think this kind of article is helpful, you are welcome to recommend it to your friends.

Next: Element-UI Technology Revealed (6) – Button Button components.

Welcome to pay attention to my public account “Lao Huang’s front-end private dishes”, “Element-UI Technology Reveal” series of articles will be updated and released in the public account for the first time, in addition, I will often share some front-end advanced knowledge, dry goods, and occasionally share some soft quality skills.