Fondation - Guide rapide

Qu'est-ce que la Fondation?

Foundation est l'un des cadres frontaux avancés pour la conception de beaux sites Web réactifs. Il fonctionne sur tous les types d'appareils et vous fournit des plugins HTML, CSS et JavaScript.

La fondation a commencé comme un guide de style interne, construit par ZURB en 2008. ZURB est une société de conception de produits à Campbell, en Californie. Il a publié Foundation 2.0 en open source en octobre 2011. La dernière version de Foundation est la 6.1.1, publiée en décembre 2015.

Pourquoi utiliser Foundation?

  • Il fournit un développement plus rapide en utilisant le compilateur Sass, qui fonctionne beaucoup plus rapidement que le compilateur par défaut.

  • Il enrichit votre site Web avec des tableaux de prix, des commutateurs, un joyride, des curseurs de gamme, une lightbox et bien d'autres.

  • Il est livré avec un package de développement comme Grunt et Libsass pour un codage et un contrôle plus rapides.

  • Foundation for sites vous fournit HTML, CSS et JS pour créer rapidement des sites Web.

  • Le framework de messagerie vous fournit des e-mails HTML réactifs, qui peuvent être lus sur n'importe quel appareil.

  • Foundation for Apps vous permet de créer des applications Web entièrement réactives.

traits

  • Il possède un système de grille puissant, des composants d'interface utilisateur utiles et des plugins JavaScript sympas.

  • Il fournit une conception réactive, qui sert tous les types d'appareils.

  • Il est optimisé pour les appareils mobiles et prend véritablement en charge l'approche mobile first.

  • Il fournit des modèles HTML, personnalisables et extensibles.

Avantages

  • C'est facile à apprendre, une fois que vous avez une compréhension de base du HTML et du CSS.

  • Vous pouvez utiliser Foundation librement car il s'agit d'une source ouverte.

  • Il vous fournit un tas de modèles, qui vous aident à commencer à développer le site Web immédiatement.

  • Foundation prend en charge les préprocesseurs tels que SASS et Compass, ce qui accélère le développement.

Désavantages

  • En raison de la popularité de Twitter Bootstrap, le support de la communauté pour Twitter Bootstrap est meilleur que Foundation.

  • Les débutants peuvent mettre du temps à apprendre et à profiter de la prise en charge du préprocesseur.

  • Manque de support plus large comme les sites d'assurance qualité et les forums pour résoudre les problèmes.

  • La Fondation a moins de thèmes que d'autres.

Dans ce chapitre, nous discuterons de la façon d'installer et d'utiliser Foundation sur le site Web.

Téléchargez la Fondation

Lorsque vous ouvrez le lien foundation.zurb.com , vous verrez un écran comme indiqué ci-dessous -

Clique le Download Foundation 6 bouton, vous serez redirigé vers une autre page.

Ici vous pouvez voir quatre boutons -

  • Download Everything - Vous pouvez télécharger cette version de Foundation, si vous souhaitez tout avoir dans le framework ie vanilla CSS et JS.

  • Download Essentials - Il téléchargera la version simple qui comprend la grille, les boutons, la typographie, etc.

  • Custom Download - Cela téléchargera la bibliothèque personnalisée pour Foundation, elle comprend des éléments et définit la taille des colonnes, la taille de la police, la couleur, etc.

  • Install via SCSS - Cela vous redirigera vers la page de documentation pour installer Foundation for sites.

Vous pouvez cliquer sur le Download Everythingbouton pour tout obtenir dans le cadre, à savoir CSS et JS. Comme les fichiers consistent tout dans le framework, vous n'avez donc pas besoin d'inclure des fichiers séparés pour des fonctionnalités individuelles à chaque fois. Au moment de la rédaction de ce didacticiel, la dernière version (Foundation 6) a été téléchargée.

Structure des fichiers

Une fois Foundation téléchargé, extrayez le fichier ZIP, et vous verrez la structure de fichiers / répertoires suivante -

Comme vous pouvez le voir, il existe des CSS et JS compilés (foundation. *), Ainsi que des CSS et JS compilés et minifiés (foundation.min. *).

Nous utilisons les versions CDN de la bibliothèque tout au long de ce didacticiel.

Modèle HTML

Un modèle HTML de base utilisant Foundation est présenté ci-dessous -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Les sections suivantes décrivent le code ci-dessus en détail.

Doctype HTML5

Foundation se compose de certains éléments HTML et propriétés CSS qui nécessitent l'utilisation du doctype HTML5. Par conséquent, le code suivant pour le doctype HTML5 doit être inclus au début de tous vos projets utilisant Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile d'abord

Cela aide à être réactif aux appareils mobiles. Vous devez inclure leviewport meta tag à l'élément <head>, pour assurer un rendu correct et un zoom tactile sur les appareils mobiles.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • La propriété width contrôle la largeur de l'appareil. Le définir sur la largeur de l'appareil garantira qu'il est correctement rendu sur différents appareils (mobiles, ordinateurs de bureau, tablettes ...).

  • initial-scale = 1.0 garantit qu'une fois chargée, votre page Web sera rendue à une échelle de 1: 1, et aucun zoom ne sera appliqué dès la sortie de la boîte.

Initialisation des composants

Le script jQuery est requis dans Foundation pour les composants tels que les modaux et la liste déroulante.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus firstexample.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

Vous pouvez commencer le développement de votre projet avec certains modèles disponibles qui peuvent être installés via Yeti Launch ouFoundation CLI. Vous pouvez commencer avec le nouveau projet en utilisant ces modèles en utilisant le système de construction Gulp pour le traitement du Sass, JavaScript, la copie de fichiers, etc.

Modèle de base

Le modèle de base est quelque chose comme le modèle SASS, qui comprend la structure de répertoire plat et ne compile que les fichiers SASS et il est bon d'avoir ce modèle simple tout en utilisant uniquement SASS. Vous pouvez utiliser le modèle de base en utilisant Yeti Launch ou en utilisant Foundation CLI à l'aide de la commande suivante -

$ foundation new --framework sites --template basic

Pour configurer cela, exécutez d'abord npm install , bower install et utilisez la commande npm start pour l'exécuter. Vous pouvez également télécharger les fichiers modèles à partir du Github .

Modèle ZURB

C'est une combinaison de CSS / SCSS, JavaScript, modèle de guidon, structure de balisage, compression d'image et utilise le traitement SASS. Vous pouvez utiliser le modèle ZURB en utilisant Yeti Launch ou en utilisant Foundation CLI en utilisant la commande ci-dessous -

$ foundation new --framework sites --template zurb

Pour exécuter ce modèle, suivez les mêmes étapes que celles spécifiées dans le modèle de base. Vous pouvez également télécharger les fichiers de modèle à partir du Github .

Copie d'actifs

Vous pouvez copier le contenu dans le dossier src / assets en utilisant Gulp dans lequel les assets seront votre dossier de projet. La chose importante ici est que les fichiers SASS, les fichiers JavaScript et les images ne seront pas soumis à ce processus de copie d'actifs, car ils disposeront de leur propre processus pour copier le contenu.

Compilation de pages

Vous pouvez créer des pages HTML dans trois dossiers à savoir les pages , les mises en page et les partiels qui résident dans le répertoire src / . Vous pouvez utiliser le compilateur de fichiers plats Panini qui crée des mises en page pour les pages à l'aide de modèles, de pages et de partiels HTML. Ce processus peut être effectué à l'aide du langage de création de modèles Handlebars .

Compilation SASS

Vous pouvez compiler le SASS en CSS en utilisant Libsass et le fichier SASS principal sera stocké sous src / assets / scss / app.scss et les partiels SASS nouvellement créés seront stockés dans ce dossier lui-même. La sortie de CSS sera comme le CSS normal, qui est dans le style imbriqué. Vous pouvez compresser le CSS avec clean-css et supprimer le CSS inutilisé de la feuille de style en utilisant UnCSS .

Compilation JavaScript

