Le Framework Gantry est au départ basé sur le système 960 Grid  qui propose une  structure en 12 colonne basée sur un affichage fixe d'une largeur de 960px. A partir de la version 4.x, le système de grille responsive Twitter's Bootstrap est désormais utilisé.

Consultez la vidéo d'introduction de gantry pour voir les capacités responsives des templates propulsés par gantry 4. Caractéristiques puissantes, préréglages, configuration de disposition, responsive design, et beaucoup, beaucoup plus.


L'affichage dynamique ou mise en page responsive s'adapte à l'appareil de visualisation, comme un smartphone, une tablette ou un ordinateur de bureau, en se basant sur la résolution de l'écran. Il existe cinq formats de largeurs différents, et chacun utilise la structure de grille d'une manière différente, il faut donc les proposer. Ceci est réalisé par @media queries qui peut détecter la largeur de la fenêtre du navigateur, et permet différents CSS en conséquence. Il s'agit de la fonction de base qui rend possibles les designs responsives. En réalité, un site simple s'adaptera automatiquement au dispositif de vision, sans avoir besoin de mises en page distinctes, comme pour le mobile.

Notez-le, une mise en page responsive ne détecte pas un périphérique spécifique, il ne détecte que la largeur de l'environnement de visualisation, donc tous les noms comme smartphone ou tablette sont seulement des raccourcis pratiques.

Info sur la Grille Responsive

Le système de grille responsive est conçu pour les systèmes de bureau, tablette et smartphone, chacun avec des modifications mineures pour assurer la compatibilité en fonction du mode. Le tableau ci-dessous indique la répartition des résolutions d'écran et des périphériques associés, et quels types de mise en page sont ensuite appliqués à chacun.

responsive1

Les Classes d'assistance Responsive

Une autre fonctionnalité utile disponible, à travers Bootstrap, est la collection de classes utilitaires responsive qui peut être utilisée pour aider à modifier les mises en page en fournissant une méthode simple pour afficher ou cacher les modules. Insérez les classes ci-dessous dans vos vos réglages de module pour montrer/cachez un module pour un mode particulier, ou ajoutez la à un élément spécifique dans votre contenu.

responsive2

Media Queries

Les media queries CSS actuelles ressemblent à ceci:

    /* Smartphones */
    @media (max-width: 480px) { ... }
     
    /* Smartphones to Tablets */
    @media (min-width: 481px) and (max-width: 767px) { ... }
     
    /* Tablets */
    @media (min-width: 768px) and (max-width: 959px) { ... }
     
    /* Desktop */
    @media (min-width: 960px) and (max-width: 1199px) { ... }
     
    /* Large Display */
    @media (min-width: 1200px) { ... }

Navigation

Le système de menu pour un appareil smartphone sera celle d'un select-champ. Un champ de sélection est une excellente solution pour cela parce que la plupart des téléphones ont nativement de beaux éléments de sélections dans l'interface utilisateurs. Suivre cette méthode est nécessaire pour rendre le menu accessible sur les périphériques mobiles, parce que Fusion, et nos autres types de menu, sont tout simplement trop complexe pour apparaitre efficacement sur ces appareils. Un nouveau système de menus sera créé et sera responsive, mais fera toujours partie de Gantry

Tous les autres tailles vont utiliser le système de menu normal s'appuyant sur RokNavMenu, comme Fusion Menu ou SplitMenu.

responsive3

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels