👨🏿‍⚕️ 🚋 🍖 Piense como un desarrollador front-end 👩‍💼 👨‍👨‍👧 🏠

¡Hola Habr! Hemos comenzado una nueva corriente del curso para desarrolladores de frontend , y estoy compartiendo con ustedes una pequeña lista de verificación para la interfaz sobre cómo pensar al crear un diseño, qué preguntas debe hacerse. Siéntase libre de marcarlo como favorito si desea decirle a su ~~Padawan~~ Jun de qué lado abordar el diseño del diseño, pero no quiere perder el tiempo explicando cosas relativamente simples.

Pregunté en Twitter sobre qué más debería escribir en CSS. Una de las sugerencias que más me llamó la atención es pensar a la hora de implementar un diseño CSS. Implica pensar en posibles soluciones y muchas preguntas para acertar en el diseño. Aquí, le mostraré mi enfoque para pensar en un nuevo diseño y cómo puede aplicar los mismos pasos a su trabajo. ¿Estas listo? Vamos a sumergirnos.

Detalles al lado

Lo primero que suelo hacer es dejar los detalles de diseño para más adelante. Esto significa que resalto las partes principales de un diseño en particular y comienzo a pensar en ellas primero. Sé que los detalles son importantes, pero esto es temporal, por lo que podemos centrarnos primero en los detalles de alto nivel. Considere la siguiente interfaz de usuario:

En esta construcción, tenemos lo siguiente:

Título / Navegación.
Sección principal.
Cómo funciona.

Puede resultar tentador empezar a pensar primero en los pequeños detalles, no con un alto nivel de abstracción. Si me pidieran que simplificara visualmente el enfoque, diría que un desarrollador de front-end debería usar anteojos que solo permitan ver elementos de diseño de alto nivel, como este:

Tenga en cuenta que con anteojos solo puede ver componentes importantes de IU de alto nivel. Este enfoque le ayudará a pensar en cómo organizar los componentes, en lugar de pensar en las pequeñas piezas de cada componente. Así es como pienso:

Encabezado de ancho completo: parece que el encabezado abarca todo el ancho de la ventana gráfica y su contenido dentro del contenedor es ilimitado.
El contenido del elemento héroe está centrado horizontalmente y tenga en cuenta que debe establecerse en el ancho máximo (el párrafo tiene dos líneas).
Cómo funciona: este es un diseño de 4 columnas, la sección en su conjunto está envuelta.

Ahora, cuando quiero trabajar en el código, hago un prototipo rápido solo para ver el progreso rápidamente.

<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 tenemos una sección de 4 columnas, usaré una cuadrícula CSS para ella. Esta es la aplicación perfecta para ella.

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

Fue un ejemplo de pensamiento rápido con gafas. Hasta ahora, ni siquiera había pensado en el diseño receptivo. Tengo algunas preguntas sobre los detalles de algunos de los componentes, pero no voy a profundizar en ellas ahora. Lea sobre esto en la sección "profundizar en los detalles" al final del artículo. Ahora que tiene la idea, le daré algunos ejemplos más de pensamiento de alto nivel para que pueda comprenderlo mejor.

Página del artículo

En este ejemplo, tenemos un diseño de página de artículo. Aquí está la interfaz de usuario que contiene:

Título.
Título de la página.
Vista previa de la imagen del artículo.
El contenido del artículo.
Panel lateral (derecha).

Ahora que tienes una idea de cómo se ve el diseño, pongámonos anteojos para que solo podamos ver los elementos de alto nivel.

Aquí están:

Encabezado del sitio que ocupa todo el ancho de la página.
Título de la página que contiene el título del artículo y su descripción, el contenido se alinea a la izquierda usando el ancho máximo.
Un diseño de dos columnas que contiene los elementos de la barra lateral y principal .
El contenido interno de un artículo que está centrado horizontalmente y tiene un ancho máximo .

Título de la página del artículo