Les fichiers JavaScript seront stockés dans le dossier src / assets / js avec Foundation et toutes les dépendances sont liées ensemble dans le fichier app.js. Les fichiers seront liés ensemble comme spécifié dans l'ordre ci-dessous -

  • Dépendances de la Fondation.
  • Les fichiers seront stockés dans le dossier src / assets / js .
  • Les fichiers sont regroupés dans un seul fichier appelé app.js .

Compression d'image

Par défaut, toutes les images seront stockées dans le dossier assets / img sous le dossier dist . Vous pouvez compresser les images lors de la construction pour la production à l'aide de gulp-imagemin qui prend en charge les fichiers JPEG, PNG, SVG et GIF.

BrowserSync

Vous pouvez créer un serveur BrowserSync dont les tests de navigateur synchronisés sont disponibles surhttp://localhost:8000et capable de voir les modèles compilés en utilisant cette URL. Pendant que votre serveur est en cours d'exécution, la page s'actualise automatiquement lorsque vous enregistrez le fichier et vous pouvez voir les modifications apportées à la page en temps réel pendant que vous travaillez.

La description

Il comprend les éléments Foundation pour travailler en douceur avec les applications Web. Le tableau suivant répertorie certains des composants Foundation -

N ° Sr. Composant et description
1 Accordéon

Les accordéons contiennent des onglets verticaux qui sont utilisés sur les sites Web pour développer et réduire une grande quantité de données.

2 Menu accordéon

Il affiche le menu pliable avec des effets d'accordéon.

3 Badge

Les badges sont similaires aux étiquettes, qui sont utilisées pour mettre en évidence les informations telles que les notes et les messages importants.

4 Chapelure

Il spécifie l'emplacement actuel d'un site dans la hiérarchie de navigation.

5 Boutons

Foundation prend en charge les boutons standard avec différents styles.

6 Faire appel à

Callout est un élément qui peut être utilisé pour placer le contenu à l'intérieur.

sept Bouton Fermer

Il est utilisé pour fermer la boîte d'alerte.

8 Menu détaillé

Le menu d'exploration modifie les listes imbriquées en menu d'exploration verticale.

9 Menu déroulant

Le menu déroulant est utilisé pour afficher les liens dans un format de liste.

dix Volet déroulant

Le volet déroulant affiche le contenu lorsque vous cliquez sur le bouton.

11 Vidéo Flex

Il est utilisé pour créer des objets vidéo dans les pages Web.

12 Classes de flotteurs

Il est utilisé pour ajouter des classes utilitaires aux éléments HTML.

13 Formes

Il est utilisé pour créer une mise en page de formulaire pour collecter les entrées utilisateur.

14 Étiquette

Les étiquettes sont des styles en ligne, qui définissent une étiquette pour un élément d'entrée.

15 Objet multimédia

Il est utilisé pour ajouter des objets multimédias tels que des images, des vidéos, des commentaires de blog, etc. qui peuvent être placés à gauche ou à droite du bloc de contenu.

16 Menu

Il donne accès à différents modes du site Web.

17 Pagination

C'est un type de navigation qui divise le contenu en une série de pages associées.

18 Glissière

Il spécifie la plage de valeurs en faisant glisser une poignée.

19 Commutateur

Il est utilisé pour basculer entre l'état marche et arrêt.

20 Table

Il représente les données au format lignes et colonnes.

21 Onglets

Il s'agit d'un onglet basé sur la navigation qui affiche le contenu dans différents volets sans quitter la page.

22 La vignette

Il met en forme les images en forme de vignette.

23 Barre de titre

Il est utilisé pour afficher l'écran actuel utilisé par l'utilisateur avec d'autres éléments de menu.

24 Info-bulle

Il s'agit d'une petite fenêtre contextuelle qui décrit les informations lorsque vous passez la souris sur le lien.

25 Barre du haut

Il est utilisé pour créer un en-tête de navigation dans le site Web.

26 Orbite

C'est un curseur simple et puissant qui fait glisser les éléments à l'aide de la classe orbit .

Dans ce chapitre, nous étudierons les styles globaux . Le cadre global CSS of Foundation comprend des réinitialisations utiles qui garantissent la cohérence du style entre les navigateurs.

Dimensionnement des polices

La taille de police de la feuille de style du navigateur est définie par défaut sur 100%. La taille de police par défaut est définie sur 16 pixels. En fonction de la taille de la police, la taille de la grille est calculée. Pour avoir une taille de police de base distincte et des points d'arrêt de grille non affectés, définissez $ rem-base sur la valeur $ global-font-size , qui doit être en pixels.

Couleurs

Les éléments interactifs tels que les liens et les boutons utilisent la nuance de bleu par défaut qui provient de la variable SASS $ primary-color . Les composants peuvent également avoir des couleurs telles que: secondaire, alerte, succès et avertissement . Pour plus d'informations, cliquez ici .

Référence SASS

Variables

Le tableau suivant répertorie les variables SASS, qui sont utilisées pour personnaliser les styles par défaut des composants de votre projet _settings.scss .

N ° Sr. Nom et description Type Valeur par défaut
1

$global-width

Il représente la largeur globale du site. Utilisé pour déterminer la largeur de ligne de la grille.

Nombre rem-calc (1200)
2

$global-font-size

Il représente la taille de police appliquée à <html> et <body> . Il est défini à 100% par défaut et la valeur des paramètres du navigateur de l'utilisateur sera héritée.

Nombre 100%
3

$global-lineheight

Il représente tous les types de hauteur de ligne par défaut. $ global-lineheight est 24px tandis que $ global-font-size est défini sur 16px.

Nombre 1,5
4

$primary-color

Il donne de la couleur aux composants interactifs tels que les liens et les boutons.

Couleur # 2199e8
5

$secondary-color

Il est utilisé avec des composants prenant en charge la classe .secondary .

Couleur # 777
6

$success-color

Il représente l'état positif ou l'action lorsqu'il est utilisé avec la classe .success .

Couleur # 3adb76
sept

$warning-color

Il représente un état ou une action d'avertissement lorsqu'il est utilisé avec la classe .warning .

Couleur # ffae00
8

$alert-color

Il représente un statut ou une action négatif lorsqu'il est utilisé avec la classe .alert .

Couleur # ec5840
9

$light-gray

Il est utilisé pour les éléments d'interface utilisateur gris clair.

Couleur # e6e6e6
dix

$medium-gray

Il est utilisé pour les éléments d'interface utilisateur gris moyen.

Couleur #cacaca
11

$dark-gray

Il est utilisé pour les éléments d'interface utilisateur gris foncé.

Couleur # 8a8a8a
12

$black

Il est utilisé pour les éléments noirs de l'interface utilisateur.

Couleur # 0a0a0a
13

$white

Il est utilisé pour les éléments blancs de l'interface utilisateur.

Couleur #fefefe
14

$body-background

Il représente la couleur de fond du corps.

Couleur $ blanc
15

$body-font-color

Il représente la couleur du texte du corps.

Couleur $ noir
16

$body-font-family

Il représente la liste des polices du corps.

liste 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17

$body-antialiased

Le type anti-crénelé est activé en définissant cet attribut sur true à l'aide des propriétés CSS -webkit-font-smoothing et -moz-osx-font-smoothing .

Booléen vrai
18

$global-margin

Il représente la valeur de la marge globale sur les composants.

Nombre 1rem
19

$global-padding

Il représente la valeur de remplissage globale sur les composants.

Nombre 1rem
20

$global-margin

Il représente la valeur de marge globale utilisée entre les composants.

Nombre 1rem
21

$global-weight-normal

Il représente l'épaisseur de police globale pour le type normal.

Mot-clé ou numéro Ordinaire
22

$global-weight-bold

Il représente l'épaisseur de police globale pour les caractères gras.

Mot-clé ou numéro audacieux
23

$global-radius

Il représente la valeur globale de tous les éléments qui ont un rayon de bordure.

Nombre 0
24

$global-text-direction

Il définit la direction du texte du CSS sur ltr ou rtl

ltr

SASS aide à rendre le code plus flexible et personnalisable dans Foundation.

Compatibilité

Pour installer la version basée sur SASS pour la fondation, Ruby doit être installé sur Windows. Foundation peut être compilé avec Ruby SASS et libsass. Nous recommandonsnode-sass 3.4.2+ version pour compiler SASS.

Préfixeur automatique requis

L'autoprefixer gère les fichiers SASS. gulp-autoprefixer est utilisé pour construire le processus. Le paramètre de préfixe automatique suivant est utilisé pour obtenir une prise en charge appropriée du navigateur.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Chargement du framework

Nous pouvons installer les fichiers du framework en utilisant NPM. En utilisant l'interface de ligne de commande (CLI), nous pouvons compiler les fichiers Sass. Voici la commande pour charger le framework -

npm install foundation-sites --save

Après avoir exécuté le code de ligne de commande ci-dessus, vous obtiendrez les lignes suivantes -

Compilation manuelle

Les fichiers de structure peuvent être ajoutés en tant que chemin d'importation en fonction de votre processus de construction, mais le chemin sera le même dossier_packages / foundation-sites / scss . L' instruction @import est incluse en haut du fichier foundation-sites.scss . La ligne suivante dans le code donné est expliquée dans leAdjusting CSS Output section.

@import 'foundation';
@include foundation-everything;

Utilisation du CSS compilé

Vous pouvez inclure les fichiers CSS précompilés. Il existe deux types de fichiers CSS, à savoir minifiés et non minifiés. La version réduite est utilisée pour la production et la version non réduite est utilisée pour éditer directement le cadre CSS.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Ajuster la sortie CSS

Pour divers composants, la sortie Foundation se compose de nombreuses classes. Il est utilisé pour contrôler la sortie CSS du framework. Ajoutez la seule ligne de code suivante pour inclure tous les composants à la fois.

@include foundation-everything;

Voici la liste des composants importés lorsque vous écrivez le code ci-dessus dans votre fichier scss. Les composants qui ne sont pas nécessaires peuvent être commentés. Vous pouvez afficher les lignes de code ci-dessous dans le fichier Your_folder_name / node_modules / foundation-sites / scss / foundation.scss .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

Le fichier de paramètres

Un fichier de paramètres est inclus dans l'ensemble du projet de fondation, c'est-à-dire _settings.scss . Si vous utilisez Yeti Launch ou la CLI pour créer un projet Foundation for Sites, vous pouvez trouver le fichier de paramètres sous src / assets / scss /.

Nous avons installé Foundation en utilisant npm, vous pouvez donc trouver le fichier de paramètres inclus sous your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Vous pouvez le déplacer dans vos propres fichiers Sass pour travailler avec.

Vous pouvez écrire votre propre CSS, si vous ne pouvez pas personnaliser avec des variables. Voici un ensemble de variables qui modifient le style par défaut des boutons.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

Dans ce chapitre, nous étudierons JavaScript . Il est facile de configurer JavaScript dans Foundation; la seule chose dont vous avez besoin est jQuery.

Installation de JavaScript

Vous pouvez utiliser le téléchargement ZIP, le gestionnaire de packages ou le CDN pour obtenir le fichier JavaScript Foundation. Dans votre code, vous pouvez fournir des liens vers jQuery et Foundation sous forme de balises <script>, placées avant le <body> de fermeture et vérifier que Foundation est chargé après jQuery. Pour plus d'informations, cliquez ici .

Structure des fichiers

Lorsque vous installez Foundation via la ligne de commande, les plugins Foundation se téléchargent sous forme de fichiers individuels tels que foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js , etc. Tous ces fichiers sont combinés dans foundation.js , qui fournit tous les plugins en même temps. Si vous souhaitez utiliser un plugin, vous devez d'abord charger foundation.core.js .

Par exemple -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Certains plugins peuvent nécessiter des bibliothèques d'utilitaires particulières, fournies avec l'installation de Foundation. Vous pouvez étudier en détail les exigences spécifiques des plugins dans le chapitre suivant Utilitaires JavaScript .

Le chargement de fichiers individuels crée une surcharge du réseau, en particulier pour les utilisateurs mobiles. Pour un chargement plus rapide des pages, il est recommandé d'utiliser grunt ou gulp .

Initialisation

La fonction foundation () est utilisée pour initialiser tous les plugins Foundation en même temps.

Par exemple -

(document).foundation();

Utilisation de plugins

À l'aide d'attributs de données, les plugins sont connectés aux éléments HTML car ils correspondent au nom des plugins. Un seul élément HTML ne peut avoir qu'un seul plugin à la fois, bien que la majorité des plugins puissent être imbriqués dans d'autres. Par exemple, le lien d'info-bulle est créé en ajoutant une info-bulle de données . Pour plus d'informations, cliquez ici .

Configurer les plugins

Les plugins peuvent être personnalisés en utilisant ses paramètres de configuration. Par exemple, vous pouvez régler la vitesse des diapositives d' accordéon de haut en bas. Les paramètres du plugin peuvent être modifiés globalement à l'aide du pluginDEFAULTSpropriété. Pour plus d'informations, cliquez ici .

Ajouter des plugins après le chargement de la page

Lorsqu'un nouveau code HTML est ajouté au DOM, aucun des plugins de ces éléments ne sera initialisé par défaut. Vous pouvez rechercher de nouveaux plugins en appelant à nouveau la fonction .foundation () .

Par exemple -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Utilisation programmatique

En JavaScript, les plugins peuvent être créés par programme et chaque plugin est la classe globale de l' objet Foundation , avec un constructeur qui prend deux paramètres tels qu'un élément et un objet.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

La majorité des plugins sont fournis avec une API publique, qui vous permet de la manipuler via JavaScript. Vous pouvez parcourir les documentations du plugin pour étudier les fonctions disponibles et les méthodes peuvent être invoquées facilement.

Par exemple -

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.
  • Vous êtes autorisé à choisir n'importe quel sélecteur jQuery et si le sélecteur contient plusieurs plugins, ils auront tous la même méthode choisie appelée.

  • Les arguments peuvent être passés comme des arguments à JavaScript.

  • Les méthodes précédées d'un trait de soulignement (_) sont considérées comme une partie de l'API interne, ce qui signifie que sans avertissement, elles peuvent casser, changer ou même disparaître.

Événements

Chaque fois qu'une fonction spécifique se termine, DOM déclenche un événement. Par exemple, chaque fois que les onglets sont modifiés, il peut être écouté et créer une réponse de retour. Chaque plugin peut déclencher une liste d'événements, qui seront documentés dans la documentation du plugin. Dans Foundation 6, les plugins de rappel sont supprimés et doivent être considérés comme des écouteurs d'événements.

Par exemple -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation inclut des utilitaires JavaScript utilisés pour ajouter des fonctionnalités communes. C'est très utile et facile à utiliser. Cette bibliothèque d'utilitaires JavaScript se trouve dans le dossier Your_folder_name / node_modules / foundation-sites / js

Boîte

  • La bibliothèque Foundation.Box se compose de deux méthodes.

  • le js/foundation.util.box.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Les objets jQuery ou les éléments JavaScript simples peuvent être passés aux deux méthodes.

var dims = Foundation.Box.GetDimensions(element);

L'objet retourné spécifie la dimension de l' élément comme -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}
  • La fonction ImNotTouchingYou est incluse.

  • En fonction de l'élément passé, une valeur booléenne est renvoyée, qui est soit un conflit avec le bord de la fenêtre, soit facultative ou un élément parent.

  • Les deux options spécifiées dans la ligne ci-dessous à savoir leftAndRightOnly, topAndBottomOnly sont utilisées pour identifier la collision sur un seul axe.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Clavier

  • Il existe de nombreuses méthodes dans Foundation.Keyboard , qui facilitent l'interaction entre les événements du clavier.

  • le js/foundation.util.keyboard.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • L'objet Foundation.Keyboard.keys se compose de paires clé / valeur, qui sont utilisées plus fréquemment dans le framework.

  • Chaque fois que la touche est enfoncée, Foundation.Keyboard.parseKey est appelée pour obtenir une chaîne. Cela permet de gérer vos propres entrées clavier.

Le code suivant est utilisé pour trouver tous les éléments focalisables dans l' élément $ donné . Par conséquent, il n'est pas nécessaire d'écrire une fonction et un sélecteur de votre part.

var focusable = Foundation.Keyboard.findFocusable($('#content'));
  • La fonction handleKey est une fonction principale de cette bibliothèque.

  • Cette méthode est utilisée pour gérer l'événement de clavier; il peut être appelé chaque fois qu'un plugin est enregistré auprès de l'utilitaire.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

La fonction Foundation.Keyboard.register peut être appelée lorsque vous souhaitez utiliser vos propres raccourcis clavier.

MediaQuery

  • La bibliothèque MediaQuery est l'épine dorsale de toute technique CSS réactive.

  • le js/foundation.util.mediaQuery.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Le Foundation.MediaQuery.atLeast ('large') est utilisé pour vérifier si l'écran est au moins aussi large qu'un point d'arrêt.

  • Le Foundation.MediaQuery.get ('medium') obtient la requête multimédia d'un point d'arrêt.

  • Les Foundation.MediaQuery.queries sont un ensemble de requêtes de médias, Fondation utilise pour les points d' arrêt.

  • Le Foundation.MediaQuery.current est une chaîne de la taille du point d' arrêt en cours.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

Le code suivant diffuse la modification de la requête multimédia dans la fenêtre.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Mouvement et déplacement

  • Le javascript Foundation.Motion est similaire à la bibliothèque Motion UI, qui est incluse dans Foundation 6. Il est utilisé pour créer des transitions et des animations CSS personnalisées.

  • le js/foundation.util.motion.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Foundation.Move est utilisé pour rendre les animations basées sur CSS3 simples et élégantes.

  • requestAnimationFrame();la méthode indique au navigateur d'effectuer une animation; il demande que votre fonction d'animation soit appelée avant que le navigateur n'effectue la prochaine peinture.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Lorsque l'animation est terminée, finish.zf.animate est déclenché.

Minuterie et images chargées

Orbit utilise à la fois la fonction minuterie et l'image chargée. lejs/foundation.util.timerAndImageLoader.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

La méthode chargée en image exécute une fonction de rappel dans votre collection jQuery lorsque les images sont complètement chargées.

Foundation.onImagesLoaded($images, callback);

Toucher

  • Les méthodes sont utilisées pour ajouter des pseudo événements de glissement et faire glisser les éléments.

  • le js/foundation.util.touch.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • La méthode addTouch est utilisée pour lier des éléments aux événements tactiles dans le plugin Slider pour les appareils mobiles.

  • La méthode spotSwipe lie les éléments pour faire glisser les événements dans le plug-in Orbit pour les appareils mobiles.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Déclencheurs

  • Il déclenche l'événement spécifié pour les éléments sélectionnés.

  • le js/foundation.util.triggers.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Les déclencheurs sont utilisés dans de nombreux plugins Foundation.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

Les deux méthodes suivantes sont utilisées dans cette bibliothèque à savoir redimensionner et faire défiler.

  • La méthode resize () déclenche l'événement resize lorsqu'un événement resize se produit.

  • La méthode scroll () déclenche l'événement scroll lorsqu'un événement scroll se produit.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Divers

  • Foundation contient peu de fonctionnalités dans la bibliothèque principale, qui sont utilisées dans de nombreux endroits.

  • le js/foundation.core.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Foundation.GetYoDigits ([number, namespace]) renvoie un uid aléatoire de base 36 avec espace de noms. Il renvoie la longueur de chaîne de 6 caractères par défaut.

  • Foundation.getFnName (fn) renvoie un nom de fonction JavaScript.

  • Foundation.transitionend se produit lorsque la transition CSS est terminée.

Les requêtes multimédias sont des modules CSS3 qui incluent des fonctionnalités multimédias telles que la largeur, la hauteur, la couleur et affichent le contenu selon la résolution d'écran spécifiée.

Foundation utilise les requêtes multimédias suivantes pour créer des plages de répartition:

  • Small - Utilisé pour n'importe quel écran.

  • Medium - Il est utilisé pour les écrans de 640 pixels et plus larges.

  • Large - Il est utilisé pour les écrans de 1024 pixels et plus.

Vous pouvez modifier la taille de l'écran à l'aide des classes de points d'arrêt . Par exemple, vous pouvez utiliser la classe .small-6 pour les écrans de petite taille et la classe .medium-4 pour les écrans de taille moyenne, comme illustré dans l'extrait de code suivant -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Modification des points d'arrêt

Vous pouvez modifier les points d'arrêt si votre application utilise la version SASS de Foundation. Vous pouvez placer le nom des points d'arrêt sous la variable $ breakpoints dans le fichier de paramètres comme indiqué ci-dessous -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Vous pouvez modifier les classes de points d'arrêt dans le fichier de paramètres en modifiant la variable $ breakpoint-classes . Si vous souhaitez utiliser la classe .large dans le CSS, ajoutez-la à la fin de la liste comme indiqué ci-dessous -

$breakpoints-classes: (small medium large);

Supposons que vous souhaitiez utiliser la classe .xlarge dans le CSS, puis ajouter cette classe à la fin de la liste comme indiqué ci-dessous -

$breakpoints-classes: (small medium large xlarge);

TOUPET

Le Mixin Breakpoint

  • Vous pouvez écrire les requêtes multimédias en utilisant mixin breakpoint () avec @include .

  • Utilisez les mots clés down ou only avec la valeur du point d'arrêt pour modifier le comportement de la requête multimédia comme indiqué dans le format de code suivant -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

Vous pouvez utiliser trois requêtes multimédias portrait , paysage et rétine pour l'orientation de l'appareil ou la densité de pixels et ce ne sont pas des requêtes multimédias basées sur la largeur.

Fonction de point d'arrêt

  • Vous pouvez utiliser la fonctionnalité de mixin breakpoint () en utilisant la fonction interne.

  • La fonctionnalité breakpoint () peut être utilisée directement pour écrire ses propres requêtes multimédias -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Utilisation des requêtes multimédias

  • Le JavaScript Foundation fournit la fonction MediaQuery.current pour accéder au nom du point d'arrêt actuel sur l' objet Foundation.MediaQuery comme spécifié ci-dessous -

Foundation.MediaQuery.current
  • La fonction MediaQuery.current affiche petits , moyens , grands comme noms de points d'arrêt actuels.

  • Vous pouvez obtenir la requête multimédia du point d'arrêt à l'aide de la fonction MediaQuery.get comme indiqué ci-dessous -

Foundation.MediaQuery.get('small')

Référence Sass

Variables

Le tableau suivant répertorie les variables SASS, qui peuvent être utilisées pour personnaliser les styles par défaut du composant -

N ° Sr. Nom et description Type Valeur par défaut
1

$breakpoints

C'est un nom de point d'arrêt qui peut être utilisé pour écrire les requêtes multimédias en utilisant breakpoint () mixin.

Carte

petit: 0px

moyen: 640px

grand: 1024 px

xlarge: 1 200 px

xxlarge: 1440px

2

$breakpoint-classes

Vous pouvez changer la sortie de la classe CSS en modifiant la variable $ breakpoint-classes .

liste petit moyen grand

Mixins

Mixins crée un groupe de styles pour créer votre structure de classe CSS pour les composants Foundation.

BREAKPOINT

Il utilise breakpoint () mixin pour créer des requêtes multimédias et inclut les activités suivantes -

  • Si string est passé, alors mixin recherche la chaîne dans la carte $ breakpoints et crée la requête multimédia.

  • Si vous utilisez une valeur de pixel, convertissez-la en valeur em en utilisant $ rem-base .

  • Si la valeur rem est transmise, alors il change son unité en em.

  • Si vous utilisez la valeur em, elle peut être utilisée telle quelle.

Le tableau suivant spécifie le paramètre utilisé par le point d'arrêt -

N ° Sr. Nom et description Type Valeur par défaut
1

$value

Il traite les valeurs en utilisant les valeurs de nom de point d'arrêt, px, rem ou em.

mot-clé ou numéro Aucun

Les fonctions

BREAKPOINT

Il utilise breakpoint () mixin pour créer des requêtes multimédias avec une valeur d'entrée correspondante.

Le tableau suivant spécifie la valeur d'entrée possible utilisée par le point d'arrêt -

