În acest tutorial, vom folosi Fundația pentru e-mailuri ZURB pentru a crea un e-mail simplu de funcționat. Vom explora diferite biblioteci furnizate de cadru, în special "Panini". Panini ne permite să facem câteva lucruri, dar ne vom concentra pe caracteristica paralelă.

Vom folosi un design creat împreună cu Web Wireframe Kit disponibil de la Envato Elements.

Configurarea Proiectului nostru

Fundația oferă două versiuni; o versiune standard CSS sau una care utilizează Sass. Pentru acest tutorial se va baza pe versiunea Sass deoarece oferă un flux de lucru diferit, care include limbajul templating "Inky", precum și o personalizare mai mult pentru stil.

Voi presupune că deja aveți niște cunoștințe despre cum să configurați un proiect folosind Fundația, cel mai simplu mod fiind acela al Fundației CLI. Instrucțiunile pentru instalarea prin intermediul liniei de comandă sunt disponibile în documentele Fundației. Alternativ, dacă sunteți abonat Envato Tuts + sau Elements, puteți urma Adi Purdila pe măsură ce trece prin întregul proces de instalare.

Odată ce ați făcut acest lucru, putem crea un proiect cu următoarea comandă. Apoi vi se va cere numele dosarului în care doriți să creați proiectul.

fundație noi - frazework e-mailuri

Înainte de a ne arunca în orice cod, îmi place să curăț directorul meu de construire mai întâi. Ar trebui să vezi a src dosar cu următoarea structură:

• bunuri
• ajutoare
• aspecte
• pagini
• amprente parțiale

Îmi place să șterg toate fișierele cu excepția index.html în cadrul pagini (nu vom folosi nici unul dintre celelalte). De asemenea, voi șterge indice de-layout.html în aspecte pliant. 

Notă: După cum sa menționat mai sus, acest lucru nu este obligatoriu. Îmi place să păstrez directorul meu de construire frumos și curat.

_settings.scss fișier

Versiunea Sass a cadrului ne permite să personalizăm componentele pre-construite pentru uz propriu. Am enumerat mai jos modificările pe care le-am făcut, inclusiv fiecare antet al secțiunii de comentarii. Simțiți-vă liber să le schimbați în dvs. _settings.scss fișier sau să creați un fișier nou și să îl importați după fișierul de setări, dar inainte de fundația cadru unu.

// 1. Global // --------- $ primar: # ACACB7; $ light-gray: # F4F4F6; $ mediu-gri: # ACACB7; $ dark-gray: # 4E4E56; $ negru: # 000000; $ alb: #ffffff; $ global-width: 540px; $ body-background: $ alb; $ global-radius: 6px; // 4. Tipografie // ------------- $ global-font-color: $ gri-gri; $ corp-font-familie: "Lato", Helvetica, Arial, sans-serif; $ global-line-height: 1.5; $ header-font-greutate: 700; $ h1-font-size: 48px; $ h2-font-size: 32px; $ h3-dimensiune font: 30px; $ h4-font-size: 24px; $ h5-font-size: 18px; $ h6-font-size: 16px; $ header-marginea-jos: 0; $ paragraf-marginea-jos: 0; // 5. Buton // --------- $ buton-padding: (mic: 4px 8px 4px 8px, mic: 5px 10px 5px 10px, implicit: 16px 80px 16px 80px, mare: 10px 20px 10px 20px, ); // 7. Meniu // ------- $ meniu-item-padding: 10px; $ meniu-element-jgheab: 10px; $ menu-item-color: $ gri-închis;

Să începem codificarea!

Mergând mai departe, e timpul să ne deschidem index.html în pagini pliant. Aici vom crea conținutul de e-mail. Vom începe cu următorul cod care include un element distanțier și elementul container. Amintiți-vă, folosim limba tematică Inky dacă acest lucru nu pare familiar!

--- subiect: Fundația pentru e-mailuri - Utilizarea Panini ---   

Am început deja să folosim caracteristicile Panini aici, în special date personalizate. Aceasta este o valoare implicită a datelor folosită de Fundație. Se folosește un nume de variabilă subiect care este apoi tras în șablonul master pentru eticheta de titlu cu subiect .

Antetul

Acum putem începe să folosim partiali cu Panini! Mergeți mai departe și creați un fișier nou numit header.html în cadrul src / amprente parțiale pliant.

Vom folosi următorul cod pentru antet și, deși nu este necesar, îmi place să îmi înfășoară secțiunile în cadrul învelitoare etichetă împreună cu o clasă pentru identificare:

             
 Nu se afișează corect? 
   

S-ar putea să fi observat că am folosit două etichete de ancorare pentru logo. Acest lucru se datorează faptului că logo-ul este centrat pe mobil (imaginile au nevoie de a centru tag-ul în jurul lor), așa că am folosit clasele de vizibilitate ale Fundației pentru a afișa / ascunde pe mobil. De asemenea, am ascuns textul legăturii web pe telefonul mobil.

Acum vă întrebați cum putem face asta să apară? Întoarcerea înapoi spre index.html fișier, între recipient , introduceți următorul cod în interiorul:

> antetul

Toate parțiale includ necesită împreună cu numele numelui parțial al fișierului, în acest caz, header.html.

Voi folosi și următoarele stiluri pentru antet, nu ezitați să puneți acest lucru oriunde. Am creat un fișier numit _styles.scss și a importat acest lucru prin intermediul app.scss.

