How to Create a Responsive Comment Section with HTML5 and CSS3

Flexbox: cómo crear una sección de comentarios receptiva con HTML5 y CSS3

Muy a menudo, cuando navega por la web, es probable que haya notado cómo las secciones de comentarios receptivos se están convirtiendo cada vez más en algo común. Estos son principalmente mucho más populares en los blogs y algunos sitios que pertenecen al grupo de redes sociales. Aquí, veremos cómo se puede construir fácilmente una sección de comentarios tan receptiva con la ayuda de Flexbox, que es un nuevo modelo de diseño en CSS3.

¿Qué es FlexBox?

En pocas palabras, Flexbox es básicamente un nuevo método para crear diseños potentes, que pueden hacer que muchas áreas desafiantes del desarrollo web parezcan bastante fáciles. Se sabe que casi todos los navegadores que se usan mucho en la actualidad lo admiten, por lo que puede ser una buena manera de desarrollar su trabajo de front-end.

Ahora que sabemos qué es Flexbox, veamos también algunas partes importantes de las que se compone. Esto le permitirá implementar funciones potentes de una manera que satisfaga sus necesidades.

Propiedades CSS de Flexbox que implementaremos

Hay bastantes propiedades CSS que usaremos en nuestra búsqueda para desarrollar una sección de comentarios receptiva.

pantalla: flexionar

Esta es una característica que es responsable de la activación del diseño flexible y también hace que el elemento, con sus categorías, siga las reglas de Flexbox.

justificar-contenido

Al igual que el texto está alineado, esta propiedad determina la alineación de los elementos bajo las reglas de Flexbox.

ordenar

Esta propiedad particular permite colocar elementos de acuerdo con el lugar donde deben mostrarse. Esto se usa para cambiar texto y foto en la sección de comentarios.

envoltura flexible

Ayuda en la envoltura de elementos que están dentro del elemento flexible. Esta función tiene uso en pantallas pequeñas donde los avatares se muestran debajo del texto del comentario.

Diseño de la sección de comentarios

El diseño de la sección de comentarios deberá tener:

  • un cuerpo de comentario, con nombre, hora y el avatar.
  • dos tipos de comentarios, uno para el autor, que tendrá un color determinado, y otro para otros comentarios.
  • para ambos tipos de comentarios, el marcado HTML debe ser lo más similar posible. Esto permitirá una fácil generación de comentarios a través del código.
  • toda la sección debe ser completamente receptiva.

Tomando el código HTML

La parte HTML es bastante simple. Tendrá una lista de comentarios, con la opción de escribir nuevos comentarios (un formulario básico) al final.

Listado 1: código HTML

<ul class="comment-section">
	<li class="comments user_comments">
 		<div class="information">
 		<a href="#">Anita Boston</a>
      	<span>7 hours ago</span>
       </div>
      	<a class="avatar" href="#">
      	<img src="images/avataruser_one.jpg" width="30" alt="Profile Avatar" title="Anita Boston" />
		</a>
     	<p>I think this shall work.</p>
  	</li>
  	<li class="comments author_comments">
       <div class="information">
      	<a href="#">Jackie Sharp</a>
      	<span>5 hours ago</span>
     	</div>
     	<a class="avatar" href="#">
      	<img src="images/avatarauthor.jpg" width="30" alt="Profile Avatar" title="Jackie Sharp" />
		</a>
      	<p>Sure enough! With a little bit of effort, everything is possible.</p>
    </li>
<!—Add more comments in this section-->
<li class="write_new"> <form action="#" method="post"> <textarea placeholder="Please add your comment here" name="comments"></textarea> <div> <img src="images/avataruser_two.jpg" width="30" alt="Profile Brad Jonas" title="Brad Jonas" /> <button type="submit">Submit</button> </div> </form> </li> </ul>

Ahora, si ha examinado detenidamente la parte HTML del código, notará que ambos tipos de comentarios son básicamente iguales, excepto que tienen nombres de clase diferentes. El aspecto estilístico, como tal, se aplicará con la ayuda de CSS.

CSS Parte del Código

El primer paso aquí es usar display: flexya que traerá todos los comentarios debajo y nos permitirá implementar funciones de Flexbox.

.comments{
  display: flex;
}

Después de esto, el siguiente paso es tener los elementos en el contenedor en orden inverso. Aquí, el mensaje vendrá primero, seguido del avatar y luego el comentario. usamos el order propiedad para aplicar esto.

.comments.author_comments .information{
  order: 3;
  }
  
.comments.author_comments .avatar{
  order: 2;
  }
  
.comments.author_commentsp{
  order: 1;
}

Ahora que hemos implementado la sección de comentarios, todavía queda una pequeña tarea por hacer. Este sin duda es el reajuste a la sección de comentarios para pantallas estrechas o dispositivos pequeños.

Con la ayuda de una consulta de medios, ampliaremos el párrafo de comentarios, de modo que ocupe todo el ancho del contenedor. La información del usuario, junto con el avatar, pasa a la siguiente línea, ya que los comentarios tienen la flex-wrap propiedad configurada para envolver.

Listado 2:CSS para dispositivos pequeños

@media (max-width: 700px){
  /* Reversing order of elements in user comments,
  such that avatar and information appear after text. */
  
  .comments.user_comments .information{
    order: 3;
    }
    
  .comments.user_comments .avatar{
   order: 2;
   }
   
  .comments.user_commentsp{
   order: 1;
   }
   
  /* Making the paragraph in the comments utilize up the entire width,
  making avatar and user information wrap to next line*/
  
  .comments p{
    width: 100%;
    }
     
  /* Aligning towards the beginning of the container (i.e. towards the left)
  all elements inside author comments. */
  
  .comments.author_comments{
   justify-content: flex-start;
   }
   }

A continuación se muestra la salida de la aplicación. Muestra cómo los usuarios pueden comentar a través de la aplicación creada con Flexbox.


Salida de la ventana de comentarios

Conclusión

Nuestro pequeño tutorial explica cómo puede implementar fácilmente Flexbox para el desarrollo de un diseño de comentarios receptivo. El uso de Flexbox facilita su desarrollo, que de otra manera puede parecer difícil.

Este artículo es proporcionado por CupónBin.

#Flexbox #cómo #crear #una #sección #comentarios #receptiva #con #HTML5 #CSS3

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *