Pense como um desenvolvedor front-end

Hello Habr! Iniciamos um novo fluxo do curso de desenvolvedor de front-end e estou compartilhando com vocês uma pequena lista de verificação para o front-end sobre como pensar ao criar um layout, quais perguntas se fazer. Sinta-se à vontade para marcá-lo se quiser dizer ao seu Padawan Jun de que lado abordar o design do layout, mas não quer perder seu tempo explicando coisas relativamente simples.

---

Eu perguntei no Twitter sobre o que mais devo escrever em CSS? Uma das sugestões que me chamaram a atenção é pensar na hora de implementar um layout CSS. Envolve pensar em possíveis soluções e muitas questões para acertar o design. Aqui, vou mostrar minha abordagem para pensar sobre um novo layout e como você pode aplicar as mesmas etapas ao seu trabalho. Você está pronto? Vamos mergulhar.

Detalhes ao lado

A primeira coisa que geralmente faço é deixar os detalhes do projeto para depois. Isso significa que eu destaco as partes principais de um layout específico e começo a pensar sobre elas primeiro. Eu sei que os detalhes são importantes, mas isso é temporário para que possamos nos concentrar nos detalhes de alto nível primeiro. Considere a seguinte interface do usuário:







Nesta construção, temos o seguinte:

• Título / Navegação.
  
  
• Seção principal.
  
  
• Como funciona.
  
  

Pode ser tentador começar a pensar nos pequenos detalhes primeiro, não em um alto nível de abstração. Se eu fosse solicitado a simplificar visualmente a abordagem, eu diria que um desenvolvedor front-end deve usar óculos que só permitem que elementos de layout de alto nível sejam vistos, como este:







Observe que com óculos você só pode ver componentes de IU de alto nível importantes. Essa abordagem o ajudará a pensar sobre como organizar os componentes, em vez de pensar nas pequenas partes de cada componente. É assim que eu penso:

• Cabeçalho de largura total: parece que o cabeçalho se estende por toda a largura da janela de visualização e seu conteúdo dentro do wrapper é ilimitado.
  
  
• O conteúdo do elemento herói é centralizado horizontalmente e observe que ele precisa ser definido como largura máxima (o parágrafo tem duas linhas).
  
  
• Como funciona: Este é um layout de 4 colunas, a seção como um todo é quebrada.
  
  

Agora, quando quero trabalhar no código, faço um protótipo rápido apenas para ver o progresso rapidamente.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Como temos uma seção de 4 colunas, usarei uma grade CSS para isso. Este é o aplicativo perfeito para ela.

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Este foi um exemplo de raciocínio rápido com óculos. Até agora, nem havia pensado em design responsivo. Tenho algumas dúvidas sobre os detalhes de alguns dos componentes, mas não irei me aprofundar nelas agora. Leia sobre isso na seção "mergulhar nos detalhes" no final do artigo. Agora que você entendeu, darei mais alguns exemplos de pensamento de alto nível para que você possa entendê-lo melhor.

Página do artigo

Neste exemplo, temos um layout de página de artigo. Esta é a interface do usuário que contém:

• Título.
  
  
• Título da página.
  
  
• Visualização da imagem do artigo.
  
  
• O conteúdo do artigo.
  
  
• Painel lateral (direito).
  
  

Agora que você tem uma ideia de como é o design, vamos colocar os óculos para que possamos ver apenas os elementos de alto nível.







Aqui estão eles:

• Cabeçalho do site que abrange toda a largura da página.
  
  
• Título da página contendo o título do artigo e sua descrição, o conteúdo é alinhado à esquerda usando largura máxima.
  
  
• Um layout de duas colunas contendo os elementos principal e lateral .
  
  
• O conteúdo interno de um artigo centralizado horizontalmente e com largura máxima .
  
  

Título da página do artigo

Não há necessidade de aplicar nenhum método de layout aqui. Uma largura máxima simples fará o trabalho. Certifique-se de adicionar preenchimento horizontal para evitar que as bordas do elemento grudem nas bordas em janelas de exibição pequenas.

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Artigo - base e barra lateral