N ° Sr. Nom et description Type Valeur par défaut
1

$val

Il traite les valeurs en utilisant les valeurs de nom de point d'arrêt, px, rem ou em.

mot-clé ou numéro petit

Référence JavaScript

Les fonctions

Il existe deux types de fonctions -

  • .atLeast- Il vérifie l'écran. Il doit être large au moins comme point d'arrêt.

  • .get - Il est utilisé pour obtenir la requête multimédia du point d'arrêt.

Le tableau suivant spécifie le paramètre utilisé par les fonctions ci-dessus -

N ° Sr. Nom et description Type
1

size

Il vérifie et obtient le nom du point d'arrêt pour les fonctions spécifiées respectivement.

Chaîne

La description

Le système de grille de fondation met à l'échelle jusqu'à 12 colonnes sur la page. Les systèmes de grille sont utilisés pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu.

Options de grille

Le tableau suivant explique brièvement comment le système de grille Foundation fonctionne sur plusieurs appareils.

Petits appareils Téléphones (<640px) Appareils moyens Tablettes (> = 640px) Ordinateurs portables et ordinateurs de bureau de grande taille (> = 1200 px)
Comportement de la grille Horizontal à tout moment Réduit au début, horizontal au-dessus des points d'arrêt Réduit au début, horizontal au-dessus des points d'arrêt
Préfixe de classe .petit-* .moyen-* .grand-*
Le nombre de colonnes 12 12 12
Emboîtable Oui Oui Oui
Décalages Oui Oui Oui
Ordre des colonnes Oui Oui Oui

Structure de base d'une grille de fondation

Voici la structure de base d'une grille de fondation -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>
  • Tout d'abord, créez une classe de lignes pour créer des groupes horizontaux de colonnes.

  • Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être les enfants immédiats des lignes.

  • Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez couvrir. Par exemple, pour quatre colonnes égales, nous utiliserions .large-3

Voici les trois classes utilisées dans le système de grille Foundation -

N ° Sr. Classes de base de la grille et description
1 Grand

Les grandes classes * sont utilisées pour les gros périphériques.

2 Moyen

La classe moyenne- * est utilisée pour les périphériques moyens.

3 Petit

small- * class est utilisé pour les petits appareils.

Grille avancée

Voici les formats de grille avancés utilisés dans Foundation.

N ° Sr. Grilles avancées et description
1 Colonne / ligne combinée

Les classes de colonne et de ligne sont utilisées sur le même élément pour obtenir la colonne pleine largeur à utiliser comme conteneur.

2 Nesting

Nous pouvons imbriquer les colonnes de la grille dans une autre colonne.

3 Décalages

En utilisant la classe large-offset- * ou small-offset- * , vous pouvez déplacer les colonnes vers la droite.

4 Lignes incomplètes

Foundation fait flotter automatiquement le dernier élément vers la droite lorsque les lignes n'incluent pas de colonnes jusqu'à 12.

5 Réduire / Annuler la réduction des lignes

En utilisant la taille de la requête multimédia, les classes de réduction et de réduction sont incluses dans l'élément de ligne pour afficher les remplissages.

6 Colonnes centrées

En incluant la classe small-centrée dans la colonne, vous pouvez créer la colonne au centre.

sept Ordre des sources

La classe de classement source est utilisée pour déplacer les colonnes entre les points d'arrêt.

8 Grilles de blocs

Block-grid est utilisé pour diviser le contenu.

Construire sémantiquement

En utilisant l'ensemble des mixins SASS, une grille CSS est générée qui est utilisée pour construire votre propre grille sémantique. Pour plus d'informations cliquez ici

Référence SASS

Voici la référence SASS pour la grille utilisée dans Foundation.

N ° Sr. Grilles de base et description
1 Variables

En utilisant les variables sass, nous pouvons modifier les styles par défaut de ce composant.

2 Mixins

La sortie CSS finale est construite à l'aide du mixin.

La grille dépend de la propriété d'affichage flexible . Il se compose d'un certain nombre de fonctionnalités disponibles avec la flexbox, telles que l'empilement automatique, l'ordre des sources, l'alignement vertical et l'alignement horizontal.

Prise en charge du navigateur

La grille flexible est prise en charge dans Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ et iOS 7+.

Le tableau suivant décrit les fonctionnalités de Flex Grid ainsi que la description.

N ° Sr. Caractéristiques et description
1 Importation

Il inclut le mixin d'exportation pour que la grille flexible utilise le CSS par défaut.

2 Basiques

La structure de la grille Flex est similaire à celle de la grille flottante.

3 Dimensionnement avancé

Si la classe de dimensionnement n'est pas incluse dans la colonne, elle se développe d'elle-même et remplit l'espace restant dans la colonne.

4 Ajustements réactifs

Si la taille explicite de la colonne dans la grille flexible n'est pas donnée, il redimensionnera automatiquement les colonnes

5 Alignement des colonnes

Les colonnes de la grille flexible peuvent être alignées sur l'axe horizontal ou vertical dans la ligne parent.

6 Ordre des sources

L'ordre des sources permet de réorganiser la colonne en différentes tailles d'écrans.

sept Référence Sass

SASS (Syntactically Awesome Stylesheet) est un pré-processeur CSS qui permet de réduire les répétitions avec CSS et de gagner du temps.

Dans ce chapitre, nous étudierons Forms. Foundation fournit un système de mise en page puissant, simple et polyvalent pour Forms , qui combine les styles de formulaire et la prise en charge de la grille.

Le tableau suivant répertorie les éléments de formulaire utilisés dans Foundation.

N ° Sr. Élément de formulaire et description
1 Principes de base du formulaire

La création de formulaires est facile et très flexible, qui sont construits avec une combinaison d'éléments de formulaire standardisés et un système de grille puissant.

2 Texte d'aide

Il est utilisé pour informer l'utilisateur de l'objectif de l'élément et est généralement placé sous un champ.

3 Positionnement des étiquettes

Vous pouvez positionner vos étiquettes à gauche ou à droite de vos entrées.

4 Étiquettes et boutons intégrés

Du texte ou des contrôles supplémentaires peuvent être attachés à gauche / droite d'un champ de saisie.

5 Contrôles personnalisés

Les commandes personnalisées telles que les sélecteurs de dates, les commutateurs ou les curseurs nécessitent une certaine attention pour y accéder.

6 Référence SASS

Vous pouvez modifier les styles des composants à l'aide de la référence SASS.

La description

  • Foundation utilise des classes de visibilité pour afficher ou masquer des éléments en fonction de l'orientation de l'appareil (portrait et paysage) ou de la taille de l'écran (petit, moyen, grand ou très grand écran).

  • Il permet à un utilisateur d'utiliser des éléments basés sur l'environnement de navigation.

Le tableau suivant répertorie les classes de visibilité de Foundation, qui contrôlent les éléments en fonction de leur environnement de navigation -

N ° Sr. Classe de visibilité et description
1 Afficher par taille d'écran

Il montre les éléments basés sur l'appareil en utilisant la classe .show .

2 Masquer par taille d'écran

Il masque les éléments basés sur l'appareil à l'aide de la classe .hide .

Foundation prend en charge certaines classes dans lesquelles vous pouvez masquer le contenu à l'aide des classes .hide et .invisible et n'affiche rien sur la page.

Détection d'orientation

Les appareils peuvent déterminer différentes orientations en utilisant les fonctionnalités paysage et portrait . Les appareils portables tels que les téléphones portables spécifient les différentes orientations lorsque vous les faites pivoter. Pour le bureau, l'orientation sera toujours paysage.

Accessibilité

Le tableau suivant répertorie les techniques d'accessibilité pour les lecteurs d'écran qui masquent le contenu tout en le rendant lisible par les lecteurs d'écran -

N ° Sr. Classe d'accessibilité et description
1 Afficher pour les lecteurs d'écran

Il utilise la classe show-for-sr pour masquer le contenu tout en empêchant les lecteurs d'écran de le lire.

2 Masquer pour les lecteurs d'écran

Il utilise l' attribut masqué aria qui rend le texte visible mais ne peut pas être lu par un lecteur d'écran.

3 Création de liens de saut

