Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Consejo Rápido: Cómo Crear Maquetado para Blog Con Bulma

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste consejo rápido, vamos a usar Bulma, un popular framework CSS basado en Flexbox desarrollado por Jeremy Thomas, para crear un maquetado para blog responsivo.

Como es habitual, para tener una idea inicial de lo que estaremos creando, observa el asociado demo en Codepen (consulta la versión más grande para una mejor experiencia):

Comenzando Con Bulma

Bulma requiere únicamente un solo archivo CSS. Puedes tomar una copia de éste archivo visitando su página en Github, a través de un gestor de paquetes (por ejemplo, npm), o un CDN (por ejemplo cdnjs).

Para éste tutorial, elegiremos la última opción. Así, colocamos un enlace al archivo requerido dentro del <head> de nuestro documento HTML:

Ahora, ¡estamos listos para comenzar a crear el maquetado para blog!

Creando el Maquetado

Nuestra grilla tendrá una anchura máxima y será centrada horizontalmente. Para lograr ésto, usamos las clases auxiliares section y container de Bulma.

En pequeñas pantallas todos los artículos deberían estar apilados verticalmente, así:

Bulma mobile layout

Por defecto Bulma, que es diseñado con el planteamiento primero-dispositivos móviles, coloca los artículos uno arriba de otro en anchuras de ventanas gráficas inferiores a 769px. Todo lo que tenemos que hacer es construir el maquetado para blog cuándo la ventana gráfica supere los 768px.

Para hacer eso, necesitamos solamente un elemento: el tile. Como veremos en un momento, el truco es anidar múltiples elementos tile (azulejo).

Con ello en mente, observemos detenidamente el deseado maquetado para computadoras de escritorio. Como puedes ver de la siguiente visualización, se compone de tres filas:

Para cada fila, Bulma espera al menos la siguiente jerarquía anidada:

Expliquemos eso:

  • Comenzamos con un tile de nivel superior que contiene todos los otros tiles.
  • Dentro de él, añadimos tiles que son distribuídos en el eje horizontal. Además, basado en una grilla de doce columnas, podemos establecer una anchura específica para éstos elementos. Ésto es posible al usar las clases is-* dónde * es un número entre 1 y 12. Por ejemplo, un tile con la clase is-6 ocupará 50% del espacio horizontal.
  • Para apilar tiles verticalmente, usamos la clase is-vertical.
  • Una vez que queramos añadir contenido a un tile, asignamos la clase is-child a él y la clase is-parent al tile padre.

En éste punto estamos listos para poner ésta teoría en práctica.

Fila #1

La primera fila contiene tres columnas. La primera y tercera columna ocupan la cuarte parte de la anchura de la fila, mientras que la segunda ocupa la mitad de la anchura de la fila. Además, la tercera columna consiste de dos columnas hijo.

Basado en lo que hemos discutido arriba, aquí está el marcado requerido:

Nota que definimos una anchura específica únicamente para la segunda columna vía la clase is-6. Claro, si queremos, podemos agregar la clase is-3 a las columnas primero y tercera también. Pero ésto no es necesario porque ambas columnas crecen (tienen flex-grow: 1) para compartir el espacio horizontal restante.

Más aún, solo por aplicar estilo, asignamos unas cuántas clases personalizadas a cada artículo. Y por simpleza,omitimos el contenido de los artículos.

Fila #2

Similar a la primera fila, la segunda fila contiene tres columnas. La primera ocupa la mitad de la anchura de la columna, mientras que la segunda y la tercera toman la cuarte parte de la anchura de la fila. Además, la segunda columna incluye dos columnas hijo.

Aquí está el marcado relacionado:

Fila #3

La tercera fila es un poco más complicada; aquí tenemos dos columnas. La primera es dos veces más grande, en relación a la segunda. Dentro de la primera columna, tenemos dos sub-filas. La primera sub-fila contiene tres columnas de igual tamaño, mientas que la segunda sub-fila incluye dos columnas de igual tamaño.

El marcado para éste caso es como sigue:

Como verás del código de arriba, la jerarquía anidada se ve así:

Si quieres tener una mejor idea de cómo funciona el elemento tile, asegúrate de consultar la documentación así como usar las herramientas para desarrolladores de tu navegador favorito para inspeccionar las clases asociadas.

Soporte de Navegadores

Hoy en día Flexbox tiene realmente magnífico soporte, y nuestro maquetado para blog debería por lo tanto funcionar en todos los navegadores modernos.

Sin embargo, mientras que estaba probando la página en diferentes navegadores, encontré que IE 11 no produjo el resultado deseado. Aquí está lo que estaba viendo:

Por otro lado, probando con Microsoft Edge no encontré éstos problemas. Quizá es alguna clase de error con las versiones más recientes de IE. De cualquer manera, traté de ver si había cualquier solución rápida que evitara éstos problemas.

Lo resolví al añadir flex-basis: auto a los artículos y tiles de nivel superior del tile is-vertical de la tercera fila (ve la jerarquía previa).

De nuevo, ésta es una solución rápida que parece funcionar para éste ejemplo particular. Para tus propias implementaciones, podrías tener que hacer algunos otros cambios en tu código.

Conclusión

En éste consejo rápido, aprendimos cómo crear una grilla de blog responsiva con Bulma, un framework construído teniendo como base Flexbox.

¿Alguna vez has probado Bulma en cualquiera de tus proyectos? ¿Qué piensas de él? Comparte tus experiencias en los comentarios abajo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.