Wat je gaat creëren

In deze zelfstudie gebruiken we ZURB's Foundation voor e-mails om een ​​eenvoudig functionerende e-mail te maken. We zullen verschillende bibliotheken verkennen die door het raamwerk worden geboden, met name "Panini". Panini stelt ons in staat een paar dingen te doen, maar we zullen ons concentreren op zijn partials-functie.

We zullen een ontwerp gebruiken dat is samengesteld met Web Wireframe Kit, verkrijgbaar bij Envato Elements.

Ons project opzetten

Foundation biedt twee versies; een standaard CSS-versie of een versie die Sass gebruikt. Voor deze tutorial zullen we leunen op de Sass-versie omdat het een andere workflow biedt met de "Inky" -template-taal, evenals meer maatwerk voor het stylen.

Ik ga ervan uit dat je al enige kennis hebt over hoe je een project kunt opzetten met behulp van Foundation, de gemakkelijkste manier om met de Foundation CLI te werken. Instructies voor installatie via de opdrachtregel zijn beschikbaar in de documentatie van de Foundation. Als alternatief, als u een Envato Tuts + of Elements-abonnee bent, kunt u Adi Purdila volgen terwijl hij door het hele installatieproces loopt.

Zodra je dit hebt gedaan, kunnen we een project maken met de volgende opdracht. Vervolgens wordt u gevraagd om de naam van de map waarin u het project wilt maken.

stichting nieuwe - framewerk-e-mails

Voordat we in een code duiken, vind ik het leuk om eerst mijn build-directory op te ruimen. Je zou een a moeten zien src map met de volgende structuur:

• middelen
• helpers
• lay-outs
• pagina's
• partials

Ik wil graag alle bestanden verwijderen met uitzondering van index.html binnen de pagina's map (we zullen geen van de andere gebruiken). Ik zal ook het index-layout.html in de lay-outs map. 

Notitie: Zoals hierboven vermeld, is dit niet verplicht. Ik wil gewoon mijn bouwdirectory netjes en schoon houden.

_settings.scss bestand

De sass-versie van het framework stelt ons in staat om de pre-built componenten aan te passen voor eigen gebruik. Ik heb hieronder de wijzigingen vermeld die ik heb gemaakt, inclusief de kop van elke commentaarsectie. Voel je vrij om deze in je te veranderen _settings.scss bestand of maak een nieuw bestand aan en importeer het na het instellingenbestand, maar voor het eerste kader.

// 1. Globaal // --------- $ primaire kleur: # ACACB7; $ lichtgrijs: # F4F4F6; $ middengrijs: # ACACB7; $ donkergrijs: # 4E4E56; $ zwart: # 000000; $ wit: #ffffff; $ global-width: 540px; $ body-achtergrond: $ wit; $ global-radius: 6px; // 4. Typografie // ------------- $ global-font-color: $ donkergrijs; $ 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. Knop // --------- $ Knopvulling: (klein: 4px 8px 4px 8px, klein: 5px 10px 5px 10px, standaard: 16px 80px 16px 80px, groot: 10px 20px 10px 20px, ); // 7. Menu // ------- $ menu-item-opvulling: 10px; $ menu-item-goot: 10px; $ menu-item-kleur: $ donkergrijs;

Laten we beginnen met coderen!

Verder weg, het is tijd om te openen index.html in de pagina's map. Dit is waar we de e-mailinhoud zullen creëren. We beginnen met de volgende code die een spacer-element en het containerelement bevat. Vergeet niet dat we de taal Inky-sjablonen gebruiken als deze er niet bekend uitziet!

--- onderwerp: Stichting voor e-mails - Panini gebruiken ---   

We zijn hier al begonnen met het gebruik van de functies van Panini, met name Custom Data. Dit is een standaardgegevenswaarde die door Foundation wordt gebruikt. Het gebruikt een variabele naam van onderwerpen die vervolgens wordt doorgetrokken naar de hoofdsjabloon voor de title-tag met onderwerp.

De kop

Nu kunnen we delen beginnen te gebruiken met Panini! Ga je gang en maak een nieuw bestand met de naam header.html binnen de src / partials map.

We zullen de volgende code gebruiken voor de header, en hoewel het niet nodig is, vind ik het leuk om mijn secties binnen de wikkel tag samen met een klasse voor identificatie:

             
 Niet correct weergeven? 
   

U hebt misschien gemerkt dat ik twee ankertags voor het logo heb gebruikt. Dit kwam doordat het logo gecentreerd was op mobiel (afbeeldingen hebben een centrum tag om hen heen), dus gebruikte ik de zichtbaarheidsklassen van Foundation om te laten zien / verbergen op mobiele apparaten. Ik heb ook de webversion-linktekst op mobiel verborgen.

Nu vraag je je af, hoe kunnen we dit laten zien? Teruggaan naar de index.html bestand, tussen de houder tags, plaats de volgende code in:

> header

Alle gedeeltelijke omvat vereist > samen met de naam van de gedeeltelijke bestandsnaam, in dit geval, header.html.

