Il y a quelques semaines, le célèbre Cadre de fondation a publié sa quatrième version. Si vous n'avez jamais entendu parler de la Fondation, nous allons vous guider dans l'utilisation de ce cadre réactif.

Depuis que la version 3 de Foundation a été conçue à partir de SASS - un préprocesseur CSS qui aide à l’écriture de CSS plus efficaces - cette nouvelle version est également compatible avec les appareils mobiles et offre de nombreuses fonctionnalités dans la grille. t obtenir d'autres cadres.

Plongeons dans Foundation et voyons pourquoi c'est si populaire ...

La grille

Foundation utilise une grille imbriquée de 12 colonnes qui s'adaptera à toutes les tailles d'écran, si vous avez déjà utilisé des grilles, cela devrait vous être très familier. Tous les divs dans Foundation utilisent la fonction box-sizing: border-box afin que les bordures et le remplissage n'affectent pas la largeur et la hauteur de l'élément, ce qui facilite un peu les calculs. Mais la chose la plus étonnante à propos de la grille Foundation est que vous obtenez en réalité 2 grilles, une grande grille lorsque la largeur de l’écran est supérieure à 768px et une grille plus petite que vous pouvez contrôler tout aussi simplement. À cette fin, Foundation utilise les classes small-# et large-, comme ceci:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Dans ce code, nous avons créé une ligne dans laquelle il y a 3 divs qui ont exactement la même largeur lorsque le navigateur est plus large que 768px mais quand il est plus petit, comme vous pouvez le voir dans cette div, la dernière occupera la moitié screen alors que les deux autres occuperont 25% chacun, cela vous donne un immense contrôle sur la façon dont notre site Web sera visible sur tous les écrans.

Foundation vous permet également de compenser une colonne, ce qui signifie que vous pouvez avoir une ligne avec 2 colonnes de 3 colonnes seulement, mais que vous pouvez compenser la seconde à laquelle elle flotte à droite classe offset ou la classe small-offset:

3, offset 6

Grille de bloc

La grille de blocs n’est qu’un petit plus, elle vous permet de diviser le contenu d’une liste dans la grille. Elle est utile lorsque vous souhaitez que cette partie de votre site Web reste espacée, quelle que soit la taille de la grille. navigateur. Ce type de grille utilise les classes small-block-grid et big-block-grid, si vous ne définissez que le premier, la grille conservera l'espacement souhaité, quelle que soit la fenêtre d'affichage. classe de grille lorsque la fenêtre atteint le point d'arrêt de 768px, les éléments de la grille s'empilent les uns sur les autres, vous pouvez toujours prendre plus de contrôle en utilisant ces deux classes, comme ceci:

En utilisant ceci, les images seront espacées uniformément, peu importe la taille. Lorsque la fenêtre d'affichage est plus grande que 768px, elles n'occuperont qu'une ligne et, si elles sont plus petites, elles occuperont deux lignes de deux images chacune.

La navigation principale

Maintenant que nous avons couvert la grille dans Foundation et que cela vous donne beaucoup de contrôle dans tous les environnements, nous parlerons de quelque chose que nous utiliserons presque toujours sur nos sites: une barre de navigation supérieure. Et bien sûr, cette navigation peut également être flexible avec peu ou pas de travail en utilisant ce framework. Pour créer une navigation réactive simple à l'aide de Foundation, vous utilisez:

Ce bit HTML crée une barre de navigation simple qui porte le titre du site Web à gauche, puis à droite, quatre éléments de menu. Notez également que lorsque la fenêtre d'affichage est inférieure à 768px, ce menu sera remplacé par une icône de liste rendant ce menu réactif. Si vous souhaitez que cette grille ait sa position fixe lorsque vous faites défiler la page, il vous suffit de l'enrouler dans un div avec une classe de correctif. Pour ajouter des menus déroulants à votre navigation, il vous suffit d’ajouter quelque chose comme cela à l’endroit où vous souhaitez placer votre liste déroulante:

#">  Sous menu Item 1
Sous menu Item 1
Sous menu Item 3

Il y a aussi la possibilité d'ajouter un diviseur à votre élément de liste en ajoutant une petite ligne verticale grise, pour cela il vous suffit de placer un élément de liste avec la classe de diviseur entre les deux éléments de liste que vous souhaitez diviser.

Boutons

Aucun framework ne serait complet sans certains boutons prédéfinis et Foundation a en fait plus d'un style de bouton prédéfini, il a par défaut celui qui utilise une couleur bleue et ajoute ensuite les styles succès, alerte et secondaire. En ajoutant la classe de rayon, vous donnez à ce bouton un petit peu de rayon de bordure et en lui donnant la classe de tour, vous faites presque entièrement le bouton. Vous pouvez également ajouter la classe désactivée au bouton et il y a 4 classes de taille pour rendre le bouton aussi grand que vous en avez besoin.

Bouton par défautPetit boutonPetit boutonGros boutonBouton secondaireBouton de réussiteBouton d'alerteBouton de rayonBouton rondBouton désactivé

Pour créer un simple bouton déroulant, il vous suffit d'ajouter la classe déroulante après le dernier cours, comme ceci:

  h1.subheader 
  h1.  Plus petit 
  Élément de la liste 
  Élément de la liste 
  Lien 1
Lien 2

Comme vous pouvez le constater, en matière de typographie, Foundation nous fournit une aide de base et des cours supplémentaires pour répondre à tous nos besoins.

Autres composants

Si cette démonstration du framework Foundation vous a donné envie d'apprendre plus et de commencer à construire avec Foundation, vous devriez vraiment regarder la documentation car Foundation propose également des composants CSS supplémentaires tels que:

• Boîtes d'alerte
• Panneaux
• Tableaux de prix
• Barres de progression
• les tables
• Des vignettes
• Vidéo Flex

Et aussi quelques aides JavaScript telles que:

• Clairière
• Menu déroulant
• Joyride
• Magellan
• Orbite
• Révéler
• Section
• Info-bulles

Comme vous pouvez le voir, il y a beaucoup de choses à explorer et je vous conseille fortement de regarder toutes ses propriétés CSS et JavaScript.

Conclusion

Nous avons couvert cet article pour voir comment Foundation peut vous aider à créer des sites Web plus rapides et plus réactifs. Grâce à sa grille, vous contrôlez beaucoup mieux la structure de votre site Web que si vous utilisiez une grille flexible normale. pour créer votre site web. J'espère que cet article vous a poussé à apprendre et à utiliser Foundation pour votre prochain projet.

Avez-vous utilisé Foundation pour un projet? Quelles fonctionnalités avez-vous trouvé les plus utiles? Faites le nous savoir dans les commentaires.