O elemento principal (principal) do artigo ocupa toda a largura da janela de visualização menos a largura da barra lateral. Normalmente, a barra lateral deve ter uma largura fixa. Uma grade CSS é ideal para isso.

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

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

O conteúdo interno do artigo deve ser limitado ao invólucro.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Agora que você tem uma ideia das decisões de alto nível a serem tomadas ao criar seu layout, a próxima etapa é pensar sobre como trabalhar com cada seção em termos de design.

Mergulhando nos detalhes

Como funciona

No primeiro artigo de exemplo, eu disse que entraremos em detalhes mais tarde. Este momento chegou.

Altifalantes

• Temos casos em que o número de etapas pode ser menor ou maior? Em caso afirmativo, como trabalhar em tal situação?
  
  
• As colunas precisam ter a mesma altura, especialmente quando o cartão tem um texto muito longo?
  
  

Título

• Precisamos manter a seção de cabeçalho de lado? Ou há momentos em que deve ocupar toda a largura?

Design adaptativo

• Em que situação você precisa dobrar para redimensionar os filhos de uma seção? Temos algum tipo de gatilho para dobrar? Se sim, qual é esse gatilho?

Aqui estão algumas situações possíveis com esta seção. O que você acha? Como desenvolvedor front-end, você deve considerar esses casos extremos. Não se trata apenas de criar uma interface de usuário sem levar em conta esses detalhes ocultos.







Não vou entrar em detalhes sobre como deve ser o código de cada variação, já que este artigo se concentra no processo de pensamento , mas estou ansioso para mostrar a você algo assim. Observe que na primeira e na terceira versões do layout anterior, temos três etapas, não duas. Podemos tornar o CSS dinâmico para que ele lide com a situação para nós? Quero dizer, aumentar o número de etapas de dois para três.

<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>v
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Usei uma grade CSS com uma minmax()



palavra-chave auto-fit



. Isso é útil quando o número de cartões pode ser aumentado ou diminuído. Assista ao vídeo abaixo:

Seção Hero

A primeira coisa que faço quando quero construir uma nova seção ou componente é me fazer muitas perguntas. Aqui está o que pensarei ao criar a seção de herói.

Imagem da seção

• Como a imagem deve ser apresentada? Esta imagem muda todos os dias ou deve ser atualizada com o CMS?
• Devemos usar HTML ou plano de fundo em CSS?
• Qual é a proporção esperada da imagem?
• Preciso usar vários tamanhos de imagem dependendo do tamanho da janela de visualização?
• , , ? , , .

• ?

• ? , , ?

• ?

• ? , , .

• . ?

• ? , : — px, CSS clamp()?

Dependendo da natureza do projeto em que está trabalhando, você deve encontrar respostas para essas perguntas. Isso ajudará a determinar como o componente herói deve ser construído. Às vezes pode ser difícil obter uma resposta para cada uma dessas perguntas, mas quanto mais perguntas você fizer, maior será a probabilidade de obter um bom resultado sem erros.



Em nosso componente, tratarei do espaçamento entre os filhos. Para esta tarefa, gosto de usar a propriedade flow-space. Eu aprendi sobre isso no blog do Piccalil de Andy Bell. Nosso objetivo é fornecer a distância entre os elementos diretamente relacionados:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

E o último

Como você viu, o processo de implementação de um componente não é apenas torná-lo um ajuste perfeito para o design, mas também perguntar a si mesmo e pensar em casos extremos. Espero que você tenha aprendido algo com este artigo. E não se esqueça do código promocional HABR , que acrescenta 10% ao desconto do banner.

• Desenvolvedor front-end
• Profissão Web developer
• Curso de Python para Desenvolvimento Web

Artigos recomendados

• Quanto ganha o cientista de dados: uma visão geral de salários e empregos em 2020
• Quanto ganha o analista de dados: uma visão geral de salários e empregos em 2020
• Como se tornar um cientista de dados sem cursos online
• 450 cursos gratuitos da Ivy League
• Como aprender o aprendizado de máquina 5 dias por semana durante 9 meses consecutivos
• Aprendizado de máquina e visão computacional na indústria de mineração
• Machine Learning Computer Vision