Le moteur responsive de Bubble

Nous sommes toujours à la recherche de moyens pour rendre nos applications plus rapides et plus fluides. Les rendre plus réactives ne fait pas exception.

Si tu as déjà utilisé une application, tu sais combien il peut être difficile de naviguer sur une page qui ne fonctionne pas correctement sur mobile. C'est là que Bubble intervient : l'outil NoCode propose une expérience responsive poussée. En utilisant les principes du flexbox, le responsive design et le rendu final sont au top.

‍

Qu’est-ce que le moteur responsive de Bubble ?

Bubble a sorti en juin de 2022 son moteur responsive plus intuitif pour faciliter le développement des futures applications. Le moteur utilise les principes du “flexbox” CSS où chaque disposition de container a ses propres éléments à contrôler. Les éléments “héritent” des propriétés de leur contenu parent.

‍

C’est quoi le flexbox ?

Flexbox est une technologie de mise en page qui met l'accent sur les facteurs de forme tels que les boîtes, les tableaux et les blocs simples. L’organisation des éléments est faite dans un container qui va s’adapter à la taille d’écran, d’où le nom. 😉

Il s'agit d'un système de mise en page bidimensionnel qui peut être utilisé pour créer des sites web statiques et responsives. Le contrôle de la mise en page et de la répartition du contenu d'un site web est simplifié grâce à flexbox. L'idée est de créer un modèle de boîte qui utilise une combinaison de colonnes, de lignes et d'espace entre les cellules pour déterminer la mise en page.

Aujourd’hui elle est utilisée dans un grand nombre d'applications web.

‍

Pour tester ce principe, voici un simulateur de test flexbox.

‍

‍

Allons voir maintenant, ce que Bubble nous propose.

Quels sont les éléments du flexbox présents sur Bubble ?

Voici une sélection des éléments disponibles sur Bubble pour faciliter le développement d’une application responsive :

‍

Alignement sur le parent, la ligne et la colonne

L'alignement d'un conteneur flexbox sur le flux d'un conteneur parent est l'une des astuces flexbox les plus utiles. En définissant la propriété align sur "center", "row" ou "column", tu fais en sorte que le conteneur flexbox s'adapte selon l'alignement établi.

‍

Contrôle de la marge, du remplissage et de l'espacement

Si tu as déjà présenté une table des matières ou voulu présenter une liste de résultats sans rompre le flux de la page, tu as utilisé les propriétés margins, padding et gap. Tu peux également les utiliser pour définir des marges ou des espaces spécifiques autour d'un élément, ou pour définir un espace entre deux éléments qui sont plus éloignés dans la boîte flexible.

‍

Découvre notre Agence Bubble

‍

Notre conclusion sur ce moteur responsive

Les applications modernes doivent fonctionner sur un certain nombre d'appareils, qu'il s'agisse d'ordinateurs portables ou de téléphones mobiles. Le responsive design permet de concevoir une application de façon qu’elle puisse s'adapter à tous les écrans de manière flexible.

‍

Avec Bubble, nous pouvons développer une application web personnalisée et contrôler entièrement son comportement sur différents écrans et appareils. Les règles responsives sont plus faciles à mettre en place, cela augmente la possibilité de design dans un projet et rend aussi les itérations plus rapides.

‍