// Header // =================================== .header coloane padding-bottom: 0;  .logo img max-lățime: 111px;  .versiune a font-size: 14px; culoare: moștenesc; 

Notă: S-ar putea să fi observat că nu am aplicat o lățime tag-ului img pentru logo-ul (pe care ar trebui să o faceți în mod normal!) Cadrul fundației are o grămadă de stiluri care determină extinderea imaginii la întreaga sa lățime. În acest caz, deoarece susțin ecrane de retină, creez @ două imagini. Putem rezolva acest lucru prin direcționarea img și aplicarea a lățimea maximă (asigurați-vă că utilizați lățimea maximă, și nu doar lăţime).

Eroul Secțiunea

Pentru această secțiune, am decis să o păstrez în fișierul index.html; Am simțit că nu era nevoie de o parte, dar depinde de tine cum te descurci.

            
De Finibus Bonorum
 & Malorum
  
Lorem ipsum dolor stai în ordine, consecutiv, în timp ce se ascultă, în timp ce lucrați în timpul muncii și alături de magna aliqua. Ut enim ad minim veniam.
   Inscrie-te    

// Eroul // =================================== .hero .wrapper-inner padding- jos: 150px; numai ecranul @media și (max-width: # $ global-breakpoint) padding-bottom: 75px! important;  .play-video display: bloc; padding-top: 80px; padding-bottom: 80px; img max-lățime: 120px;  numai ecranul @media și (max-width: # $ global-breakpoint) padding-top: 60px! important; padding-bottom: 60px! important; img max-width: 60px! important;  p font-size: 18px;  numai ecranul @media și (max-width: # global-breakpoint) h1 font-size: 40px! important;  p font-size: 16px! important; 

În ceea ce privește stilul, puteți vedea unele lucruri aici, pe care nu le-ați văzut înainte. Am început să introducem câteva stiluri pentru dimensiunea mobilă, aceasta se face folosind o interogare media, însă Fundația este foarte utilă și furnizează o variabilă Sass pentru lățimea maximă.

numai ecranul @media și (max-width: # $ global-breakpoint)

Ori de câte ori se creează stiluri în interogarea media, va trebui adesea să utilizați !important etichetați altfel stilurile de dimensiuni mici vor fi suprascrise de cele mari.

Paralele rămase

Deci, avem trei secțiuni rămase pentru a fi finalizate: Proiecte, Martor și Footer. Fiecare poate fi plasat în fișierul propriu în cadrul src / amprente parțiale pliant.

projects.html

   
Proiecte populare
  
Lorem ipsum dolor stați amet, consectetur adipiscing elit.
                            

testimonials.html

   
Nu luați doar cuvântul nostru pentru el
  
Lorem ipsum dolor stați amet, consectetur adipiscing elit.
                         
"Lorem ipsum dolor stai amet, consecutiv, adipiscing elit, sed do eiusmod temporal incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ex exercitarea ullamco laboris nisi ut aliquip ex "
      
Client
  
Titlu
   

footer.html

                 Linkul 1 Link 2 Legătura 3 Link 4      

stiluri

// Projects // =================================== .proiecte @media only screen și (max -width: # $ global-breakpoint) h2 font-size: 28px! important;  p font-size: 14px! important;  // Testimoniale // =================================== .testimonials .wrapper-inner padding-top: 150px; padding-bottom: 100px; numai ecranul @media și (max-width: # global-breakpoint) padding-top: 75px! important; padding-bottom: 50px! important;  .user-icon max-width: 90px;  .cu font-size: 18px; . evaluare-stea max-width: 94px;  .title culoare: $ mediu-gri;  Numai ecranul @media și (max-width: # global-breakpoint) h2 font-size: 28px! important;  p font-size: 14px! important;  .quote font-size: 16px! important;  // Footer // =================================== .footer background: $ light -gri; .container background: $ light-gray;  .wrapper-interior padding-top: 32px; padding-bottom: 10px;  .social img max-width: 40px;  .menu .menu-element a font-weight: 700;  

Inclusiv Partidele rămase

Acum am creat partile finale pe care le putem include în index.html. Mergeți și adăugați > proiecte și > mărturii imediat după eticheta de închidere a eroului de închidere.

Dar footerul? Footerul trebuie să fie inclus, dar va trebui să fie plasat în afara Etichete. Acest lucru se datorează faptului că folosește un fond cu lățime întreagă. Adăuga > footer imediat după eticheta recipientului de închidere.

Terminand

În acest moment, e-mailul nostru ar trebui să fie destul de bun! Cu toate acestea, este posibil să fi observat că fonturile nu se încarcă corect. Am definit $ Corp-font-family variabilă pentru a folosi "Lato", împreună cu rezervoarele. Acesta este un font Google, astfel încât îl putem importa în fișierul app.scss. Asigurați-vă că ați importat acest lucru înainte de orice altceva.

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

Acum e-mailul nostru este terminat, îl putem finaliza și îl putem pregăti pentru distribuire! Utilizând ajutorul comandanților de fundație, putem rula pur și simplu fundație construiască care va minimiza imaginile, css-ul inline și va pune totul în pachet! 

Concluzie

Am făcut-o! Am construit cu succes un e-mail utilizând cadrul de e-mail al Fundației ZURB și biblioteca Panini! Dacă doriți să consultați celelalte caracteristici incluse în Panini, documentația completă este disponibilă.