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:

1. le code complet
2. une version plus légère avec seulement le code essentiel
3. une version personnalisée où vous pouvez personnaliser ce dont vous avez besoin et non
4. 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 contenu

En 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 pagination 
Dans 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érale 
Maintenant 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 
  
  



Des Articles Intéressants






			
	
				

					14 emojis animés cachés de Google Hangouts
					

			
	
				

					4 conseils pour faire OS élémentaire Luna plus «élémentaire»
					
						







			
	
				

					Spotify pour Android maintenant a derrière l'intégration des paroles
					

			
	
				

					Créez des menus Hamburger coulissants faciles avec le cadre jQuery Slidebars