DEV Community: Luis Badiali

Página principal de coinbase.com maquetada con Bootstrap

Luis Badiali — Tue, 28 Jun 2022 11:16:05 +0000

Herramientas que he usado

Bootstrap
Sass
Handlebars
Webpack

Demo

🔗 URL no disponible temporalmente.

Repositorio GitHub

🔗 URL no disponible temporalmente.

Versión escritorio

En escritorio, el menú funciona con el hover no con el click, de esta forma le he podido añadir una transición de CSS.

La tabla de rankings que aparece, está maquetada con el componente de tablas responsive de Bootstrap que añade una barra de desplazamiento para poder ver todas sus columnas y no tener que ocultar información relevante.

Versión móvil

He utilizado el componente Offcanvas de Bootstrap 5, consiguiendo con un solo elemento todas las versiones responsive del menú.

Para animar el icono del menú, he usado los callbacks del componente Offcanvas añadiendo y quitando una clase al mismo.

Usando las clases que añade Bootstrap a los elementos de dropdown, al hacer click en ellos se cambia la dirección del icono.

Off-canvas menu usando el modal de Bootstrap

Luis Badiali — Wed, 05 Aug 2020 20:21:35 +0000

Vamos a ver cómo utilizar la estructura de un modal estándar de Bootstrap para construir un menú "Off-canvas" o lo que viene a ser lo mismo un menú desplegable lateral.

El icono que he utilizado para desplegar es un icono animado por CSS, puedes descargar la librería desde aquí. Se le puede añadir diferentes clases que realizan diferentes animaciones. Este botón llama al modal a través de los atributos data: data-toggle="modal" data-target="#menuModal"

Estructura HTML del icono

Javascript para cambiar los estados del icono

Al hacer clic añade una clase al icono para iniciar la animación y al cerrarse el modal le quita esta clase para volver al estado inicial

El modal tiene un atributo data-backdrop="" para quitar el fondo con transparencia que suele aparecer, de esta manera se podrá hacer clic en el botón de cerrar menú.

Estructura del modal

He omitido el contenido del modal ya que se puede ver con más detalle desde codepen.io

La parte más importante de CSS es donde le decimos al modal la posición de inicio y la posición final al desplegarse. El CSS está realizado con SCSS.

Puedes probar, modificar o descargar el código desde codepen.io dejo incrustado el código para que puedas verlo.

Cualquier duda o comentario será bienvenido. ¡Un saludo!

Resultado final

Lista desplegable efecto acordeón con Bootstrap

Luis Badiali — Tue, 21 Jul 2020 15:14:10 +0000

En esta ocasión he cambiado el diseño del acordeón por defecto, puedes verlo en la documentación oficial de Bootstrap aquí.

Componente original

Este componente de Bootstrap utiliza a su vez el componente card. Con pocas líneas se ha conseguido un aspecto más llamativo. En este ejemplo he utilizado Pug y Sass.

Resultado final

Características

Uso de clases nativas de bootstrap.
Iconos de Fontawesome.
Flechas indicadoras de posición abierto/cerrado.

📎 Puedes editar o descargar este snippet de Bootstrap en este enlace a CodePen.

Listado con Bootstrap estilo Masonry sin JS

Luis Badiali — Fri, 06 Mar 2020 16:01:37 +0000

El HTML está maquetado con el preprocesador "Pug" y la hoja de estilos con "SCSS", no necesita JS. Las clases utilizadas son por defecto de Bootstrap, excepto la clase .card-block que la he creado para realizar el efecto en el :hover. También he utilizado la clase .stretched-link en el link para que sea "clicable" la tarjeta completa.

Espero que sea de ayuda. Cualquier comentario será bienvenido 👍

📎 Puedes cambiar el zoom de CodePen a 0.5x para ver la versión de escritorio