Share
Ce que vous allez créerDans ce didacticiel, nous utiliserons le logiciel Foundation for Emails de ZURB pour créer un courrier électronique simple et fonctionnel. Nous allons explorer diverses bibliothèques fournies par le framework, en particulier «Panini». Panini nous permet de faire quelques choses mais nous allons nous concentrer sur sa fonctionnalité de partiels.
Nous utiliserons un design assemblé avec le kit Web Wireframe disponible chez Envato Elements..
La fondation propose deux versions. une version CSS standard ou qui utilise Sass. Pour ce tutoriel, nous nous appuierons sur la version Sass car elle propose un flux de travail différent, qui inclut le langage de modélisation «Inky», ainsi que davantage de personnalisation pour le style..
Je présume que vous savez déjà comment configurer un projet avec Foundation, le moyen le plus simple étant d'utiliser Foundation CLI. Les instructions pour l’installation via la ligne de commande sont disponibles dans les documents Foundation. Si vous êtes un abonné Envato Tuts + ou Elements, vous pouvez également suivre Adi Purdila tout au long du processus d'installation..
Une fois que cela est fait, nous pouvons créer un projet avec la commande suivante. On vous demandera ensuite le nom du dossier dans lequel vous voulez créer le projet..
fondation new - emails de cadre
Avant de plonger dans un code, j'aime bien nettoyer mon répertoire de construction. Vous devriez voir un src dossier avec la structure suivante:
J'aime supprimer tous les fichiers à l'exception de index.html dans le des pages dossier (nous n'utiliserons aucun des autres). Je vais aussi supprimer le index-layout.html dans le mises en page dossier.
Remarque: Comme mentionné ci-dessus, ce n'est pas obligatoire. J'aime juste garder mon répertoire de compilation bien propre.
La version sass du framework nous permet de personnaliser les composants prédéfinis pour notre propre utilisation. J'ai énuméré ci-dessous les modifications que j'ai apportées, y compris chaque en-tête de section de commentaire. N'hésitez pas à les changer dans votre _settings.scss déposer ou créer un nouveau fichier et l'importer après le fichier de paramètres, mais avant le cadre de la fondation.
// 1. Global // --------- $ primary-color: # ACACB7; $ gris clair: # F4F4F6; $ gris moyen: # ACACB7; $ gris foncé: # 4E4E56; $ black: # 000000; $ white: #ffffff; $ global-width: 540px; $ corps-fond: $ blanc; $ global-radius: 6px; // 4. Typographie // ------------- $ global-font-color: $ dark-grey; $ body-font-family: 'Lato', Helvetica, Arial, sans serif; $ global-line-height: 1,5; $ header-font-weight: 700; $ h1-font-size: 48px; $ h2-font-size: 32px; $ h3-font-size: 30px; $ h4-font-size: 24px; $ h5-font-size: 18px; $ h6-font-size: 16px; $ header-margin-bottom: 0; $ paragraph-margin-bottom: 0; // 5. Button // --------- $ button-padding: (petit: 4px 8px 4px 8px, petit: 5px 10px 5px 10px, valeur par défaut: 16px 80px 16px 80px, grand: 10px 20px 10px 20px ) // 7. Menu // ------- $ menu-item-padding: 10px; $ menu-item-gouttière: 10px; $ menu-item-color: $ gris foncé;
Passons à autre chose, il est temps de s'ouvrir index.html dans le des pages dossier. C'est ici que nous allons créer le contenu de l'e-mail. Commençons par le code suivant, qui inclut un élément d'espacement et l'élément conteneur. N'oubliez pas que nous utilisons le langage de templates Inky si cela ne vous semble pas familier.!
--- sujet: Foundation for Emails - Utiliser le panini ---
Nous avons déjà commencé à utiliser les fonctionnalités de Panini ici, en particulier Custom Data. C'est une valeur de données par défaut utilisée par Foundation. Il utilise un nom de variable de assujettir qui est ensuite tiré à travers dans le modèle maître pour la balise de titre avec sujet.
Nous pouvons maintenant commencer à utiliser des partiels avec Panini! Allez-y et créez un nouveau fichier appelé header.html dans le src / partiels dossier.
Nous utiliserons le code suivant pour l'en-tête, et bien que ce ne soit pas nécessaire, j'aime bien insérer mes sections dans la section emballage tag avec une classe pour l'identification:
|
Ne pas afficher correctement?
Vous avez peut-être remarqué que j'ai utilisé deux étiquettes d'ancrage pour le logo. Cela était dû au fait que le logo était centré sur le mobile (les images nécessitaient une centre balises autour d'eux), j'ai donc utilisé les classes de visibilité de la Fondation pour afficher / masquer les données sur mobile. J'ai aussi caché le texte du lien Webversion sur mobile.
Maintenant, vous vous demandez, comment pouvons-nous obtenir cela? Revenons à la index.html fichier, entre le récipient balises, placez le code suivant à l'intérieur:
> en-tête
Tout comprend partielle nécessite > avec le nom du nom de fichier partiel, dans ce cas, header.html.
J'utiliserai aussi les styles suivants pour l'en-tête, n'hésitez pas à mettre cela n'importe où. J'ai créé un fichier nommé _styles.scss et importé cela via app.scss.
// En-tête // ================================= .header .columns padding-bottom: 0; .logo img max-width: 111px; .webversion a font-size: 14px; couleur: hériter;
Remarque: Vous avez peut-être remarqué que je n'avais pas appliqué de largeur à la balise img pour le logo (ce que vous devez normalement faire!). Le cadre de Foundation comporte une multitude de styles qui permettent à l'image de s'étendre sur toute sa largeur. Dans ce cas, comme je supporte les écrans de rétine, je crée des images @ 2x. Nous pouvons résoudre ce problème en ciblant img et en appliquant un largeur maximale (assurez-vous d'utiliser largeur maximale, et pas seulement largeur).
Pour cette section, j'ai décidé de le conserver dans le fichier index.html; Je sentais que cela n'exigeait pas de partialité, mais c'est à vous de voir comment vous y prendrez.
|
|
De Finibus Bonorum
& MalorumLorem ipsum dolor sit amet, consectetur elit adipiscing, sed eiusmod tempor incidid ut labore et dolore magna aliqua. Ut enim ad minim veniam.
// Hero // ================================= .hero .wrapper-inner padding- en bas: 150px; @media only screen et (max-width: # $ global-breakpoint) padding-bottom: 75px! important; .play-video display: block; rembourrage en haut: 80px; rembourrage en bas: 80px; img max-width: 120px; @ Écran uniquement multimédia et (largeur maximale: # $ point de rupture global) padding-top: 60px! important; padding-bottom: 60px! important; img max-width: 60px! important; p font-size: 18px; @ Écran uniquement multimédia et (largeur maximale: # $ point d'arrêt global) h1 taille de la police: 40px! important; p font-size: 16px! important;
En ce qui concerne le style, vous pouvez voir des choses que vous n'avez jamais vues auparavant. Nous avons commencé à introduire certains styles pour la taille de mobile, ceci est fait en utilisant une requête de média mais Foundation est très utile et fournit une variable Sass pour la largeur maximale..
Écran @média uniquement et (largeur maximale: # $ global-breakpoint)
Chaque fois que vous créez des styles dans la requête multimédia, vous devrez souvent utiliser le !important tag sinon les styles de petite taille seront écrasés par les grands.
Il nous reste donc trois sections à compléter: Projets, Témoignages et le pied de page. Chacun peut être placé dans son propre fichier dans la src / partiels dossier.
|
Projets populaires
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit.
|
|
|
|
Ne vous contentez pas de nous croire sur parole
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit.
|
|
“Lorem ipsum dolor sit amet, consectetur elit of adipiscing, a fait une incursion temporelle dans le travail et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita ullamco laboris nisi ut aliquip ex. ”
Client
Titre
// Projets // ================================= .projects @media only screen and (max -width: # $ global-breakpoint) h2 taille de la police: 28px! important; p font-size: 14px! important; // Témoignages // =================================. .Testimonials .wrapper-inner padding-top: 150px; rembourrage en bas: 100px; @media only screen et (max-width: # $ global-breakpoint) padding-top: 75px! important; padding-bottom: 50px! important; .user-icon max-width: 90px; .quote font-size: 18px; .star-rating max-width: 94px; .title color: $ medium-grey; @ Écran uniquement multimédia et (largeur maximale: # $ point d'arrêt global) h2 taille de la police: 28px! important; p font-size: 14px! important; .quote font-size: 16px! important; // Pied de page // =================================. .Footer background: $ light -gris; .container background: $ gris clair; .wrapper-inner padding-top: 32px; rembourrage en bas: 10px; .social img max-width: 40px; .menu .menu-item a font-weight: 700;
Maintenant que nous avons créé les partiels finaux, nous pouvons les inclure dans notre fichier index.html. Allez-y et ajoutez > projets et > témoignages immédiatement après la balise de fermeture du héros.
Mais qu'en est-il du pied de page? Le pied de page doit être inclus, mais il devra être placé en dehors du > footer juste après la balise de fermeture du conteneur.
À ce stade, notre courrier électronique devrait être plutôt beau! Cependant, vous avez peut-être remarqué que les polices ne se chargent pas correctement. Nous avons défini le $ body-font-family variable à utiliser "Lato", avec des replis. Ceci est une police Google afin que nous puissions l'importer dans le fichier app.scss. Assurez-vous d'importer ceci avant toute chose.
Accentsconagua
@import url ('https://fonts.googleapis.com/css?family=Lato:400,700');Maintenant que notre email est fini, nous pouvons le finaliser et le préparer pour la distribution! En utilisant les assistants de commande de base, nous pouvons simplement exécuter la construction de la fondation qui minimisera les images, les CSS en ligne et tout emballer!
Nous l'avons fait! Nous avons construit avec succès un courrier électronique en utilisant la structure de messagerie de la fondation ZURB et la bibliothèque Panini! Si vous souhaitez consulter les autres fonctionnalités incluses dans Panini, la documentation complète est disponible..