Le lecteur d'écran créera un lien de saut pour accéder au contenu de votre site.

Référence Sass

Foundation utilise les mixins suivants pour afficher la sortie CSS, ce qui permet de créer sa propre structure de classe pour vos composants -

N ° Sr. Mixin et description Paramètre Type
1

show-for

Par défaut, il masque un élément et l'affiche au-dessus d'une certaine taille d'écran.

$ taille Mot-clé
2

show-for-only

Par défaut, il masque un élément et l'affiche dans le point d'arrêt.

$ taille Mot-clé
3

hide-for

Par défaut, il affiche un élément et le cache au-dessus d'une certaine taille d'écran.

$ taille Mot-clé
4

hide-for-only

Par défaut, il affiche un élément et le cache au-dessus d'une certaine taille d'écran.

$ taille Mot-clé

La valeur par défaut de tous ces mixins sera définie sur aucun .

La description

La typographie dans Foundation définit des en-têtes, des paragraphes, des listes et d'autres éléments en ligne qui créent des styles par défaut attrayants et simples pour les éléments.

Le tableau suivant répertorie les différents types de typographie utilisés dans Foundation -

N ° Sr. Typographie et description
1 Les paragraphes

Le paragraphe est un groupe de phrases définies avec une taille de police différente, des mots en surbrillance, une hauteur de ligne, etc.

2 Entête

Il définit les en-têtes HTML de h1 à h6.

3 Liens

Il crée un lien hypertexte qui ouvre un autre document lorsque vous cliquez sur le texte ou une image.

4 Diviseurs

Il est utilisé pour donner une pause entre les sections en utilisant la balise <hr>.

5 Listes ordonnées et non ordonnées

Foundation prend en charge les listes ordonnées, les listes non ordonnées pour lister les choses.

6 Listes de définitions

Les listes de définitions sont utilisées pour afficher les paires de valeurs de nom.

sept Blockquotes

Il représente un bloc de texte, qui définit beaucoup plus grand que la normale.

8 Abréviations et code

L'abréviation définit un terme raccourci de mot ou de phrase et le code représente un morceau de code.

9 Frappes

Il est utilisé pour exécuter une fonction spécifique.

dix Accessibilité

Foundation fournit quelques lignes directrices pour accéder au contenu de la page.

Référence Sass

Vous pouvez modifier les styles des composants à l'aide des variables SASS suivantes, comme indiqué dans le tableau.

N ° Sr. Nom et description Type Valeur par défaut
1

$header-font-family

Spécifie la famille de polices pour les éléments d'en-tête.

Chaîne ou liste $ body-font-family
2

$header-font-weight

Spécifie l'épaisseur de la police des en-têtes.

Chaîne $ global-poids-normal
3

$header-font-style

Fournit le style de police des en-têtes.

Chaîne Ordinaire
4

$font-family-monospace

Pile de polices utilisée pour les éléments qui utilisent un type à espacement fixe, tels que des exemples de code.

Chaîne ou liste Consolas, 'Liberation Mono', Courier, monospace
5

$header-sizes

Définit les tailles d'écran des en-têtes et chaque clé est un point d'arrêt, et chaque valeur est une carte des tailles de titre.

Carte
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
6

$header-color

Fournit la couleur des en-têtes.

Couleur hériter
sept

$header-lineheight

Définit la hauteur de ligne des en-têtes.

Nombre 1,4
8

$header-margin-bottom

Fournit la marge inférieure des en-têtes.

Nombre 0,5rem
9

$header-text-rendering

Définit la méthode de rendu du texte.

Chaîne optimiserLégibilité
dix

$small-font-size

Spécifie la taille de la police pour les éléments <petits>.

Nombre 80%
11

$paragraph-margin-bottom

Spécifie la marge inférieure des paragraphes.

Nombre 1rem
12

$paragraph-text-rendering

Méthodes de rendu de texte de paragraphe.

Chaîne optimiserLégibilité
13

$code-color

Fournit la couleur du texte aux échantillons de code.

Couleur $ noir
14

$code-font-family

Fournit la famille de polices aux exemples de code.

Chaîne ou liste $ font-family-monospace
15

$code-border

Spécifie la bordure autour du code.

liste 1px uni $ gris moyen
16

$code-padding

Spécifie le remplissage autour du texte.

Numéro ou liste rem-calc (2 5 1)
17

$anchor-color

Couleur par défaut des liens.

Couleur $ couleur primaire
18

$anchor-color-hover

Spécifie la couleur par défaut des liens au survol.

Couleur scale-color ($ anchor-color, $ lightness: -14%)
19

$anchor-text-decoration

Décoration de texte par défaut pour les liens.

Chaîne aucun
20

$anchor-text-decoration-hover

Décoration de texte par défaut pour les liens au survol.

Chaîne aucun
21

$hr-width

Définit la largeur maximale d'un séparateur.

Nombre $ largeur-globale
22

$hr-border

Spécifie la bordure par défaut d'un séparateur.

liste 1px uni $ gris moyen
23

$hr-margin

Marge par défaut pour un diviseur.

Numéro ou liste rem-calc (20) automatique
24

$list-lineheight

Il définit la hauteur de ligne pour les éléments d'une liste.

Nombre $ paragraph-lineheight
25

$list-style-type

Fournit un type de puce pour les listes non ordonnées.

Chaîne disque
26

$list-style-position

Il définit le positionnement des puces sur des listes non ordonnées.

Chaîne à l'extérieur
27

$list-side-margin

Définit la marge du côté gauche (ou droit).

Nombre 1,25rem
28

$defnlist-term-weight

Fournit l'épaisseur de la police pour les éléments <dt>.

Chaîne $ global-weight-bold
29

$defnlist-term-margin-bottom

Fournit un espacement entre les éléments <dt> et <dd>.

Nombre 0,3rem
30

$blockquote-color

Il applique la couleur du texte des éléments <blockquote>.

Couleur $ gris foncé
31

$blockquote-padding

Fournit un remplissage à l'intérieur d'un élément <blockquote>.

Numéro ou liste rem-calc (9 20 0 19)
32

$blockquote-border

Il donne une bordure latérale pour les éléments <blockquote>.

liste 1px uni $ gris moyen
33

$cite-font-size

Définit la taille de la police pour les éléments <cite>.

Nombre rem-calc (13)
34

$cite-color

Fournit la couleur du texte pour les <cite>éléments.

Couleur $ gris foncé
35

$keystroke-font

Définit la famille de polices pour les éléments <kbd>.

Chaîne ou liste $ font-family-monospace
36

$keystroke-color

Définit la couleur du texte pour les éléments <kbd>.

Couleur $ noir
37

$keystroke-background

Fournit une couleur d'arrière-plan pour les éléments <kbd>.

Couleur $ gris clair
38

$keystroke-padding

Spécifie le remplissage pour les éléments <kbd>.

Numéro ou liste rem-calc (2 4 0)
39

$keystroke-radius

Affiche le rayon de la bordure des éléments <kbd>.

Numéro ou liste $ global-radius
40

$abbr-underline

Fournit le style de bordure inférieure pour les éléments <abbr>.

liste 1px pointillé $ noir

Dans ce chapitre, nous étudierons Typography Helpers. Les aides à la typographie sont utilisées pour formater votre texte de manière sémantiquement pertinente. Les classes d'assistance de Foundation vous permettent de créer plus rapidement certains styles typographiques.

Le tableau suivant répertorie les assistants de typographie , qui sont utilisés dans Foundation.

N ° Sr. Aide à la typographie et description
1 Alignement du texte

Cela aide à changer l'alignement du texte de l'élément comme à gauche , à droite , au centre et à justifier .

2 Sous-titre

Des sous-en-têtes peuvent être ajoutés à n'importe quel élément d'en-tête à l'aide de la classe .subheader .

3 Paragraphe principal

C'est un bloc de texte considérablement plus grand par rapport au texte normal, qui peut être utilisé pour la publicité ou tout autre texte descriptif.

4 Liste sans puces

Par défaut, <ul> est une liste à puces dans Foundation. Pour supprimer les puces, vous pouvez utiliser la classe .no-bullet .