No es necesario aplicar ningún método de diseño aquí. Un simple ancho máximo hará el trabajo. Asegúrese de agregar relleno horizontal para evitar que los bordes del elemento se peguen a los bordes en las ventanas pequeñas.

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

Artículo: base y barra lateral

El elemento principal (main) del artículo ocupa todo el ancho de la ventana menos el ancho de la barra lateral. Normalmente, la barra lateral debe tener un ancho fijo. Una cuadrícula CSS es ideal para esto.

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

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

El contenido interno del artículo debe limitarse dentro del envoltorio.

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

Ahora que tiene una idea de las decisiones de alto nivel que debe tomar al crear su diseño, el siguiente paso es pensar en trabajar con cada sección en términos de diseño.

Buceando en los detalles

Cómo funciona

En el primer artículo de muestra, dije que profundizaremos en los detalles más adelante. Ha llegado este momento.

Altavoces

¿Tenemos casos en los que el número de pasos puede ser menor o mayor? Si es así, ¿cómo trabajar en tal situación?
¿Es necesario que las columnas tengan la misma altura, especialmente cuando la tarjeta tiene un texto muy largo?

Bóveda

¿Necesitamos dejar a un lado la sección del encabezado? ¿O hay momentos en los que debería ocupar todo el ancho?

Diseño adaptativo

¿En qué situación necesitas doblar para cambiar el tamaño de los hijos de una sección? ¿Tenemos algún tipo de gatillo plegable? Si es así, ¿cuál es este disparador?

A continuación, se muestran algunas situaciones posibles con esta sección. ¿Qué piensas? Como desarrollador front-end, debe considerar estos casos extremos. No se trata solo de crear una interfaz de usuario sin tener en cuenta esos detalles ocultos.

No entraré en detalles sobre cuál debería ser el código para cada variación, ya que este artículo se centra en el proceso de pensamiento , pero estoy ansioso por mostrarte algo así. Tenga en cuenta que en la primera y tercera versión del diseño anterior, tenemos tres pasos, no dos. ¿Podemos hacer que el CSS sea dinámico para que maneje la situación por nosotros? Me refiero a aumentar el número de pasos de dos a tres.

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

Usé una cuadrícula CSS con una minmax()

palabra clave auto-fit

. Esto es útil cuando se puede aumentar o disminuir el número de tarjetas. Mira el video a continuación:

Sección de héroe

Lo primero que hago cuando quiero crear una nueva sección o componente es hacerme muchas preguntas. Esto es lo que pensaré al crear la sección de héroes.

Imagen de la sección

¿Cómo se debe presentar la imagen? ¿Esta imagen cambia todos los días o debería actualizarse con el CMS?
¿Deberíamos usar HTML o fondo en CSS?
¿Cuál es la relación de aspecto esperada de la imagen?
¿Necesito usar varios tamaños de imagen según el tamaño de la ventana gráfica?
, , ? , , .

? , , ?

? , , .

? , : — px, CSS clamp()?

Dependiendo de la naturaleza del proyecto en el que esté trabajando, debería encontrar respuestas a estas preguntas. Esto ayudará a determinar cómo se debe construir el componente héroe. A veces puede ser difícil obtener una respuesta a cada una de estas preguntas, pero cuantas más preguntas haga, más probabilidades tendrá de obtener un buen resultado sin errores.

En nuestro componente, me ocuparé del espacio entre los niños. Para esta tarea, me gusta usar la propiedad flow-space. Lo aprendí del blog Piccalil de Andy Bell. Nuestro objetivo es proporcionar la distancia entre elementos directamente 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);
}

Y el último

Como ha visto, el proceso de implementación de un componente no se trata solo de adaptarlo exactamente al diseño, sino también de preguntarse y pensar en casos extremos. Espero que hayas aprendido algo de este artículo. Y no se olvide del código de promoción HABR , que agrega un 10% al descuento del banner.

Más cursos

Piense como un desarrollador front-end