Hva du skal skape

I denne opplæringen bruker vi ZURBs Foundation for Emails for å lage en enkel fungerende e-post. Vi vil utforske ulike biblioteker levert av rammen, spesielt "Panini". Panini gjør det mulig for oss å gjøre noen ting, men vi vil fokusere på sin delvise funksjon.

Vi bruker et design satt sammen med Web Wireframe Kit tilgjengelig fra Envato Elements.

Sette opp vårt prosjekt

Foundation tilbyr to versjoner; en standard CSS-versjon eller en som bruker Sass. For denne opplæringen vil vi lene oss på Sass-versjonen, da den tilbyr en annen arbeidsflyt som inkluderer "Inky" templerende språk, samt mer tilpasning for styling.

Jeg vil anta at du allerede har litt kunnskap om hvordan du setter opp et prosjekt ved hjelp av Foundation, den enkleste måten å være med Foundation CLI. Instruksjoner for installasjon via kommandolinjen er tilgjengelig i Foundation docs. Alternativt, hvis du er en Envato Tuts + eller Elements abonnent, kan du følge Adi Purdila mens han går gjennom hele installasjonsprosessen.

Når du har gjort dette, kan vi opprette et prosjekt med følgende kommando. Du blir deretter bedt om navnet til mappen du vil opprette prosjektet i.

grunnlag nye --framework e-post

Før vi dykker inn i en kode, liker jeg å rydde opp byggekatalogen først. Du bør se en src mappe med følgende struktur:

• eiendeler
• hjelpere
• oppsett
• sider
• partials

Jeg liker å slette alle filer med unntak av index.html innen sider mappe (vi vil ikke bruke noen av de andre). Jeg vil også slette indeks layout.html i oppsett mappe. 

Merk: Som nevnt ovenfor er dette ikke obligatorisk. Jeg liker bare å holde byggekatalogen myk og ren.

_settings.scss-filen

Sass-versjonen av rammen gir oss mulighet til å tilpasse de forhåndsbygde komponentene til eget bruk. Jeg har oppført nedenfor endringene jeg har gjort, inkludert hver kommentarhovedtekst. Du kan også endre disse i din _settings.scss fil eller opprett en ny fil og importer den etter Innstillingsfilen, men før grunnlaget rammeverket en.

// 1. Global // --------- $ primærfarge: # ACACB7; $ lysegrå: # F4F4F6; $ medium-grå: # ACACB7; $ mørkegrå: # 4E4E56; $ svart: # 000000; $ hvit: #ffffff; $ global-bredde: 540px; $ body-background: $ white; $ global-radius: 6px; // 4. Typografi // ------------- $ global fontfarge: $ mørkegrå; $ body-font-familie: 'Lato', Helvetica, Arial, sans-serif; $ global-line-høyde: 1,5; $ header-font-weight: 700; $ h1-skriftstørrelse: 48px; $ h2-skriftstørrelse: 32px; $ h3-skriftstørrelse: 30px; $ h4-skriftstørrelse: 24px; $ h5-skriftstørrelse: 18px; $ h6-skriftstørrelse: 16px; $ header-margin-bottom: 0; $ paragraph-margin-bottom: 0; // 5. Button // --------- $ button-padding: (liten: 4px 8px 4px 8px, liten: 5px 10px 5px 10px, standard: 16px 80px 16px 80px, stor: 10px 20px 10px 20px, ); // 7. Meny // ------- $ menypunkt-polstring: 10px; $ meny-element-renner: 10px; $ menyelement-farge: $ mørkegrå;

La oss begynne koding!

Fortsett, det er på tide å åpne opp index.html i sider mappe. Det er her vi skal lage e-postinnholdet. Vi starter med følgende kode som inneholder et mellomrom og beholderelementet. Husk at vi bruker Inky templerende språk hvis dette ser ukjent ut!

--- emne: Stiftelse for e-post - Ved hjelp av Panini ---   

Vi har allerede begynt å bruke funksjonene til Panini her, spesielt tilpassede data. Dette er en standard datavare som brukes av Foundation. Den bruker et variabelt navn på Emne som deretter blir trukket inn i hovedmalen for titteletiketten med Emne .

Overskriften

Nå kan vi begynne å begynne å bruke partials med Panini! Gå videre og opprett en ny fil som heter header.html innen src / partials mappe.

Vi bruker følgende kode for toppteksten, og mens det ikke er nødvendig, liker jeg å pakke inn seksjonene mine i wrapper ta med en klasse for identifikasjon:

             
 Vises ikke riktig? 
   

Du har kanskje lagt merke til at jeg har brukt to ankerkoder for logoen. Dette skyldes at logoen er sentrert på mobil (bilder trenger en senter tag rundt dem), så jeg brukte Stiftelsens synlighetsklasser til å vise / skjule på mobil. Jeg har også skjult webversionlinkteksten på mobil også.

Nå lurer du på hvordan får vi dette til å dukke opp? Overskrift tilbake til index.html fil, mellom container koder, legg inn følgende kode inne:

> header

Alle delvise inkluderer krever > sammen med navnet på det delvise filnavnet, i dette tilfellet, header.html.

Jeg bruker følgende stiler for header også, gjerne legg dette overalt. Jeg opprettet en fil som heter _styles.scss og importerte dette via app.scss.

// Header // =================================== .header .columns padding-bottom: 0;  .logo img maks-bredde: 111px;  .webversjon a font-size: 14px; farge: arve; 