5 Statistiques

Chaque fois que vous traitez avec un tableau de bord, vous devez mettre en évidence certains chiffres importants. Vous pouvez y parvenir en utilisant la classe .stat .

Référence Sass

Variables

Le tableau suivant répertorie les variables SASS dans le fichier de paramètres du projet qui permettent de personnaliser les styles par défaut du composant.

N ° Sr. Nom et description Type Valeur par défaut
1

$lead-font-size

Taille de police pour les paragraphes principaux par défaut.

Nombre $ global-font-size * 1,25
2

$lead-lineheight

Hauteur de ligne pour le paragraphe principal par défaut.

Chaîne 1,6
3

$subheader-lineheight

Hauteur de ligne par défaut du sous-en-tête.

Nombre 1,4
4

$subheader-color

Couleur de police par défaut du sous-en-tête.

Couleur $ gris foncé
5

$subheader-font-weight

Épaisseur de police par défaut du sous-en-tête.

Chaîne $ global-poids-normal
6

$subheader-margin-top

Marge supérieure par défaut du sous-en-tête.

Nombre 0,2rem
sept

$subheader-margin-bottom

Marge inférieure par défaut du sous-en-tête.

Nombre 0,5rem
8

$stat-font-size

Taille de police par défaut du numéro statique

Nombre 2,5rem

Dans ce chapitre, nous étudierons basic controls. Foundation fournit des commandes de base telles que des boutons , des curseurs et des commutateurs .

Le tableau suivant répertorie les commandes de base utilisées dans Foundation.

N ° Sr. Contrôle de base et description
1 Bouton

Foundation prend en charge de nombreux styles de boutons qui peuvent être personnalisés en fonction de vos besoins.

2 Groupe de boutons

Ce sont des conteneurs pour les éléments d'action correspondants. Cela fonctionne très bien lorsqu'un groupe d'actions est affiché dans une barre.

3 Bouton Fermer

Le bouton Fermer est utilisé lorsque vous voulez que quelque chose disparaisse en cliquant dessus.

4 Glissière

Les curseurs sont très utiles pour définir certaines valeurs dans une plage.

5 Commutateur

Il vous permet d'éteindre ou d'activer l'interrupteur en cliquant dessus.

La description

Foundation propose quelques options différentes pour styliser les éléments de navigation. De nombreux modèles de navigation simples sont regroupés; il peut être intégré sous la forme d'une solution de navigation robuste et réactive.

Le tableau suivant décrit les différents types de navigation avec la description.

N ° Sr. Type et description
1 Aperçu de la navigation

La navigation contient des liens vers l'autre section et se compose de nombreux modèles de navigation.

2 Menu

Le menu est utilisé pour créer de nombreux composants de navigation.

3 Menu déroulant

Le plugin de menu déroulant est utilisé pour créer des sous-menus sous le menu principal.

4 Menu détaillé

Le plugin de menu d'exploration est utilisé pour créer des sous-menus dans le menu principal au format curseur.

5 Menu accordéon

Il affiche le menu pliable avec des effets d'accordéon et prend en charge la réduction automatique à l'aide du plugin Accordion Menu.

6 Barre du haut

La barre supérieure permet d'afficher facilement la barre de navigation complexe sur différentes tailles d'écran.

sept Navigation réactive

Le plugin de menu réactif alloue le menu dans différentes tailles d'écran.

8 Magellan

Magellan crée une navigation, qui est dans une position fixe; il suit automatiquement la liste de navigation sur une page, en fonction de la position de défilement.

9 Pagination

Pagination, une liste non ordonnée est gérée par Bootstrap comme beaucoup d'autres éléments d'interface.

dix Chapelure

Un fil d'Ariane spécifie l'emplacement actuel d'un site dans la hiérarchie de navigation.

Les conteneurs Foundation sont utilisés pour créer à tout moment la pleine largeur des navigateurs pour le site et envelopper le contenu du site.

Le tableau suivant répertorie certains des conteneurs utilisés dans Foundation -

N ° Sr. Conteneur et description
1 Accordéon

Les accordéons contiennent des onglets verticaux qui sont utilisés sur les sites Web pour développer et réduire une grande quantité de données.

2 Faire appel à

Il place le contenu à l'intérieur du composant.

3 Volets déroulants

Il affiche le contenu lorsque vous cliquez sur le bouton.

4 Objet multimédia

Il ajoute des objets multimédias tels que des images, des vidéos, des commentaires de blogs, etc. avec du contenu.

5 Hors toile

Il déclenche le menu de navigation depuis la zone visible et affiche le contenu principal.

6 Révéler-Modal

Foundation permet de créer des boîtes de dialogue modales ou des fenêtres contextuelles à l'aide de la classe de révélation .

sept les tables

Foundation fournit des mises en page pour afficher les données au format tabulaire.

8 Onglets

Il s'agit d'un onglet basé sur la navigation qui affiche le contenu dans différents volets sans quitter la page.

Dans ce chapitre, nous étudierons les médias dans Foundation. The Foundation se compose de plusieurs types de supports tels que Flex Video , Label , orbite , barre de progression et info - bulle . Le tableau suivant répertorie tous les types de supports.

N ° Sr. Type de support et description
1 Vidéo Flex

Il est utilisé pour intégrer des vidéos dans un conteneur vidéo flexible pour conserver le bon rapport hauteur / largeur malgré la taille de l'écran.

2 Étiquette

Il peut être utilisé pour le style en ligne qui peut être mis dans le corps pour appeler une section spécifique ou pour attacher des métadonnées.

3 Orbite

C'est un curseur puissant et réactif, permettant à un utilisateur de glisser sur les appareils à écran tactile.

4 Barre de progression

Il est utilisé pour afficher votre progression et peut être ajouté à vos mises en page.

5 Info-bulles

Il est utilisé pour afficher des informations supplémentaires sur un terme ou une action sur une page.

La description

Plugin est un logiciel qui fournit des fonctionnalités supplémentaires qui n'étaient pas à l'origine complétées par les fonctionnalités de base de Foundation. Les plugins Foundation peuvent être téléchargés pour étendre les fonctionnalités du site. Les plugins sont utilisés pour faciliter votre travail.

Le tableau suivant décrit les différents types de plugins ainsi que leur description.

N ° Sr. Type et description
1 Demeurer

Abide est utilisé dans la bibliothèque de validation de formulaires HTML5 avec une API native utilisant les attributs et modèles requis.

2 Égaliseur

Equalizer est un moyen de créer plusieurs contenus avec des hauteurs égales sur votre page.

3 Échange

Il est utilisé pour charger le contenu réactif en fonction de l'appareil de l'utilisateur.

4 Toggler

Toggle permet de passer d'un réglage à un autre.

5 Gluant

Le plugin Sticky est utilisé pour créer un contenu ou une image constant sur le site Web.

Foundation fournit un ensemble de fonctions utilitaires SASS, qui peuvent être utilisées avec util , couleur , sélecteur , unité , valeur et bien d'autres.

Vous pouvez importer tous les fichiers utilitaires à la fois en utilisant la ligne de code suivante -

@import 'util/util';

Vous pouvez également importer des fichiers utilitaires individuels comme indiqué ci-dessous -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Référence Sass

Vous pouvez modifier les styles des composants à l'aide des fonctions SASS suivantes.

premier plan

Il fournit la couleur de premier plan aux éléments en fonction de la couleur d'arrière-plan. Il utilise le format suivant pour attribuer différents types de paramètres -

foreground($color, $yes, $no, $threshold)

Les paramètres ci-dessus sont spécifiés dans le tableau suivant -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$color

Il vérifie la légèreté de la couleur.

Couleur Aucun
2

$yes

Si la couleur est claire, elle renvoie la couleur $ yes .

Couleur $ noir
3

$no

Si la couleur est foncée, elle renvoie $ no color.

Couleur $ blanc
4

$threshold

Il représente le seuil de la légèreté.

Pourcentage 60%

échelle intelligente

Il apporte une couleur appropriée aux éléments en fonction de sa légèreté. Il utilise le format suivant pour spécifier la couleur appropriée -

smart-scale($color, $scale, $threshold)

