Construire des sites Web Superfast avec Foundation 5 [A Guide]
L'utilisation d'un framework frontal peut améliorer votre flux de travail de conception Web de plusieurs façons. Il peut vous aider à suivre les principes de conception modernes tels que l'approche mobile-first, le balisage sémantique et la conception réactive. Vous pouvez tirer parti de nombreux éléments CSS et JavaScript prêts à l'emploi et accélérer considérablement votre processus de développement, libérant ainsi plus de temps pour vous concentrer sur la conception visuelle et l'expérience utilisateur.
Zurb Foundation 5 est l'un des frameworks frontaux les plus puissants du marché. Il est logiquement construit, facile à utiliser et entièrement gratuit. Il vous permet d'utiliser une grille CSS flexible qui facilite la création d'une mise en page propre et conviviale . Le framework Foundation est également testé, il prend donc en charge la compatibilité multi-navigateurs et inter-appareils.
Dans ce tutoriel, je vais vous montrer comment vous pouvez créer un site web ultra-rapide avec Zurb Foundation 5. Vous pouvez jeter un coup d'œil au résultat final sur la page de démonstration.
Je vais créer la mise en page du site, la tâche d'ajouter des éléments de conception subtiles vous attend. Le site que nous allons créer ensemble dans ce tutoriel réalisera le rêve du designer UX moderne: il sera réactif, mobile-first, convivial et sémantique.
En raison de la longueur de ce guide, voici les raccourcis pour arriver à la section que vous voulez rapidement:
- 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
- Ajouter un panneau pour les messages populaires
- Ajout de 3 messages supplémentaires au panneau populaire
- Prettying le CSS
- Ajouter du contenu supplémentaire
- Ajout de la pagination
- Remplir la barre latérale
- Le formulaire de bulletin
- Vidéo Flex
- Le menu de la barre latérale
- Conclusion
1. Télécharger 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 non
- une version de Sass si vous voulez définir vos variables et vos mixins dans SCSS.
Dans ce tutoriel, je vais choisir le code complet avec CSS CSS, mais bien sûr, vous pouvez choisir d'autres versions si vous souhaitez rationaliser votre site et n'utiliser que ce dont vous avez vraiment 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 utiles dans le fichier d'index. Vous pouvez le laisser de cette façon et faire 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 garder car vous pouvez facilement accéder à la documentation de la Fondation quand vous le voulez.Ouvrez le fichier index.html dans votre éditeur de code favori et supprimez tout dans le section, mais avant la clôture
Les règles de style que nous ajoutons au fichier app.css pour améliorer notre prototype sont les suivantes:
en-tête {margin-bottom: 2em; } .popular-additional h4 {font-taille: 1.125em; marge supérieure: 0.4em; } .row .row.popular-main {margin-bottom: 1.5em; }
Comme Foundation 5 utilise des unités relatives, nous devons utiliser "em" -s ou "rem" -s au lieu de pixels pour suivre les règles. (Vous pouvez lire sur les unités CSS: Pixels vs ems vs% ici.) J'ai utilisé l'extension Firebug de Firefox pour déterminer où je dois remplacer les règles CSS de Foundation 5, vous pouvez utiliser d'autres extensions de navigateur de développement Web si vous le souhaitez.
Ici, dans ce court extrait CSS, nous n'avons dû remplacer le 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 maintenant:
4.4 Ajout de plus de contenuEn utilisant les mêmes règles qu'auparavant, nous ajouterons du contenu à la section principale de la page. Le contenu que nous allons ajouter maintenant sera les derniers messages avec de petites vignettes.
Foundation 5 a des styles de vignettes vraiment pré-préparés que nous utiliserons dans cette étape. Foundation Thumbnails utilise une classe CSS prédéfinie appelée "th" que nous devons ajouter aux images que nous souhaitons afficher sous forme de vignettes, comme vous pouvez le voir dans l'extrait de code ci-dessous.
Pour chaque message récent, nous ajoutons une nouvelle ligne au-dessous du panneau populaire avec notre classe CSS personnalisée appelée "dernier post" .
Sur la taille de la tablette et du bureau, nous montrerons une petite vignette en utilisant la classe de vignettes de la Fondation sur la gauche, et le titre et une courte description sur la droite. Sur mobile, le titre et la description passeront sous la vignette.
Maintenant j'ai utilisé les classes "medium-3 columns" et "medium-9 columns" pour les faire diviser l'écran en 1: 3, 25% pour l'image et 75% pour le texte de taille moyenne.
Insérez l'extrait de code suivant ci-dessous le panneau populaire trois fois (pour les trois derniers messages). Ici, je viens d'inclure le code d'une dernière ligne Post, car ils utilisent tous le même balisage HTML, seul le contenu diffère.
4.5 Ajout de la paginationDans cette étape, nous allons ajouter une pagination cool ci-dessous les derniers messages. Foundation 5 nous aide par ses classes de pagination pratiques et prêtes à l'emploi. Nous utilisons le même code dans cette étape que vous pouvez trouver dans la section "Avancé" dans les documents de pagination.
Voici les derniers articles avec la nouvelle section de pagination:
5. Remplissage de la barre latéraleMaintenant que nous sommes prêts avec le contenu principal de notre site de démonstration, il est temps de remplir la barre latérale de droite. La barre latérale droite glissera 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 contiendra un formulaire d'inscription à la newsletter (1), une vidéo la plus récente (2) et un menu de la barre latérale de style accordéon sous le surnom de "Notre livre de cuisine" (3).
À la fin de cette étape, nous serons prêts avec notre démo qui ressemblera à ceci:
5.1 Le formulaire de bulletinPour créer un formulaire dans Foundation 5, vous n'avez rien d'autre à faire, placez simplement la grille dans un
tag dans l'extrait de code ci-dessus. Nous utilisons le système de formulaire intégré de Foundation avec l'option de bouton Postfix (class = "button postfix"). Les formulaires de fondation ont de nombreuses autres options de mise en page, telles que l'étiquette de préfixe, l'étiquette de rayon de préfixe, le bouton de suffixe et l'étiquette de suffixe. Nous avons choisi ici l'option Bouton Postfix car elle est plus conviviale: les utilisateurs peuvent cliquer dessus et envoyer le formulaire en une seule fois.
A l'intérieur du 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 obtiendra 4. Comme nous voulons avoir cette disposition même sur l'écran mobile, nous allons définir les sélecteurs CSS "small-8 columns" et "small-4 columns" ici, le Small Grid é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 la classe "row collapse". C'est le style intégré de Foundation 5. Par défaut, il y a une gouttière entre deux colonnes adjacentes, mais si nous ajoutons la classe "collapse" à notre rangée, la gouttière disparaîtra . Nous faisons cela parce que nous voulons que le bouton soit juste à côté de la saisie de texte sans espace entre eux.
Il est maintenant temps d'insérer cet extrait de code dans le
5.2 Vidéo Flex
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 force à évoluer automatiquement avec sa fonction vidéo Flex.
Les vidéos Flex utilisent la classe CSS "flex-video" intégrée. Nous créons une nouvelle ligne pour la section de la barre latérale Daily Video Recipe et y plaçons une colonne large avec les sélecteurs CSS "small-12 medium-9 large-12 columns end" pour la même raison que 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 fonction Accordéon 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 d'accompagnement, desserts), et chaque groupe contient des groupes plus petits tels que "Volaille", "Porc", "Boeuf", "Végétarien".
Nous plaçons toute l'Accordéon latérale dans une colonne large avec la même logique que dans les étapes 5.1 et 5.2 précédentes. Nous mettons l'accordéon à l'intérieur comme une liste non ordonnée avec les classes CSS intégrées appropriées telles que "accordéon" et "accordéon-navigation".
Comme Foundation Accordions fonctionne avec JavaScript, vous pouvez personnaliser son comportement à l'aide de variables JavaScript prédéfinies si vous le souhaitez. Pour ce faire, consultez la section "Configuration JavaScript facultative" dans Accordion Docs. L'extrait de code suivant est situé sous la section Vidéo Flex dans le fichier index.html.
Notre livre de cuisine
Conclusion
Maintenant que nous sommes prêts avec notre site de démonstration, voyons ce que vous pouvez accomplir de plus avec Foundation 5. Les éléments que nous avons utilisés dans cette démo ne sont qu'un petit ensemble des fonctionnalités du framework Foundation. Il y a beaucoup d'autres choses que vous pouvez utiliser dans votre conception, telles que les barres d'icônes personnalisables, les chapelets, les visionneuses, les curseurs de plage, la validation de formulaire et bien d'autres. Les documents sont assez bien écrits et ils aident les développeurs avec de nombreux exemples de code.
Si vous êtes familier avec Sass, vous avez encore plus d'options car chaque section de la documentation explique comment vous pouvez 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 pour lesquels vous avez besoin de créer.
- Voir la démo
- Source de téléchargement
Utilisation de la façon dont les humains traitent les informations visuelles dans la conception Web
La conception de sites Web et d'interfaces utilisateur est devenue beaucoup plus facile au cours des dernières années. Il y a tellement d'outils que vous pouvez utiliser, ce qui ne sert à rien de recommencer à zéro lorsque vous développez des interfaces utilisateur (consultez notre nouvelle version de l'interface utilisateur). Mais
Bloquer l'accès à d'autres sites Web (pendant que vous travaillez) avec SiteCop
Prenez la méthode de Todobook de restreindre le temps de navigation sur un certain site Web «improductif», et l'appliquer à n'importe quel autre site Web que vous voulez. C'est le concept derrière SiteCop, une extension de "gestion de la productivité" faite pour les navigateurs Chrome .D'