Ik zal ook de volgende stijlen voor de kop gebruiken, voel je vrij om dit overal te plaatsen. Ik heb een bestand gemaakt met de naam _styles.scss en importeerde dit via app.scss.

// Header // =================== .header .columns padding-bottom: 0;  .logo img max-width: 111px;  .webversion a font-size: 14px; kleur: erven; 

Notitie: Je hebt misschien gemerkt dat ik geen breedte toepaste op de img-tag voor het logo (wat je normaal wel zou moeten doen!) Het framework van Foundation heeft een aantal stijlen waardoor het beeld zich over de volledige breedte uitbreidt. In dit geval, omdat ik retinaschermen ondersteun, maak ik @ 2x afbeeldingen. We kunnen dit oplossen door de img te richten en een a toe te passen Maximale wijdte (zorg ervoor dat u gebruikt Maximale wijdte, en niet alleen breedte).

Hero Section

Voor deze sectie heb ik besloten om het binnen het index.html-bestand te houden; Ik vond dat er geen gedeeltelijke noodzaak voor was, maar het is aan jou hoe je het aanpakt.

            
De Finibus Bonorum
 & Malorum
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Veniam.
   Inschrijven    

// Hero // =================== .hero .wrapper-inner padding- bodem: 150px; @media only screen en (max-width: # $ global-breakpoint) padding-bottom: 75px! important;  .play-video display: block; padding-top: 80px; padding-bottom: 80px; img max-width: 120px;  @media only screen en (max-width: # $ global-breakpoint) padding-top: 60px! belangrijk; padding-bottom: 60px! belangrijk; img max-width: 60px! important;  p font-size: 18px;  @media only screen en (max-width: # $ global-breakpoint) h1 font-size: 40px! important;  p font-size: 16px! important; 

Wat styling betreft, kun je hier enkele dingen zien die je nog niet eerder hebt gezien. We zijn begonnen met het introduceren van een aantal stijlen voor mobiel formaat, dit wordt gedaan met behulp van een media-query, maar Foundation is zeer behulpzaam en levert een Sass-variabele voor de maximale breedte.

@media only-scherm en (max-width: # $ global-breakpoint)

Wanneer u stijlen in de mediaquery maakt, moet u vaak de !belangrijk tag anders worden de kleine formaatstijlen overschreven door de grote.

Resterende Partials

We hebben dus nog drie secties over voor voltooiing: projecten, getuigenissen en de voettekst. Elk kan in zijn eigen bestand worden geplaatst binnen de src / partials map.

projects.html

   
Populaire projecten
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            

testimonials.html

   
Neem niet alleen ons woord ervoor
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                         
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. "
      
Klant
  
Titel
   

footer.html

                 Link 1 Link 2 Link 3 Link 4      

stijlen

// Projecten // =================== .projecten @media alleen scherm en (max -breedte: # $ globaal breekpunt) h2 font-size: 28px! important;  p font-size: 14px! important;  // Testimonials // =============== .testimonials .wrapper-innerlijke padding-top: 150px; padding-bottom: 100px; @media only-scherm en (max-width: # $ global-breakpoint) padding-top: 75px! belangrijk; padding-bottom: 50px! belangrijk;  .user-icon max-width: 90px;  .quote font-size: 18px;  .star-rating max-width: 94px;  .title color: $ medium-grey;  @media only screen en (max-width: # $ global-breakpoint) h2 font-size: 28px! important;  p font-size: 14px! important;  .quote font-size: 16px! important;  // Voetregel // =================================== .footer achtergrond: $ light -grijs; .container achtergrond: $ lichtgrijs;  .wrapper-inner padding-top: 32px; padding-bottom: 10px;  .social img max-width: 40px;  .menu .menu-item a font-weight: 700;  

Inclusief de resterende deelpartijen

Nu hebben we de laatste deelpartijen gemaakt die we kunnen opnemen in onze index.html. Ga je gang en voeg toe > projecten en > testimonials onmiddellijk na de afsluitende held wrapper tag.

Maar hoe zit het met het voettekstje? De voettekst moet wel worden opgenomen, maar hij moet buiten de voet worden geplaatst -tags. Dit komt omdat het een achtergrond met volle breedte gebruikt. Toevoegen > footer direct na het sluiten van de containertag.

Afronden

Op dit moment ziet onze e-mail er best goed uit! Het is u echter mogelijk opgevallen dat lettertypen niet correct worden geladen. We hebben de $ Body-font-family variabele om "Lato" te gebruiken, samen met fallbacks. Dit is een Google-lettertype, zodat we het in het bestand app.scss kunnen importeren. Zorg ervoor dat u dit vóór iets anders importeert.

@import url ('https://fonts.googleapis.com/css?family=Lato:400,700');

Nu is onze e-mail klaar, we kunnen het voltooien en klaar maken voor verspreiding! Met behulp van de helpers van het basiscommando kunnen we gewoon rennen stichting bouwen die afbeeldingen verkleint, inline css en alles inpakken! 

Conclusie

We hebben het gedaan! We hebben met succes een e-mail gebouwd met het Email framework van ZURB Foundation en de Panini-bibliotheek! Als u de andere functies van Panini wilt bekijken, is de volledige documentatie beschikbaar.