Share
Dans la partie d'ouverture de cette session sur le cadre de base, nous avons examiné comment vous pouvez utiliser ce cadre, ce qu'il peut faire et comment vous pouvez créer une construction personnalisée. Dans cette partie, nous examinerons en détail le système de grille, en montrant quelques exemples au fur et à mesure. Nous allons aussi bouger un peu les choses et jeter un coup d'œil au plugin Orbit JavaScript Slider; un excellent curseur pour afficher toutes sortes de contenu.
Nous n'utilisons qu'un seul point d'arrêt majeur pour la grille dans Foundation afin de modifier la disposition des écrans d'une largeur supérieure à 768 pixels..
Foundation est un cadre moderne privilégiant la première approche mobile. Cela signifie que le code minimal et les ressources sont chargés en premier pour faciliter la vitesse de rendu des pages. Comme dans la plupart des cadres modernes, Foundation est totalement réactif. Contrairement à la plupart des autres, il n’utilise qu’un seul point de rupture pour le changement structurel. Le point de rupture définit la largeur de la fenêtre à laquelle la grande grille est mise en action, cela se produit à 768px.
Le système de grille lui-même a en réalité trois parties; la grille de bureau, la grille mobile et la grille de blocs. Comme la fondation est d'abord mobile, commençons par le réseau mobile.
C'est la fondation
Le code ci-dessus est constitué de trois classes importantes; la première est la classe «row» qui contient nos colonnes, un peu comme une ligne dans une feuille de calcul contient des colonnes de cellules. Dans cette démo, nous utilisons une grille de douze colonnes, donc Douze est le nombre maximum de colonnes que nous pouvons avoir dans une ligne. Cela dit, si vous avez besoin de plus d’informations, Foundation prend en charge jusqu’à seize colonnes que vous pouvez sélectionner dans le formulaire de construction personnalisé..
La classe qui définit les colonnes ici est petit-12, changer le nombre dans cette classe définit la largeur de ladite colonne. L'utilisation de «small-12» seule ne définit toutefois que la largeur. Pour créer réellement une colonne, nous devons l'associer à la classe «columns». Ces trois classes constituent la base du système de grille.
Tout simplement, le balisage ci-dessus dicte qu'il y a une ligne, avec un div qui va occuper douze colonnes d'une valeur d'espace (100% de la largeur). Notre contenu est contenu dans les douze colonnes. Jetons un coup d'oeil à une version légèrement plus complexe.
Ceci est une barre latérale
C'est la zone de contenu
Dans ce code, nous pouvons voir qu'il y a deux divs avec la classe «columns». Chacun est associé à une classe (telle que «petit-4») pour dicter la taille spécifique. Foundation aligne ensuite ces colonnes les unes à côté des autres et non les unes sur les autres, comme dans le flux de documents HTML normal. Nos deux colonnes occupent respectivement une largeur de quatre colonnes et huit colonnes. Les deux totalisent une largeur complète de douze colonnes; «Petit 4» soit environ 33,3% et «petit 8» environ 66,6% de la largeur du corps.
Ce qui est important à réaliser ici, c’est que ces divs peuvent être imbriqués à l’infini. Cela offre une grande flexibilité, par exemple:
Ceci est une barre latérale
#1
Un titre de poste
C'est la zone de contenu
Vous pouvez constater que nous avons ajouté du contenu à la barre latérale à l'aide d'une ligne, d'une colonne, d'une ligne, en utilisant cette fois trois colonnes de tailles différentes. Super truc hein? Eh bien, il est probablement temps d'ajouter un code grand écran pour tirer pleinement parti du système de grille.
Ceci est une barre latérale
C'est la zone de contenu
Ici, nous avons ajouté une classe supplémentaire à chacune de nos colonnes. grand-3 et grand-9. Cela indique à Foundation que lorsque le site est visualisé sur un écran plus grand, il doit changer la largeur de la barre latérale depuis le début. petit-4 avec 33,3% à grand-3 ce qui équivaut à environ 25% de la largeur du corps. Notre domaine principal est donc capable de croître, donnant plus de place au contenu. Ceci est un exemple simpliste mais devient très utile pour réorganiser votre mise en page pour différentes tailles d'écran.
Bien que nous examinions le système de grille, il convient de mentionner qu’en utilisant grand centré et petit centré vous pouvez centrer une colonne rapidement et facilement, bien que vous ne puissiez le faire que s'il y a une colonne dans la ligne. Vous pouvez également manipuler l’ordre des éléments à l’aide des touches pousser et tirez Des classes.
39, dernier
Cela prend la deuxième div, qui serait généralement affichée après le premier, et le tire vers l'avant tout en poussant le premier pour qu'il apparaisse ensuite. Vous pouvez donc avoir une liste à gauche et le contenu à droite sur de grands écrans, mais appuyez dessus en bas sur de petits écrans..
Après avoir couvert les tenants et les aboutissants des systèmes de grille, nous pouvons examiner la grille de blocs qui est utilisée pour garder les éléments de liste équitablement espacés, quelle que soit la taille de l’écran. Celles-ci sont idéales pour le contenu bloqué (tel que celui généré par une application) car elles ne nécessitent pas de lignes ni même de colonnes pour s'afficher correctement. Si votre mise en page est censée être la même sur le bureau que sur le mobile, il vous suffit d’utiliser le petit bloc-grille- # Des classes.
C'est également le cas pour les grilles dont nous avons parlé précédemment. À la place d'utiliser petit-12 et grand-12 vous auriez seulement besoin petit-12. Facile.
Ceci conclut les systèmes de grille que Foundation doit offrir dans leurs formes de base. N'oubliez pas que la petite grille deviendra la grande grille une fois que la largeur de l'écran aura atteint le point de rupture principal. Utilisez la petite grille pour cibler les petits périphériques et la grande pour les ordinateurs de bureau et les grands écrans..
Nous allons un peu bouleverser la situation en introduisant l'un des nombreux plugins utiles de Foundation; Orbite.
Ce plugin pratique peut être utilisé comme un curseur, vous permettant de glisser des images, des vidéos ou du contenu HTML normal. Avec un balisage simple, il est facile à maîtriser et est un vrai plaisir pour les yeux lorsqu'il est utilisé correctement.
Orbit utilise une structure de liste; chaque élément de la liste étant affiché sous forme de diapositive. Ici, avec les balises d’image habituelles, notre liste d’éléments contient un div avec la classe légende orbite nous permettant de placer une légende sur chaque image. Orbit prend ce code et ajoute un peu plus de balisage pour que les choses fonctionnent. Il comprend également un tas d'options pour afficher la pagination, les contrôles et même une minuterie.
Jetez un coup d’œil à quelques exemples de paramètres que vous pouvez modifier dans Orbit:
timer_speed: 10000, animation_speed: 500, puces: true, stack_on_small: true
Ceux-ci incluent les vitesses, la pagination des balles et l'option d'empiler sur de petits écrans. Il est important de noter que ceux-ci sont transmis à l’initialisation, vous devrez donc prendre votre standard $ (document) .foundation ();, trouvé au bas du fichier index.html inclus dans le téléchargement:
puis passez dans les options d'orbite.
En plus des options présentées ici, vous pouvez ajouter des classes à tous les éléments produits par le plugin. Ces options supplémentaires (et plus encore) sont disponibles dans les documents de la Fondation..
Remarque: Votre téléchargement Foundation inclura tous les éléments JavaScript que vous avez choisis, compilés dans un fichier réduit. Ceci est référencé au bas du fichier index.html, mais vous pouvez également choisir de ne pas commenter les fichiers JavaScript individuels si vous préférez:
Voulez-vous jouer avec Foundation dès maintenant sans le télécharger? Ou peut-être souhaitez-vous un environnement propre pour tester de nouvelles idées? Ensuite, jetez un coup d'œil à ce jsfiddle pratique. Il utilise la dernière version de Foundation et inclut tous les composants..
Dans cette partie du guide de la Fondation, nous avons couvert les systèmes de grille et parlé brièvement du plug-in Orbit. Dans le prochain épisode, nous examinerons la navigation et le plugin de section, ainsi qu'un autre outil utile…
Accentsconagua