Estilos de blockquote para Bulma CSS

27 de octubre, 2021

Pinceles junto a un cuaderno de dibujo y una paleta de acuarelas

Idea

Como había mencionado antes, estoy utilizando Bulma CSS para el estilo de este sitio. pero este no tiene un estilo definido para los blockquote de HTML, en el github de bulma existe ya una sugerencia para agregar el estilo, pero la propuesta del autor no me convenció mucho, por lo tanto decidí hacer uno.

Versión de Bulma

Funciona con la versión 0.9.3 disponible al momento de escribir esta publicación.

Repositorio

El enlace al repositorio es https://github.com/Lewatoto/bulma-blockquote.

La estructura del repositorio es la siguiente:

sass: Archivos sass en donde se definen los estilos de los blockquote, es necesario descargar también la versión más reciente de Bulma CSS para obtener los archivos listos para producción.
css: Archivos en sus dos versiones, listos para usar en producción.

Pueden descargar el repositorio completo y utilizar lo que necesiten o pueden utilizar un CDN para acceder a los archivos, por ejemplo con JSDelivr.

# Versión normal
https://cdn.jsdelivr.net/gh/Lewatoto/bulma-blockquote/css/blockquote.css

# Versión comprimida
https://cdn.jsdelivr.net/gh/Lewatoto/bulma-blockquote/css/blockquote.min.css

Estilos disponibles

Importante: Estos estilos solo modifican el color de fondo, borde y texto dentro del blockquote para elementos como los enlaces <a> se deben aplicar los estilos por aparte o utilizar alguno de los modificadores de color de texto de Bulma.

Para utilizar el estilo para el blockquote debe estar dentro de un contenedor con la clase .content, las opciones disponibles por el momento son:

is-white
is-dark
is-light
is-dark
Para los siguientes existen dos versiones, una utilizando solamente el nombre y la otra agregando la clase is-light:
- is-primary
- is-info
- is-success
- is-warning
- is-danger

Uso

Si se escribe el HTML a mano quedaría algo parecido a lo siguiente:

<div class='content'>
  <blockquote class='is-info'
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </blockquote>
</div>

Si se utiliza Markdown quedaría parecido a lo siguiente:

> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{:.is-white}

Ejemplos

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.