Les paramètres donnés ci-dessus sont spécifiés dans le tableau suivant -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$color

Il est utilisé pour mettre à l'échelle la couleur.

Couleur Aucun
2

$scale

Il spécifie le pourcentage à augmenter ou à réduire.

Pourcentage 5%
3

$threshold

Il représente le seuil de la légèreté.

Pourcentage 40%

entrées de texte

Il crée un sélecteur lors de l'utilisation du type d'entrée de texte. Il utilise le format suivant pour spécifier les types d'entrée -

text-inputs($types)

Il utilise le paramètre tel que spécifié dans le tableau suivant -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$types

Il fournit un certain nombre de types d'entrée de texte pour générer un sélecteur.

Couleur -

bande-unité

Il supprime l'unité de la valeur et renvoie uniquement le nombre. Il utilise le format suivant pour supprimer l'unité de la valeur -

strip-unit($num)

Il utilise le paramètre tel que spécifié dans le tableau suivant -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$num

Il spécifie le nombre lorsque vous supprimez l'unité de la valeur.

Couleur Aucun

rem-calc

Il modifie la valeur du pixel pour correspondre aux valeurs rem. Il utilise le format suivant pour convertir les valeurs de pixel en valeurs rem -

rem-calc($values, $base)

Il utilise les paramètres suivants comme spécifié dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$values

Il convertit les valeurs de pixel en valeurs rem et les sépare à l'aide d'espaces. Si vous convertissez une liste séparée par des virgules, placez la liste entre parenthèses.

Numéro ou liste Aucun
2

$base

Il fournit la valeur de base lors de la conversion du pixel en valeur rem. S'il y a une valeur nulle pour la base, alors function utilise la variable $ base-font-size comme base.

Nombre nul

a de la valeur

Il spécifie la valeur si elle n'est pas fausse. Les fausses valeurs incluent null, aucun, 0 ou une liste vide. Il utilise le format suivant pour spécifier la valeur -

has-value($val)

Il utilise le paramètre tel que spécifié dans le tableau suivant -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$val

Il vérifie la valeur spécifiée.

Mixte Aucun

get-side

Il spécifie le côté d'une valeur et définit les valeurs haut / droite / bas / gauche sur le remplissage, la marge, etc. Il utilise le format suivant pour spécifier le côté d'une valeur -

has-value($val)

Il utilise les paramètres suivants comme spécifié dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$val

Il spécifie le côté d'une valeur.

Liste ou numéro Aucun
2

$side

Il détermine de quel côté la valeur (haut / droite / bas / gauche) doit retourner.

Mot-clé Aucun

get-border-value

Il détermine la valeur limite d'un élément. Il utilise le format suivant pour spécifier la valeur de la bordure -

get-border-value($val, $elem)

Il utilise les paramètres suivants comme spécifié dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$val

Il trouve une valeur spécifique de la frontière.

liste Aucun
2

$elem

Il est utilisé pour extraire le composant de bordure.

Mot-clé Aucun

Importation

Il importe le contenu des mixins SASS qui sont placés sous le fichier scss / util / _mixins.scss . Vous pouvez importer les mixins SASS en utilisant la ligne de code suivante -

@import 'util/mixins';

Référence Sass

Vous pouvez modifier les styles des composants à l'aide des fonctions SASS.

Mixins

Vous pouvez utiliser les mixins suivants pour créer la structure de classe CSS pour vos composants.

CSS-TRIANGLE

Il est utilisé pour créer des flèches déroulantes, des pips déroulants et bien d'autres. Il utilise le sélecteur <i> & :: before </i> ou <i> & :: after </i> pour attacher un triangle à un élément existant. Il utilise le format suivant -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Il utilise les paramètres suivants tels que spécifiés dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$triangle-size

Il définit la largeur du triangle.

Nombre Aucun
2

$triangle-color

Il définit la couleur du triangle.

Couleur Aucun
3

$triangle-direction

Il définit la direction du triangle comme vers le haut, la droite, le bas ou la gauche.

Mot-clé Aucun

HAMBURGER

Il est utilisé pour créer une icône de menu avec largeur, hauteur, nombre de barres et couleurs. Il utilise le format suivant -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Il utilise les paramètres suivants tels que spécifiés dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$color

Il définit la couleur de l'icône.

Couleur Aucun
2

$color-hover

Il définit la couleur lorsque vous survolez l'icône.

Couleur Aucun
3

$width

Il définit la largeur de l'icône.

Nombre Aucun
4

$height

Il définit la hauteur de l'icône.

Nombre Aucun
5

$weight

Il définit le poids des barres individuelles dans l'icône.

Nombre Aucun
6

$bars

Il définit le nombre de barres dans l'icône.

Nombre Aucun

BACKGROUND-TRIANGLE

Il est utilisé pour spécifier l'image d'arrière-plan d'un élément. Il utilise le format suivant -

@include background-triangle($color);

Il utilise le paramètre spécifié dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$color

Il définit la couleur du triangle.

Couleur $ noir

CLEARFIX

Ce mixin efface automatiquement les éléments enfants, de sorte qu'il n'y a pas besoin de balisage supplémentaire. Il utilise le format suivant -

@include clearfix;

AUTO-WIDTH

Il dimensionne automatiquement les éléments en fonction du nombre d'éléments présents dans le conteneur. Il utilise le format suivant -

@include auto-width($max, $elem);

Il utilise les paramètres suivants comme spécifié dans le tableau -

N ° Sr. Paramètre et description Type Valeur par défaut
1

$max

Il identifie le nombre maximum d'articles dans le conteneur.

Nombre Aucun
2

$elem

Il utilise une balise pour les sélecteurs frères.

Mot-clé li

DISABLE-MOUSE-OUTLINE

Il est utilisé pour désactiver le contour autour de l'élément lorsqu'il identifie l'action d'entrée de la souris. Il utilise le format suivant -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Il est utilisé pour masquer les éléments et peut être disponible pour les claviers et autres appareils. Il utilise le format suivant -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Il est utilisé pour supprimer les éléments invisibles et inverse la sortie CSS en utilisant le mixin element-invisible () . Il utilise le format suivant -

@include element-invisible-off;

VERTICAL-CENTER

Il est utilisé pour placer les éléments centrés verticalement à l'intérieur de l'élément parent non statique en utilisant le format suivant -

@include vertical-center;

HORIZONTAL-CENTER

Il est utilisé pour placer les éléments centrés horizontalement à l'intérieur de l'élément parent non statique en utilisant le format suivant -

@include horizontal-center;

ABSOLUTE-CENTER

Il est utilisé pour placer les éléments absolument centrés à l'intérieur de l'élément parent non statique en utilisant le format suivant -

@include absolute-center;

Foundation fournit une bibliothèque d'interface utilisateur Motion pour créer des transitions et des animations d'interface utilisateur et est utilisée par les composants Foundation tels que Toggler , Reveal et Orbit .

Installation de Motion UI

Vous pouvez installer la bibliothèque Motion UI dans votre projet en utilisant npm ou bower, comme indiqué dans la ligne de code suivante -

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Vous pouvez ajouter un chemin pour la bibliothèque Motion UI dans la boussole à l'aide de config.rb comme indiqué dans la ligne de code suivante -

add_import_path 'node_modules/motion-ui/src'

Vous pouvez inclure le chemin dans le gulp-sass en utilisant les lignes de code suivantes -

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Importez la bibliothèque Motion UI dans le fichier SASS en utilisant le code suivant -

@import 'motion-ui'

Transitions intégrées

Foundation fournit des effets de transition en utilisant des classes de transition créées par la bibliothèque Motion UI. Créons un exemple simple en utilisant des effets de transition.

Transitions personnalisées

Vous pouvez définir les classes de transition personnalisées à l'aide de la bibliothèque Motion UI. Par exemple, nous allons définir des classes personnalisées pour la transition mui-hinge () , qui fait pivoter l'élément -

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

Animation

Vous pouvez utiliser les effets de transition Motion UI pour créer des animations CSS. Cliquez sur ce lien pour vérifier le fonctionnement de l'animation sur le modal à l'aide de la classe d' animation de données .