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 -

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 .

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 -

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 -

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 -

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 -

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.

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 -

Grille avancée

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

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.

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.

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.

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 -

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 -

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 -

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 -

Référence Sass

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

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
)

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.

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.

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.

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.

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 -

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.

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.

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 -

é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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 .