Share
En este rápido consejo, vamos a utilizar Bulma, un popular framework CSS basado en Flexbox por Jeremy Thomas, para crear un diseño de blog sensible.
Como de costumbre, para obtener una idea inicial de lo que vamos a crear, eche un vistazo a la demostración Codepen asociada (consulte la versión más grande para una mejor experiencia):
Bulma requiere un solo archivo CSS. Puede obtener una copia de este archivo visitando su página de GitHub, a través de un administrador de paquetes (por ejemplo, npm) o un CDN (por ejemplo, cdnjs).
Para este tutorial, elegiremos la última opción. Por lo tanto, colocamos un enlace al archivo requerido dentro de la de nuestro documento HTML:
Ahora, estamos listos para comenzar a construir el diseño del blog.!
Nuestra rejilla tendrá un ancho máximo y estará centrada horizontalmente. Para lograr esto, usamos Bulma's. sección y envase clases de ayuda
En pantallas pequeñas, todos los artículos deben apilarse verticalmente, así:
Por defecto, Bulma, que está diseñado para dispositivos móviles primero, coloca los artículos uno encima del otro en anchos de ventana gráfica de 769px. Todo lo que tenemos que hacer es construir el diseño del blog cuando la ventana gráfica exceda 768px.
Para hacer eso, solo necesitamos un elemento: el azulejo. Como verá en un momento, el truco consiste en anidar varios elementos de mosaico.
Teniendo esto en cuenta, echemos un vistazo más de cerca al diseño de escritorio deseado. Como puede ver en la siguiente visualización, consta de tres filas:
Para cada fila, Bulma espera al menos la siguiente jerarquía anidada:
azulejo es ancestro | └───tile es-padre | └───tile es-niño
Vamos a explicar que:
Accentsconagua
es-* clases donde * es un número entre 1 y 12. Por ejemplo, un azulejo con el es-6 La clase ocupará el 50% del espacio horizontal..es-vertical clase.es-niño clase para él y el es-padre clase a la ficha padre.En este punto estamos listos para poner esta teoría en práctica..
La primera fila contiene tres columnas. La primera y la tercera columnas ocupan un cuarto del ancho de la fila, mientras que la segunda ocupa la mitad del ancho de la fila. Además, la tercera columna consta de dos columnas secundarias..
En base a lo que hemos discutido anteriormente, aquí está el marcado requerido:
Observe que definimos un ancho específico solo para la segunda columna a través de es-6 clase. Por supuesto, si queremos, podemos añadir el es-3 clase a la primera y tercera columnas también. Pero esto no es necesario porque ambas columnas crecen (tienen flex-grow: 1) Para compartir el espacio horizontal restante.
Además, solo para el estilo, asignamos algunas clases personalizadas a cada artículo. Y para simplificar, omitimos los contenidos de los artículos..
Similar a la primera fila, la segunda fila contiene tres columnas. El primero ocupa la mitad del ancho de la fila, mientras que el segundo y el tercero ocupan un cuarto del ancho de la fila. Además, la segunda columna incluye dos columnas hijas..
Aquí está el marcado relacionado:
La tercera fila es un poco más complicada; Aquí tenemos dos columnas. El primero es dos veces más grande que el segundo. Dentro de la primera columna, tenemos dos sub-filas. La primera sub-fila contiene tres columnas de igual tamaño, mientras que la segunda sub-fila incluye dos columnas de igual tamaño.
El marcado para este caso es el siguiente:
Como verá en el código anterior, la jerarquía anidada se ve así:
azulejo es ancestro | ├───tile is-8 is-vertical | | | ├───tile / * Clase extra para IE * / | | | | | ├───tile es-padre | | | └───tile is-child | | | | | ├───tile es-padre | | | └───tile is-child | | | | | └───tile es-padre | | └───tile is-child | | | └───tile / * Clase extra para IE * / | | | ├───tile es-padre | | └───tile is-child | | | └───tile es-padre | └───tile is-child | └───tile is-parent └───tile is-child
Si desea obtener una mejor idea de cómo funciona el elemento de mosaico, asegúrese de consultar la documentación y de usar las herramientas de desarrollador de su navegador favorito para inspeccionar las clases asociadas.
Hoy en día, Flexbox tiene un gran soporte y, por lo tanto, el diseño de nuestro blog debería funcionar en todos los navegadores modernos..
Sin embargo, mientras estaba probando la página en diferentes navegadores, encontré que IE 11 no produjo el resultado deseado. Esto es lo que estaba viendo:
Por otro lado, al probar con Microsoft Edge no encontré estos problemas. Quizás sea algún tipo de error con las últimas versiones de IE. De todos modos, traté de ver si había alguna solución rápida que evitara estos problemas.
Lo resolví agregando base flexible: auto a los artículos y los azulejos de nivel superior de la es-vertical Azulejo de la tercera fila (ver jerarquía anterior).
De nuevo, esta es una solución rápida que parece funcionar para este ejemplo en particular. Para sus propias implementaciones, es posible que tenga que hacer algunos otros cambios en su código.
En este rápido consejo, aprendimos cómo construir una cuadrícula de blogs receptiva con Bulma, un marco construido sobre Flexbox..
¿Alguna vez has probado Bulma en alguno de tus proyectos? ¿Que piensas de eso? Comparte tus experiencias en los comentarios a continuación..
