Share
Cosa starai creandoIn questo tutorial, utilizzeremo ZURB's Foundation for Emails per creare una semplice e-mail funzionante. Esploreremo varie librerie fornite dal framework, in particolare "Panini". Panini ci consente di fare alcune cose, ma ci concentreremo sulla sua funzione di partial.
Useremo un design messo insieme con Web Wireframe Kit disponibile da Envato Elements.
La Fondazione offre due versioni; una versione CSS standard o una che usa Sass. Per questo tutorial ci stiamo appoggiando alla versione di Sass in quanto offre un flusso di lavoro diverso che include il linguaggio dei modelli "Inky", oltre a una maggiore personalizzazione per lo styling.
Presumo che tu abbia già una certa conoscenza di come impostare un progetto usando Foundation, il modo più semplice con la Foundation CLI. Le istruzioni per l'installazione tramite la riga di comando sono disponibili nei documenti della Fondazione. In alternativa, se sei un utente Envato Tuts + o Elements puoi seguire Adi Purdila mentre percorre l'intero processo di installazione.
Una volta fatto questo, possiamo creare un progetto con il seguente comando. Ti verrà quindi chiesto il nome della cartella in cui desideri creare il progetto.
nuova fondazione - email di lavoro
Prima di immergerci in qualsiasi codice, mi piace prima ripulire la mia directory di costruzione. Dovresti vedere a src cartella con la seguente struttura:
Mi piace eliminare tutti i file ad eccezione di index.html all'interno del pagine cartella (non useremo nessuno degli altri). Eliminerò anche il index-layout.html nel layout cartella.
Nota: Come accennato in precedenza, questo non è obbligatorio. Mi piace solo mantenere la mia directory di costruzione bella e pulita.
La versione sass della struttura ci consente di personalizzare i componenti pre-costruiti per il nostro uso. Ho elencato di seguito le modifiche che ho apportato, inclusa l'intestazione di ogni sezione di commento. Sentiti libero di cambiarli nel tuo _settings.scss file o creare un nuovo file e importarlo dopo il file delle impostazioni, ma prima la struttura di base.
// 1. Globale // --------- $ primary-color: # ACACB7; $ grigio chiaro: # F4F4F6; $ grigio medio: # ACACB7; $ dark-gray: # 4E4E56; $ nero: # 000000; $ bianco: #ffffff; $ global-width: 540px; $ body-background: $ bianco; $ global-radius: 6px; // 4. Tipografia // ------------- $ 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. Pulsante // --------- $ pad-button: (piccolo: 4px 8px 4px 8px, piccolo: 5px 10px 5px 10px, valore predefinito: 16px 80px 16px 80px, grande: 10px 20px 10px 20px, ); // 7. Menu // ------- $ menu-item-padding: 10px; $ menu-item-gutter: 10px; $ menu-item-color: $ dark-grey;
Andando avanti, è tempo di aprirsi index.html nel pagine cartella. Qui è dove creeremo il contenuto dell'email. Inizieremo con il seguente codice che include un elemento spaziatore e l'elemento contenitore. Ricorda, stiamo usando il linguaggio dei Templi Inchiostro se questo non ti sembra familiare!
--- oggetto: Foundation for Email - Uso di Panini ---
Abbiamo già iniziato a utilizzare qui le funzionalità di Panini, in particolare Dati personalizzati. Questo è un valore di dati predefinito utilizzato da Foundation. Usa un nome variabile di soggetto che viene quindi inserito nel modello principale per il tag del titolo con soggetto .
Ora possiamo iniziare a usare partial con Panini! Vai avanti e crea un nuovo file chiamato header.html all'interno del src / parziali cartella.
Utilizzeremo il seguente codice per l'intestazione e, anche se non è necessario, mi piacerebbe racchiudere le mie sezioni all'interno di involucro taggare con una classe per l'identificazione:
|
Non visualizzato correttamente?
Avrai notato che ho usato due tag di ancoraggio per il logo. Ciò era dovuto al fatto che il logo era centrato sul cellulare (le immagini necessitano di un centro taggare attorno a loro) così ho usato le classi di visibilità di Foundation per mostrare / nascondere sui dispositivi mobili. Ho anche nascosto il testo del link webversion anche sui dispositivi mobili.
Ora ti stai chiedendo, come facciamo a farlo apparire? Tornando indietro al index.html file, tra il contenitore tag, inserisci il seguente codice all'interno:
> intestazione
Tutto parziale include richiedono > insieme al nome del nome del file parziale, in questo caso, header.html.
Userò anche i seguenti stili per l'intestazione, sentiti libero di metterlo ovunque. Ho creato un file chiamato _styles.scss e l'ho importato tramite app.scss.
// Intestazione // ===================== .header .columns padding-bottom: 0; .logo img larghezza massima: 111px; .webversion a font-size: 14px; colore: ereditare;
Nota: Avrai notato che non ho applicato una larghezza al tag img per il logo (che dovresti normalmente fare!) Il framework di Foundation ha un sacco di stili che fanno sì che l'immagine si espanda a tutta larghezza. In questo caso, poiché sto supportando gli schermi retina, creo immagini @ 2x. Possiamo risolvere questo obiettivo prendendo di mira l'img e applicando a larghezza massima (assicurati di usare larghezza massima, e non solo larghezza).
Per questa sezione, ho deciso di tenerlo all'interno del file index.html; Sentivo che non richiedeva un parziale, ma dipende da come lo gestisci.
|
|
De Finibus Bonorum
E MalorumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed fa eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
// Hero // =================================== .hero . Wrapper-inner padding- bottom: 150px; @media solo schermo e (larghezza massima: # $ global-breakpoint) padding-bottom: 75px! important; .play-video display: block; padding-top: 80px; padding-bottom: 80px; img larghezza massima: 120 px; @media solo schermo e (larghezza massima: # $ global-breakpoint) padding-top: 60px! important; imbottitura-fondo: 60px! importante; img max-width: 60px! important; p font-size: 18px; @media solo schermo e (larghezza massima: # $ global-breakpoint) h1 font-size: 40px! important; p font-size: 16px! important;
Per quanto riguarda lo styling, potresti vedere alcune cose qui che non hai mai visto prima. Abbiamo iniziato a introdurre alcuni stili per le dimensioni mobili, questo viene fatto utilizzando una query multimediale ma Foundation è molto utile e fornisce una variabile Sass per la larghezza massima.
@media solo schermo e (larghezza massima: # $ global-breakpoint)
Ogni volta che si creano stili all'interno della query multimediale, è spesso necessario utilizzare il !importante tag altrimenti gli stili di piccole dimensioni verranno sovrascritti da quelli di grandi dimensioni.
Quindi restano tre sezioni da completare: Progetti, Testimonianze e Piè di pagina. Ognuno può essere inserito nel proprio file all'interno di src / parziali cartella.
|
Progetti popolari
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
|
|
Non prendere solo la nostra parola per questo
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fa eusmod tempo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. "
Cliente
Titolo
// Projects // =================================== .projects @media solo schermo e (max -width: # $ global-breakpoint) h2 font-size: 28px! important; p font-size: 14px! important; // Testimonianze // ===================================. Testimonianze . Wrapper-inner padding-top: 150px; padding-bottom: 100px; @media solo schermo e (larghezza massima: # $ global-breakpoint) padding-top: 75px! important; padding-bottom: 50px! important; .user-icon larghezza massima: 90px; .quote font-size: 18px; .star-rating larghezza massima: 94px; .title color: $ medium-gray; @media solo schermo e (larghezza massima: # $ global-breakpoint) h2 font-size: 28px! important; p font-size: 14px! important; .quote font-size: 16px! important; // Footer // =================================== .footer background: $ light -grigio; .container background: $ grigio chiaro; .wrapper-inner padding-top: 32px; padding-bottom: 10px; .social img larghezza massima: 40px; .menu .menu-item a font-weight: 700;
Ora abbiamo creato i partial finali che possiamo farli includere nel nostro index.html. Vai avanti e aggiungi > progetti e > testimonianze immediatamente dopo il tag di chiusura hero wrapper.
Ma per quanto riguarda il footer? Il piè di pagina deve essere incluso, ma dovrà essere posizionato all'esterno > footer subito dopo il tag del contenitore di chiusura.
A questo punto, la nostra email dovrebbe essere abbastanza buona! Tuttavia, potresti aver notato che i caratteri non si caricano correttamente. Abbiamo definito il $ Body-font-family variabile per utilizzare "Lato", insieme a fallback. Questo è un tipo di carattere Google, quindi possiamo importarlo nel file app.scss. Assicurati di importarlo prima di ogni altra cosa.
Accentsconagua
@import url ('https://fonts.googleapis.com/css?family=Lato:400,700');Ora la nostra e-mail è finita, possiamo finalizzarla e prepararla per la distribuzione! Usando gli helper del comando di base possiamo semplicemente eseguire build di fondazione che ridimensionerà le immagini, css in linea e impacchetterà tutto!
L'abbiamo fatto! Abbiamo creato con successo un'e-mail utilizzando l'infrastruttura Email di ZURB Foundation e la libreria Panini! Se desideri esaminare le altre funzionalità incluse in Panini, è disponibile la documentazione completa.
