Many people feel that atomic style reduction is difficult to accurately design, but if you master the right layout ideas, it can be elegant, fast and accurate.

Let’s say we want to restore this little card, which is very simple

Step 1: Determine the overall element layout

<div> <span> Commodity name </span> < SPAN > XXXXXXXXXXXXXXXXX </span> </div> <div> <span> Commodity code </span> < SPAN > XXXXX </span> < SPAN >< span><van-icon name="arrow" :color=" textcolor. fraternal "/></span> <div> <div> < SPAN > amount/tax </ SPAN >< SPAN > XXXC/XXXX </ SPAN > </div> </div>Copy the code

The effect is as follows:

Step 2: Adjust the outer div to control the overall style

Observe the outer divs. Background, rounded corners, margin and padding need to be set. Relevant styles are BG-Gray-100 Rounded M-20 MT-0 P-30 PR-20, respectively

<div class=" BG-Gray-100 rounded M-20 MT-0 P-30 PR-20 "> <div> <span> Merchandise name </span> <span> XXXXXXX </span> </div> <div> < SPAN > COMMODITY code </ SPAN >< SPAN > XXXXX </ SPAN >< SPAN >< span><van-icon name="arrow" :color=" textcolor. fraternal "/></ SPAN ></ div> <div> / tax < span > amount < / span > < span > XXXC/XXXX < / span > < / div > < / div >Copy the code

Here the margin-top is set to 0, which is also a layout rule: use margin-bottom for the same level spacing, since margin-top risks merging with the parent element.

The overall layout is complete

The third step: adjust the interior to complete the local layout

Looking at the design,

  • So if you look at the lines, you have margin-bottom,
  • And then between the elements in the row
    • The left field name is fixed width,
    • The intermediate field values appear to occupy the remaining space, but have the effect of ellipsis, so they must be fixed width, otherwise you can use Flex: 1,
    • The middle arrow, of course, is capped to the right by the field value element
    • Arrows are not the same size as the text, so you need to be careful about centering
  • Finally, look at each inline element:

    • The text size is 28px, which is our default, and no additional Settings are required

    • The color of the text on the left is muted

    • The middle text color is BASIC, which is also the default value and does not need to be set

    • The color of the arrow needs to be set, it is a third-party component, find the corresponding API, and inject the global style

<div class="bg-gray-100 rounded m-20 mt-0 p-30 pr-20"> <div class="flex items-center mb-20"> <span class="field Text-muted MR-30 "> commodity name </ SPAN > < SPAN class="value ellipsis"> XXXXXXX </span> </div> <div class=" flex-items-center MB-20 "> < SPAN class="field text-intensive MR-30 "> COMMODITIES code </ SPAN >< SPAN class="value ellipsis"> XXXXX </ SPAN >< SPAN ><van-icon name="arrow" :color="textColor.muted"/></span> </div> <div class="flex items-center"> <span class="field text-muted <span > <span class="value ellipsis"> XXXC/XXXX </span> </div> </div>Copy the code

css:

.field {
  width: 126px;
}
.value {
  width: 390px;
}
Copy the code

Since the widths of field and value are not within our standard widths, you can only set additional styles.

A global style configuration of inject: [‘textColor’], a third party component;

Now the effect is as follows, and the overall effect is already there

Step 4: Fine tuning error caused by row height

The vertical height of the design is 1, which is 28px (750 design), and the default line height of 14px text is 19px, which is a 5px difference, so it needs to be tweaked

- <div class="bg-gray-100 rounded m-20 mt-0 p-30 pr-20">
+ <div class="bg-gray-100 rounded m-20 mt-0 py-24 pl-30 pr-20"><div class=" flex-items-center MB-20 "> < SPAN class="field text-INTENSIVE MR-30 "> Merchandise name </ SPAN > < SPAN class="value Ellipsis "> XXXXXXX </span> </div> <div class=" flex-items-center MB-20 "> < SPAN class="field text-INTENSIVE MR-30 "> <span class="value ellipsis">xxxxx</span> <span><van-icon name="arrow" :color="textColor.muted"/></span> </div> <div Class ="flex kitems-center "> < SPAN class="field text-intensive MR-30 "> </ SPAN > < SPAN class="value ellipsis">xxxc/xxxx</span> </div> </div>Copy the code

The effect is as follows

Finally check the implementation effect

The height of the design draft card is 204px(twice), and what we have achieved is 101px. The error caused by the line height is less than 1%, which is completely acceptable.

conclusion

The advantage of using atomic style is that the layout can be blind written against the design draft, and most of the styles can be filled in at one time. With experience and various shortcuts, you can even complete all the styles of a small piece at one time, and the whole process is smooth and smooth. And the traditional layout in practice will often write a part to see a part, the speed of nature is not so fast.

Attached: layout principle

  • From the whole to the part: that is, the skeleton is drawn first, then the details are drawn, and the division and relationship between the elements is determined
  • Top to bottom: that is, the spacing up and down is controlled by the previous element (e.g. Mt instead of MB)
  • Left-to-right: that is, the left-to-right spacing is controlled by the left element (that is, using ML instead of LR)
  • Margin is used to control the level spacing, and padding is used to control the internal spacing

This principle is simple and obvious, and I thought everyone did it this way, until I reviewed several teams and projects, and found that all kinds of weird layout problems and layout changes were caused by violating this principle. Well, everyone’s code is pretty wild