Construisez des sites Web Superfast avec Foundation 5 [Un guide]
L'utilisation d'une infrastructure frontale peut améliorer votre flux de travail de conception Web de plusieurs façons. Ça peut vous aider à suivre les principes de design modernes telles que l'approche mobile-first, le balisage sémantique et le responsive design. Vous pouvez tirer parti de nombreux éléments CSS et JavaScript prêts à l'emploi et de manière significative accélérer votre processus de développement, libérer plus de temps pour se concentrer sur la conception visuelle et l'expérience utilisateur.
Zurb Foundation 5 est l’un des frameworks frontend les plus puissants du marché. Il est construit logiquement, facile à utiliser et totalement gratuit. Il vous permet d’utiliser un grille CSS flexible cette facilite la création d'une mise en page propre et conviviale. Le framework Foundation est également soumis à de nombreux tests, il prend donc en charge la compatibilité entre navigateurs et entre périphériques.
Dans ce tutoriel je vais vous montrer comment créer un site internet ultra-rapide avec Zurb Foundation 5. Vous pouvez consulter le résultat final sur la page de démonstration.
Je vais créer la mise en page du site Web, la tâche consistant à ajouter des éléments de design subtils vous attend. Le site Web que nous allons créer ensemble dans ce didacticiel réalisera le rêve du concepteur UX moderne: il sera réactif, d’abord mobile, convivial et sémantique..
En raison de la longueur de ce guide, voici les raccourcis pour accéder rapidement à la section souhaitée:
- Téléchargement de Foundation 5
- Comprendre la grille
- Quand utiliser les classes Grand N, Moyen N et Petit N
- Ajout de la barre de menu supérieure
- Remplir la partie principale
- Ajout d'un panneau pour les publications populaires
- Ajout de 3 messages supplémentaires au panneau populaire
- Jeter le CSS
- Ajout de contenu supplémentaire
- Ajout de la pagination
- Remplir la barre latérale
- Le bulletin d'information
- Vidéo Flex
- Le menu de la barre latérale
- Conclusion
1. Téléchargement de Foundation 5
Vous pouvez télécharger Foundation 5 sous 4 formes différentes:
- le code complet
- une version plus légère avec seulement le code essentiel
- une version personnalisée où vous pouvez personnaliser ce dont vous avez besoin et ce qui ne l'est pas
- une version Sass si vous souhaitez définir vos variables et mixins dans SCSS.
Dans ce tutoriel, je choisirai le code complet avec CSS CSS, mais vous pouvez bien sûr choisir d’autres versions si vous souhaitez rationaliser votre site et n’utiliser que ce dont vous avez réellement besoin..
Après avoir téléchargé et décompressé le fichier zip, ouvrez le fichier index.html dans votre navigateur et vous verrez quelque chose comme ceci:
Oui, les développeurs ont inclus des liens pratiques dans le fichier d'index. Vous pouvez le laisser de cette façon et créer un nouveau fichier pour votre prototype avec le nom home.html ou quelque chose de similaire, mais vous n'avez pas vraiment besoin de le conserver car vous pouvez facilement accéder à la documentation de la Fondation à tout moment..
Ouvrez le fichier index.html dans votre éditeur de code préféré et supprimer tout ce qui se trouve à l'intérieur du section, mais avant la fermeture Les règles de style que nous ajoutons à la app.css fichier pour monter notre prototype sont les suivants: Comme Foundation 5 utilise des unités relatives, nous devons utiliser “em”-s ou “rem”-s au lieu de pixels suivre les règles. (Vous pouvez en savoir plus sur les unités CSS: Pixels vs ems vs% ici.) J’ai utilisé l’extension Firebug de Firefox pour déterminer où je devais remplacer les règles CSS de Foundation 5; vous pouvez utiliser n’importe quelle autre extension de navigateur de développement Web si vous le souhaitez.. Ici, dans ce court extrait de code CSS, nous n'avons eu à remplacer le code CSS par défaut de Foundation qu'une seule fois, à la dernière règle (.row .row.popular-main). Voici à quoi ressemble le site de démonstration: En utilisant les mêmes règles qu'auparavant, nous ajouterons un peu plus de contenu à la section principale de la page. Le contenu que nous allons ajouter maintenant sera le Derniers articles avec de petites vignettes. Foundation 5 propose des styles de vignettes préparées et vraiment super cool que nous utiliserons dans cette étape. Foundation Thumbnails utilise un classe CSS pré-construite appelée “th” que nous devons ajouter aux images que nous voulons afficher sous forme de vignettes, comme vous pouvez le voir dans l'extrait de code ci-dessous. Pour chaque dernier message, nous ajoutons une nouvelle ligne sous le panneau populaire avec notre classe CSS personnalisée appelée “dernier message”. Sur la taille de la tablette et du bureau, nous allons afficher une petite vignette en utilisant la classe de vignettes de Foundation à gauche, ainsi que le titre et une courte description à droite. Sur mobile, le titre et la description iront au-dessous de la vignette.. Maintenant j'ai utilisé le “milieu-3 colonnes” et “milieu-9 colonnes” classes pour leur faire diviser l'écran en 1: 3, 25% pour l'image et 75% pour le texte à partir de la taille moyenne. Insérez l'extrait de code suivant trois fois sous le panneau populaire (pour les trois derniers messages). Ici, je viens d’inclure le code d’une ligne Latest Post, car ils utilisent tous le même balisage HTML, seul le contenu diffère. Contenu du dernier message… Notre fichier CSS personnalisé créé à l'étape 4.3, app.css obtient également quelques nouvelles règles de style pour garder les regards de la démo bien rangé. Remarque: Si vous souhaitez ajouter votre propre CSS personnalisé à Foundation, n'oubliez jamais de vérifier, avec un outil de développement Web, où vous devez remplacer les règles par défaut.. Dans l'extrait CSS ci-dessous, nous devons les remplacer dans la première règle (.row .row.latest-post). Dans la deuxième règle, il suffit d'utiliser notre propre sélecteur personnalisé (.latest-post h4). Notre prototype ressemble maintenant à ceci: Dans cette étape, nous allons ajouter une pagination cool sous les derniers messages. Foundation 5 nous donne un coup de main grâce à ses cours de pagination pratiques et prêts à l'emploi. Nous utilisons le même code dans cette étape que vous pouvez trouver dans le “Avancée” section à l'intérieur des docs de la pagination. Voici les derniers messages avec la nouvelle section Pagination: Maintenant que nous sommes prêts avec le contenu principal de notre site de démonstration, il est temps de renseigner la barre latérale droite. La barre latérale droite glisse sous le contenu principal sur les tailles de mobiles et de tablettes.. Vous devez insérer tous les extraits de code dans cette section à l'intérieur du La barre latérale gauche contient un formulaire d'inscription à la newsletter (1), une dernière vidéo (2) et un menu de barre latérale de style accordéon sous le pseudo. “Notre livre de cuisine” (3). À la fin de cette étape, nous serons prêts avec notre démo qui ressemblera à ceci: Pour créer un formulaire dans Foundation 5, vous n'avez rien d'autre à faire. Il vous suffit de placer la grille dans un Balise HTML. Si vous regardez l'extrait de code ci-dessous, vous verrez que nous plaçons le formulaire dans une ligne dans laquelle nous définissons différents sélecteurs CSS pour les 3 grilles: “petit-12”, “moyen-9”, et “grand-12”. Nous avons choisi cette solution car un formulaire de lettre d'informations de 100% de large semble cool sur la taille d'un mobile, mais il est vraiment très gênant sur la taille d'une tablette à mesure qu'elle devient très large. Heureusement, Foundation 5 nous permet d'utiliser “Lignes incomplètes”: il suffit d'ajouter le “fin” class à la définition de classe CSS de la colonne incomplète. Voici donc ce qui va se passer ici: sur la taille du mobile, la barre latérale sera affichée sous le contenu principal avec un formulaire d'inscription à la newsletter qui couvre la totalité de l'écran.. Sur la taille moyenne, la barre latérale restera sous le contenu principal, mais le formulaire de bulletin couvrira seulement 75% de l'écran et les 25% restants resteront vides.. Sur la taille du bureau, la barre latérale se trouvera juste à côté du contenu principal et le formulaire de lettre d'information couvrira à nouveau toute la largeur de la barre latérale.. Consultez la documentation sur la grille pour en savoir plus sur les lignes incomplètes.. Maintenant, jetez un oeil à l'intérieur du en-tête margin-bottom: 2em; .popular-additional h4 font-size: 1.125em; marge supérieure: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Ajouter du contenu supplémentaire
Titre du dernier message
.rangée .row.latest-post margin-bottom: 1.5em; .latest-post h4 marge-top: 0; taille de police: 1.125em;
4.5 Ajout de la pagination
5. Remplir la barre latérale
5.1 Le bulletin d'information
Abonnez-vous à notre lettre d'information
Foundation Forms comporte de nombreuses autres options de disposition, telles que l'étiquette de préfixe, l'étiquette de préfixe radius, le bouton Postfix et l'étiquette Postfix. Nous avons choisi l'option Bouton Postfix ici car elle est plus conviviale: les utilisateurs peuvent cliquer dessus et envoyer le formulaire immédiatement..
Dans le formulaire, nous allons ajouter une nouvelle ligne imbriquée qui divise l'écran en 2: 1. La saisie de texte aura 8 colonnes et le bouton postfix 4. Comme nous voulons avoir cette disposition même sur l’écran du portable, nous allons régler la “petit-8 colonnes” et “petit-4 colonnes” Les sélecteurs CSS ici, la petite grille étant la plus petite taille où nous voulons implémenter ce balisage.
Vous pouvez voir une autre nouvelle chose dans le code HTML ci-dessus qui est le “effondrement de la ligne” classe. C'est le style intégré de Foundation 5. Par défaut, il y a une gouttière entre deux colonnes adjacentes, mais si on ajoute le “effondrer” classe à notre rangée, la gouttière va disparaître. Nous faisons cela parce que nous voulons que le bouton soit juste à côté de l'entrée de texte sans espace entre eux..
Il est maintenant temps d'insérer cet extrait de code dans le
5.2 Flex vidéo
En dessous de la section Newsletter, nous ajouterons une recette vidéo quotidienne à notre barre latérale. Foundation 5 nous aide rendre les vidéos intégrées réactives et les forcer à évoluer automatiquement avec sa fonctionnalité Flex Video.
Les vidéos Flex utilisent la fonction intégrée “vidéo flex” Classe CSS. Nous créons une nouvelle ligne pour la section de barre latérale Recette vidéo quotidienne et y plaçons une colonne large avec “petit-12 moyen-9 grand-12 colonnes fin” Les sélecteurs CSS pour la même raison, nous avons utilisé une ligne incomplète dans la grille moyenne à l'étape précédente.
Voici le code que vous devez coller sous la section Newsletter. Vous pouvez utiliser n'importe quelle vidéo de Youtube, Vimeo, etc..
Recette vidéo quotidienne
5.3 Le menu de la barre latérale
Pour le menu de la barre latérale, nous utiliserons la fonctionnalité Accordion de Foundation 5. Les accordéons sont des éléments Web qui développent et réduisent le contenu en sections logiques..
Sur notre site de démonstration, ces sections logiques sont les 3 différents groupes d’aliments (plats principaux, plats secondaires, desserts), et chaque groupe contient des groupes plus petits tels que “la volaille”, “porc”, “Du boeuf”, “Végétarien”.
Nous plaçons l'intégralité de la barre latérale Accordion dans une large colonne avec la même logique que dans les étapes 5.1 et 5.2 précédentes. Nous y plaçons l'accordéon sous forme de liste non ordonnée avec les classes CSS intégrées appropriées, telles que “accordéon” et “accordéon-navigation”.
Comme les accordéons Foundation fonctionnent avec JavaScript, vous pouvez personnaliser son comportement à l'aide de variables JavaScript prédéfinies, si vous le souhaitez. Pour ce faire, regardez le “Configuration JavaScript facultative” section dans la documentation de l’accordéon. L'extrait de code suivant figure sous la section Flex Video du fichier index.html..
Conclusion
Maintenant que notre site de démonstration est prêt, voyons ce que vous pouvez encore accomplir avec Foundation 5. Les éléments que nous avons utilisés dans cette démonstration ne sont qu'un petit ensemble des fonctionnalités du framework Foundation. Il existe de nombreux autres éléments que vous pouvez utiliser dans votre conception, tels que les barres d'icônes personnalisables, les miettes de pain, les Lightboxes, les curseurs de plage, la validation de formulaire et bien d'autres. Les documents sont assez bien écrits et aident les développeurs avec de nombreux exemples de code.
Si vous connaissez bien Sass, vous avez encore plus d'options. Chaque section de la documentation explique comment créer vos propres mixins et quelles variables Sass vous pouvez utiliser pour personnaliser votre site. Avant de commencer à concevoir votre page Web, n'oubliez pas de vérifier la compatibilité du framework Foundation pour vous assurer qu'il fonctionne sur tous les navigateurs que vous devez créer..
- Voir la démo
- Source de téléchargement
