What should the front end think when they get the UI?

Ishadeed Is written by Ishadeed

Click “like” and then see, wechat search ** [Big Move the world] pay attention to this person without dACHang background, but with an upward positive attitude. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Recently open source a Vue component, is not perfect, welcome everyone to improve it, also hope you can give a star support, thank you.

Making address:Github.com/qq449245884…

Often someone private letter to me, small wisdom this design map with CSS layout ah, how to draw this button. So today, in this article we will introduce some new layout methods, hoping to be of some use to the smart rice people.

Put aside the design details

The first thing I usually do is put design details aside. I want to know the main parts of this design first, and then pay attention to the details of each part. Consider the following UI:

In the UI above, there are the following features:

• Header/Navigation
• Intermediate content section
• How it Works section at the bottom

Next, let’s abstract out the three main parts:

After abstraction, we can see the main parts, and the master song can help us think about how to lay out the components without thinking about the details of each component.

Here’s what I think:

• Full-width header: Navigation bar in the header
• Centered Content: Middle content is horizontally centered. Note that this usually requires a maximum widthmax-width.
• How it worksThis is a 4-column layout, with the entire section contained in a wrapper.

Next, write the above three parts in code:

<header></header> <section class="hero"> <! -- A div to constraint the content --> <div class="hero__content"></div> </section> <div class="wrapper"> <! -- 4-columns layout --> <section class="grid-4"></section> </div>Copy the code

Since we have a 4-column section, here I use the CSS grid:

.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1140px;
}

.hero__content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
Copy the code

When we get the UI, we don’t start right away, we look at the composition of the whole, implement the composition of each piece first, and then dive into the implementation of the composition.

The article page

In this case, we have an article page layout. Here is the UI, which contains:

• The head
• The picture
• The article title
• The article content
• Sidebar (side)

Again, we abstract it down to the main parts:

There are several main parts to abstraction:

• The width of the site’s header is 100%

• Title: Contains the title and description of the article, with the content aligned to the left and the maximum width to be set

• A two-column layout with main and sidebar elements.

• Article content, horizontally centered and with maximum width.

Article – page title

No layout method is required. A simple max-width is fine, but some padding is needed to increase the comfort distance.

.page-header {
  max-width: 50rem;
  padding: 2rem 1rem;
}
Copy the code

Articles – Main and Sidebar

The main element is the entire width of the viewport minus the width of the sidebar. In general, the sidebar should have a fixed width. For this, using a CSS grid is perfect.

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  grid-template-columns: 1fr 250px;
}
Copy the code

For the internal content of the article, you should confine it to a wrapper.

.inner-content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
Copy the code

After some overall layout, let’s look at the details.

Further details

How It Works section

In the first example of this article, let’s look at the detailed implementation of the How It Works section.

column

• Step one, step two, step three, is there any possibility that it will increase or decrease, and if so, how should we deal with it?

• Do we need column heights to be equal, especially if a card has a long text?

The title

Do we need to leave that part of the title aside? Or should full width be used in some cases?

Responsive design

Do we need to be responsive when the page width shrinks? If so, what are the trigger conditions?

These are some of the problems we might encounter in development, what do you think? As a front-end developer, we should be thinking about these edge cases, not just following the UI.

Because this article focuses on the thought process, it is not possible to describe in detail each of the possible scenarios.

In the first and third versions of the model above, the number of steps is 3 and 2, respectively. Can we make CSS dynamic to handle this? You can.

HTML

<div class="wrapper">
  <section class="steps">
    <div>
      <h2>How it works</h2>
      <p>Easy and simple steps</p>
    </div>
    <div class="layout">
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
    </div>
  </section>
</div>
Copy the code

CSS

.steps { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; } @media (min-width: 700px) { .steps { grid-template-columns: 250px 1fr; } } .layout { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; } @media (min-width: 200px) { .layout { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }}Copy the code

I used CSS Grid Minmax () and auto-fit keywords. This is useful in cases where the number of cards can be increased or decreased.

The content part

The picture

• How should the image be presented? Does it change daily or should it be updated from the CMS?

• Do I use HTML or CSS background?

• What is the expected aspect ratio of the picture?

• Do we need to use multiple image sizes depending on the viewport size?

• Is it possible that the pictures will be replaced with videos?

highly

What is the minimum height of the content?

The length of the content

Do we need to set the maximum length for headings and descriptions? If so, what are the minimum and maximum values that the design expects to handle?

The spacing between elements

How to deal with vertical spacing?

Content center

How to center content horizontally and vertically? We only know the width, we don’t know the height.

Limit content

In order to improve readability, it is best to limit the content. What is the ideal width?

Responsive design

Do we need to change font size according to window width? If so, should we use px based units, viewport units, or CSS Clamp () functions?

Depending on the nature of the project we are working on, we should find answers to these questions, which will help us determine how the components should be built.

Sometimes it’s hard to answer every question, but the more you ask, the more likely you are to get a good error-free result.

In this section, I address the spacing between child elements. I like to use the flow-space utility. I learned it from Andy Bell’s Piccalil blog. The goal is to provide spacing between directly sibling elements.

html

<section class="hero"> <! -- A div to constraint the content --> <div class="hero__content flow"> <h2>Food is amazing</h2> <p>Learn how to cook amazing meals with easy and simple to follow steps</p> <a href="/learn">Learn now</a> </div> </section>Copy the code

css

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}
Copy the code

Final thoughts

As you saw earlier, the process of implementing a component is not only to make it a perfect match to the UI, but also to consider edge cases. Hope Jimmy learned at least one thing from this article.

I’m Wisdom, and I’ll see you next time!

---

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: ishadeed.com/article/thi…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.