编程知识 cdmana.com

How should front-end people think when they get the UI?

author :Ishadeed
translator : The front end little wisdom
source : ishadeed
Enjoy it , WeChat search 【 The big move the world 】 There is no big factory background to pay attention to this , But people with an upward positive attitude . this paper GitHub https://github.com/qq44924588... I have included , The article has been classified , I've also compiled a lot of my documents , And tutorial materials .**

Recently, we open source a Vue Components , It's not perfect , Welcome to improve it together , I hope you can give me a star support , Thank you .

github Address :https://github.com/qq44924588...

double 12 Ali server 27 block , Universal Click here You can cash it back to me when you buy it 30, be equal to 27 You can buy it , New users only , You can buy it with your family's mobile phone number !

I've always been private , Xiaozhi, this design drawing uses CSS How to arrange it , How to draw this button . So today , In this article, we will introduce some new layout methods , I hope it will be of some use to Zhimi .

Put the design details aside

The first thing I usually do is put the design details aside . I'd like to know the main parts of this design first , And then focus on the details of each part . Consider the following UI:

clipboard.png

on top UI in , Has the following characteristics :

  • Header/Navigation
  • Middle content part
  • Bottom How it works part

next , Let's first abstract these three main parts :

clipboard.png

After abstraction , We can see the main part , The main song can help us think about how to lay out the components , Without considering the details of each component .

I think so :

  • Full-width header: Head navigation bar
  • Centered Content: The middle content is horizontally centered , Be careful , This usually requires setting the maximum width max-width.
  • How it works: This is a 4 Column layout , The whole part is confined to a wrapper .

next , Code the three parts above :

<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>

Because we have a 4 Part of the column , Here I use 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);
}

Get UI when , We don't start right away , It's about looking at the composition of the whole , First realize the composition of each block , Then go deep into the realization of composition .

Article page

In this case , We have an article page layout . This is a UI, It contains :

  • Head
  • picture
  • Article title
  • Article content
  • Sidebar ( side )

Again, we abstracted it into the main parts :

clipboard.png

Abstract mainly includes several parts :

  • The head width of the website is 100%
  • title : Include article title and description , The content is left aligned , To set the maximum width
  • Two column layout , contain main and sidebar Elements .
  • Article content , Horizontally centered and with maximum width .

article - The page title

clipboard.png

There's no need for a layout here . A simple max-width That's all right. , Of course, we need to add padding, Add some comfort distance .

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

article - Main and Sidebar

clipboard.png

main The element is the entire width of the viewport minus the width of the sidebar . Usually , The sidebar should have a fixed width . So , Use CSS The grid is perfect .

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

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

For the internal content of the article , It should be limited to a wrapper .

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

After some overall layout , Let's look at the details .

Go into the details

How It Works part

In the first example of this article , Let's take a look How It Works part The details of the implementation .

clipboard.png

Column

  • Step one here , Two , 3、 ... and , Is there anything that might increase or decrease , If there is , What should we do with ?
  • Whether we need the same height of columns , Especially when a card has a very long text ?

title

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

Responsive design

When the page width shrinks , Do we need to be responsive ? If there is , What's the trigger condition ?

These are the problems we may encounter in our development , How did you like it? ? As a front-end developer , We should consider such a marginal situation , Not just by UI It's so simple to follow the cat and draw the tiger .

clipboard.png

Because this article focuses on the thinking process , So we can't give a detailed description of each possible situation .

In the first and third versions of the model above , The number of steps is 3 and 2. We can make CSS Dynamic to deal with ? Sure .

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>

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));
  }
}

I use the CSS grid minmax() and auto-fit keyword . This is useful when the number of cards can be increased or decreased .

 Picture description

The content part

clipboard.png

picture

  • How the picture should be presented ? Does it change every day or should it change from CMS to update ?
  • It's using HTML <img> still CSS background
  • What is the expected aspect ratio of the picture ?
  • Do we need to use multiple image sizes depending on the size of the viewport ?
  • Is it possible that parts of the picture will be replaced by video ?

Height

What is the minimum height of the content ?

The length of the content

Do we need to set the maximum length of the title and description ? If it is , What are the minimum and maximum values 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 , And the height is unknown .

Restricted content

To improve readability , It's better to limit the content . What is the ideal width ?

Responsive design

Do we need to change the font size according to the window width ? If it is , We should use based on px The unit of , viewport units , or CSS clamp() function ?

According to the nature of the project we're doing , We should find the answers to these questions , This will help us determine how components are built .

Sometimes , It's hard to answer every question , But the more you ask , The more likely you are to get good error free results .

In this part , I'm going to solve the gap between the sub elements . I like to use flow-space Utilities . I am from Andy Bell Of Piccalil What blogs have learned . The goal is to provide spacing between immediate siblings .

clipboard.png

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>

css

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

The last thought

As you can see before , The process of implementing a component is not only to make it relevant to UI perfect match , Also consider the fringe . I hope Zhimi can learn at least one thing from this article .

This is Xiaozhi , See you next time !


Possible after code deployment BUG There's no way to know in real time , In order to solve these problems afterwards BUG, It took a lot of time log debugging , This way, I'd like to recommend an easy-to-use one for you BUG Monitoring tools Fundebug.

original text :https://ishadeed.com/article/...

communication

Articles are updated every week , You can search by wechat 「 The big move the world 」 First time reading and urging ( One or two articles earlier than blog ), this paper GitHub https://github.com/qq449245884/xiaozhi Included , I organized a lot of my documents , welcome Star And perfection , You can refer to the interview site review , Pay attention to official account. , The background to reply welfare , You can see the benefits , You'll see .

版权声明
本文为[Front end intelligence]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224084735377n.html

Scroll to Top