Merk: Du har kanskje lagt merke til at jeg ikke brukte bredde på img-taggen for logoen (som du normalt skulle gjøre!) Stiftelsens rammeverk har en rekke stilarter som får bildet til å utvides til sin fulle bredde. I dette tilfellet, fordi jeg støtter retina skjermbilder, lager jeg @ 2x bilder. Vi kan løse dette ved å målrette img og bruke en max bredde (vær sikker på å bruke max bredde, og ikke bare bredde).

Helteseksjon

For denne delen bestemte jeg meg for å beholde den i index.html-filen; Jeg følte at det ikke krever en delvis, men det er opp til deg hvordan du håndterer det.

            
De Finibus Bonorum
 & Malorum
  
Det er ikke noe du vil, men det er ikke så mye som du vil, men det er ikke et øyeblikk, og du har en god jobb. Ut enim ad minim veniam.
   Melde deg på    

// Hero // =================================== .hero .wrapper-inner padding- bottom: 150 piksler; @media bare skjerm og (maksimal bredde: # $ global breakpoint) polstring-bunn: 75px! viktig;  .play-video display: block; padding-top: 80px; padding-bottom: 80px; img maksimal bredde: 120px;  @media bare skjerm og (maksimal bredde: # $ global breakpoint) padding-top: 60px! viktig; polstring-bunn: 60px! viktig; img maksimal bredde: 60px! viktig;  p skriftstørrelse: 18px;  @media bare skjerm og (maksimal bredde: # $ global breakpoint) h1 fontstørrelse: 40px! viktig;  p skriftstørrelse: 16px! viktig; 

Når det gjelder styling, kan du se noen ting her inne, du har ikke sett før. Vi har begynt å introdusere noen stiler for mobil størrelse, dette gjøres ved hjelp av en medieforespørsel, men Foundation er veldig nyttig og leverer en Sass-variabel for maksimal bredde.

@media bare skjerm og (maksimal bredde: # $ global breakpoint)

Når du lager stiler innenfor mediesøket, må du ofte bruke !viktig tag ellers vil de små størrelsesformatene bli overskrevet av de store.

Resterende deler

Så vi har tre seksjoner igjen for å være ferdig: Prosjekter, Testimonials og Footer. Hver kan plasseres i sin egen fil innenfor src / partials mappe.

projects.html

   
Populære prosjekter
  
Kjæresten er dum og sitter, og er en avgjørende forfatter.
                            

testimonials.html

   
Ikke bare ta vårt ord for det
  
Kjæresten er dum og sitter, og er en avgjørende forfatter.
                         
"Det er ikke noe du vil, men det er ikke så godt som du vil, men det er ikke et øyeblikk som du trenger å gjøre, og det er en stor rolle. Ut enim minimale veniam, det er en utfordring som utøves av arbeidslivet. "
      
Kunde
  
Tittel
   

footer.html

                 Link 1 Link 2 Link 3 Link 4      

Styles

// Prosjekter // =================================== .projects @media only screen and (max -bredde: # $ global-breakpoint) h2 font-size: 28px! viktig;  p skriftstørrelse: 14px! viktig;  // Testimonials // ================================================================================================= polstring-toppen: 150px; padding-bottom: 100 piksler; @media bare skjerm og (maksimal bredde: # $ global breakpoint) polstring-topp: 75px! viktig; polstring-bunn: 50px! viktig;  .user-icon maks-bredde: 90px;  .quote font-size: 18px;  .star-rating maksimal bredde: 94px;  .title color: $ medium-gray;  @media bare skjerm og (maksimal bredde: # $ global breakpoint) h2 font-size: 28px! viktig;  p skriftstørrelse: 14px! viktig;  .quote font-size: 16px! important;  // Footer // =============================footer bakgrunn: $ light -grå; .container bakgrunn: $ lysegrå;  .wrapper-inner polstring-topp: 32px; padding-bottom: 10px;  .social img maks-bredde: 40px;  .menu .menu-item a font-weight: 700;  

Inkludert de resterende delene

Nå har vi opprettet de endelige delene vi kan få dem inkludert i vår index.html. Gå videre og legg til > prosjekter og > vitnemål umiddelbart etter den avsluttende heltenpakken.

Men hva med bunnteksten? Bunnteksten må være inkludert, men den må plasseres utenfor tags. Dette skyldes at den bruker en full breddebakgrunn. Legg til > bunntekst rett etter den avsluttende containerkoden.

Etterbehandling

På dette tidspunktet bør vår e-post se ganske bra ut! Du har imidlertid kanskje lagt merke til at skrifter ikke lastes inn riktig. Vi definerte $ Body-font-family variabel å bruke "Lato", sammen med fallbacks. Dette er en Google-skrifttype, slik at vi kan importere den i app.scss-filen. Sørg for å importere dette før noe annet.

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

Nå er vår e-post ferdig, vi kan fullføre den og få den klar til distribusjon! Ved hjelp av fundamentet kommandoen hjelpere kan vi bare kjøre grunnlagsbygging som vil redusere bilder, inline css og pakke alt opp! 

Konklusjon

Vi har gjort det! Vi har vellykket bygget en e-post ved hjelp av ZURB Stiftelsens Email-rammeverk og Panini-biblioteket! Hvis du vil se på de andre funksjonene som inngår i Panini, er full dokumentasjon tilgjengelig.