() translation by (you can also view the original English article)
Dalam tutorial ini, kami akan menggunakan Dasar-dasar ZURB's untuk Surat Elektronik untuk membuat surat elektronik berfungsi sederhana. Kami akan mengeksplorasi berbagai perpustakaan yang disediakan oleh kerangka kerja, khususnya "Panini". Panini memungkinkan kita melakukan beberapa hal tapi kita akan fokus pada fitur parsial-nya.
Kami akan menggunakan desain bersama dengan Web Wireframe Kit yang tersedia dari Elemen Envato.
Menyiapkan Proyek Kita
Foundation menawarkan dua versi; versi CSS standar atau satunya yang menggunakan Sass. Untuk tutorial ini kita akan mempelajari pada versi Sass karena menawarkan alur kerja yang berbeda yang mencakup bahasa berpola "seperti tinta", maupun lebih banyak penyesuaian untuk menggayakan.
Saya akan menganggap anda sudah memiliki beberapa pengetahuan tentang bagaimana mengatur sebuah proyek dengan menggunakan Foundation, cara termudah adalah dengan Foundation CLI. Petunjuk pemasangan melalui command line tersedia di dokumen Foundation. Sebagai alternatif, jika anda adalah pelanggan Envato Tuts + atau Elemen, Anda bisa mengikuti Adi Purdila saat dia melewati keseluruhan proses instalasi.
Setelah melakukan ini, kita bisa membuat proyek dengan perintah berikut. Anda kemudian akan ditanyai nama berkas yang ingin anda buat di dalamnya.
1 |
foundation new --framework emails |
Sebelum kita mendalami kedalam kode apapun, saya ingin membersihkan petunjuk mendasar saya terlebih dahulu. Anda harus melihat berkas src dengan struktur berikut:
- Assets (Modal)
- Helpers (Pembantu)
- Layouts (tata letak)
- Pages (halaman)
- Partials (Sebagian)
Saya ingin menghapus semua file dengan pengecualian index.html di dalam berkas pages (halaman) (kita tidak akan menggunakan yang lain). Saya juga akan menghapus index-layout.html di berkas layout (tata letak).
Catatan: Seperti disebutkan di atas, ini tidak wajib. Saya hanya ingin menyimpan petunjuk mendasar saya baik dan bersih.
file _settings.scss
Versi sass dalam kerangka memungkinkan kita untuk menyesuaikan komponen sebelum membangun untuk kita gunakan sendiri. Saya telah mencantumkan di bawah perubahan yang telah saya buat, termasuk setiap header (bagian atas) bagian komentar. Perasaan bebas untuk mengubahnya di file _settings.scss anda atau membuat file baru dan mengimpornya setelah file pengaturan, tapi sebelum kerangka foundation satu.
1 |
// 1. Global |
2 |
// --------- |
3 |
|
4 |
$primary-color: #ACACB7; |
5 |
$light-gray: #F4F4F6; |
6 |
$medium-gray: #ACACB7; |
7 |
$dark-gray: #4E4E56; |
8 |
$black: #000000; |
9 |
$white: #ffffff; |
10 |
$global-width: 540px; |
11 |
$body-background: $white; |
12 |
$global-radius: 6px; |
13 |
|
14 |
// 4. Typography |
15 |
// ------------- |
16 |
|
17 |
$global-font-color: $dark-gray; |
18 |
$body-font-family: 'Lato', Helvetica, Arial, sans-serif; |
19 |
$global-line-height: 1.5; |
20 |
$header-font-weight: 700; |
21 |
$h1-font-size: 48px; |
22 |
$h2-font-size: 32px; |
23 |
$h3-font-size: 30px; |
24 |
$h4-font-size: 24px; |
25 |
$h5-font-size: 18px; |
26 |
$h6-font-size: 16px; |
27 |
$header-margin-bottom: 0; |
28 |
$paragraph-margin-bottom: 0; |
29 |
|
30 |
// 5. Button |
31 |
// --------- |
32 |
|
33 |
$button-padding: ( |
34 |
tiny: 4px 8px 4px 8px, |
35 |
small: 5px 10px 5px 10px, |
36 |
default: 16px 80px 16px 80px, |
37 |
large: 10px 20px 10px 20px, |
38 |
);
|
39 |
|
40 |
// 7. Menu |
41 |
// ------- |
42 |
|
43 |
$menu-item-padding: 10px; |
44 |
$menu-item-gutter: 10px; |
45 |
$menu-item-color: $dark-gray; |
Mari Mulai Persandian!
Bergerak terus, saatnya membuka index.html di berkas pages (halaman). Di sinilah kita akan membuat konten (isi) surat elektronik. Kita akan mulai dengan kode berikut yang mencakup elemen pengatur jarak dan elemen kotak. Ingatlah, kami menggunakan bahasa berpola seperti tinta jika ini terlihat asing!
1 |
--- |
2 |
subject: Foundation for Emails - Using Panini |
3 |
--- |
4 |
|
5 |
<spacer size="25"></spacer> |
6 |
|
7 |
<container>
|
8 |
|
9 |
</container>
|
Kita sudah mulai menggunakan fitur Panini disini, khusus Data berdasarkan Pesanan. Ini adalah nilai data kegagalan yang digunakan oleh Foundation. Ini menggunakan nama variabel dari subjek yang kemudian ditarik melalui pola master (utama) untuk menandai judul dengan {{ subjek }}.
Header (Bagian Atas)
Sekarang kita bisa mulai mulai menggunakan parsial (sebagian) dengan Panini! Silakan membuat file baru yang disebut header.html di berkas src/partial.
Kami akan menggunakan kode berikut untuk header (Bagian Atas), dan sementara itu tidak perlu, saya ingin menyembunyikan bagian saya di dalam label wrammper bersama dengan sebuah pengelompokan untuk identifikasi:
1 |
<wrapper class="header"> |
2 |
<row>
|
3 |
<columns small="12" large="6" valign="middle"> |
4 |
<a href="#" class="logo show-for-large"> |
5 |
<img src="assets/img/logo.png" alt="Company Name"> |
6 |
</a>
|
7 |
|
8 |
<a href="#" class="logo hide-for-large"> |
9 |
<center>
|
10 |
<img src="assets/img/logo.png" alt="Company Name"> |
11 |
</center>
|
12 |
</a>
|
13 |
</columns>
|
14 |
<columns small="12" large="6" valign="middle" class="show-for-large"> |
15 |
<p class="webversion text-right"> |
16 |
<a href="#">Not displaying properly?</a> |
17 |
</p>
|
18 |
</columns>
|
19 |
</row>
|
20 |
</wrapper><!-- END .header --> |
Anda mungkin telah memperhatikan bahwa saya telah menggunakan dua label jangkar untuk logo tersebut. Hal ini disebabkan karena logo dipusatkan pada telepon seluler (gambar memerlukan sebuah label tengah di sekitarnya), jadi saya menggunakan kelas penglihatan Foundation untuk ditampilkan / disembunyikan di telepon seluler. Saya juga menyembunyikan teks bertautan versi web di telepon seluler juga.
Sekarang anda bertanya-tanya, bagaimana kita mendapatkan ini untuk dimunculkan? Kembali ke file index.html, di antara label kotak, letakkan kode berikut di dalamnya:
1 |
{{> header}}
|
Semua parsial (sebagian) didalamnya memerlukan {{>}} beserta nama nama file parsial (sebagian), dalam hal ini, header.html.
Saya akan menggunakan gaya berikut untuk header (Bagian Atas) juga, merasa bebas untuk menempatkan ini di mana saja. Saya membuat sebuah file bernama _styles.scss dan mengimpornya melalui app.scss.
1 |
// Header |
2 |
// =================================== |
3 |
.header { |
4 |
.columns { |
5 |
padding-bottom:0; |
6 |
}
|
7 |
|
8 |
.logo { |
9 |
img { |
10 |
max-width:111px; |
11 |
}
|
12 |
}
|
13 |
|
14 |
.webversion { |
15 |
a { |
16 |
font-size:14px; |
17 |
color:inherit; |
18 |
}
|
19 |
}
|
20 |
}
|
Catatan: Anda mungkin telah memperhatikan bahwa saya tidak menerapkan lebar pada label img untuk logo (yang biasanya anda lakukan!) Kerangka Foundation memiliki banyak gaya yang menyebabkan gambar melebar ke lebar penuh. Dalam kasus ini, karena saya mendukung layar retina, saya membuat gambar @2x. Kita bisa menyelesaikannya dengan menargetkan img dan menerapkan maks-width (pastikan untuk menggunakan maks-width, dan tidak hanya width).
Bagian Pelaku Utama
Untuk bagian ini, saya memutuskan untuk menyimpannya di dalam file index.html; Saya merasa itu tidak memerlukan parsial (sebagian), tapi terserah anda bagaimana anda menanganinya.
1 |
<wrapper class="hero"> |
2 |
<row>
|
3 |
<columns small="12" large="12"> |
4 |
<a href="#" class="play-video"> |
5 |
<center>
|
6 |
<img src="assets/img/play-icon.png" alt="Play"> |
7 |
</center>
|
8 |
</a>
|
9 |
</columns>
|
10 |
</row>
|
11 |
|
12 |
<row>
|
13 |
<columns small="12" large="12"> |
14 |
<h1 class="text-center">De Finibus Bonorum<br class="show-for-large"> & Malorum</h1> |
15 |
|
16 |
<spacer size="30"></spacer> |
17 |
|
18 |
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> |
19 |
|
20 |
<spacer size="40"></spacer> |
21 |
|
22 |
<center>
|
23 |
<button href="#" class="radius small-expanded">Sign Up</button> |
24 |
</center>
|
25 |
</columns>
|
26 |
</row>
|
27 |
</wrapper><!-- END .hero --> |
1 |
// Hero |
2 |
// =================================== |
3 |
.hero { |
4 |
.wrapper-inner { |
5 |
padding-bottom:150px; |
6 |
|
7 |
@media only screen and (max-width: #{$global-breakpoint}) { |
8 |
padding-bottom:75px !important; |
9 |
}
|
10 |
}
|
11 |
|
12 |
.play-video { |
13 |
display:block; |
14 |
padding-top:80px; |
15 |
padding-bottom:80px; |
16 |
|
17 |
img { |
18 |
max-width:120px; |
19 |
}
|
20 |
|
21 |
@media only screen and (max-width: #{$global-breakpoint}) { |
22 |
padding-top:60px !important; |
23 |
padding-bottom:60px !important; |
24 |
|
25 |
img { |
26 |
max-width:60px !important; |
27 |
}
|
28 |
}
|
29 |
}
|
30 |
|
31 |
p { |
32 |
font-size:18px; |
33 |
}
|
34 |
|
35 |
@media only screen and (max-width: #{$global-breakpoint}) { |
36 |
h1 { |
37 |
font-size:40px !important; |
38 |
}
|
39 |
|
40 |
p { |
41 |
font-size:16px !important; |
42 |
}
|
43 |
}
|
44 |
}
|
Sejauh menggayakan diselesaikan, Anda mungkin melihat beberapa hal di sini , anda belum pernah lihat sebelumnya. Kami sudah mulai memperkenalkan beberapa gaya untuk ukuran telepon seluler, ini dilakukan dengan menggunakan media pertanyaan namun Foundation sangat membantu dan menyediakan variabel Sass untuk lebar maksimal.
1 |
@media only screen and (max-width: #{$global-breakpoint}) |
Setiap kali menciptakan gaya dalam media pertanyaan, Anda perlu sering menggunakan label !important jika gaya ukuran kecil akan ditimpa oleh yang besar.
Parsial (Sebagian) yang Tersisa
Jadi kami memiliki tiga bagian yang tersisa untuk diselesaikan: Proyek, Tanda Pujian dan Footer (Bagian Bawah). Masing-masing dapat ditempatkan di file sendiri dalam berkas src/parsial.
projects.html
1 |
<wrapper class="projects"> |
2 |
<row>
|
3 |
<columns snall="12" large="12"> |
4 |
<h2 class="text-center">Popular Projects</h2> |
5 |
|
6 |
<spacer size="20"></spacer> |
7 |
|
8 |
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> |
9 |
|
10 |
<spacer size="20"></spacer> |
11 |
</columns>
|
12 |
</row>
|
13 |
|
14 |
<row>
|
15 |
<columns small="12" large="6"> |
16 |
<a href="#"><img src="assets/img/project-thumb.png" alt="Project Name"></a> |
17 |
</columns>
|
18 |
<columns small="12" large="6"> |
19 |
<a href="#"><img src="assets/img/project-thumb.png" alt="Project Name"></a> |
20 |
</columns>
|
21 |
</row>
|
22 |
|
23 |
<row>
|
24 |
<columns small="12" large="6"> |
25 |
<a href="#"><img src="assets/img/project-thumb.png" alt="Project Name"></a> |
26 |
</columns>
|
27 |
<columns small="12" large="6"> |
28 |
<a href="#"><img src="assets/img/project-thumb.png" alt="Project Name"></a> |
29 |
</columns>
|
30 |
</row>
|
31 |
|
32 |
<row>
|
33 |
<columns small="12" large="6"> |
34 |
<a href="#"><img src="assets/img/project-thumb.png" alt="Project Name"></a> |
35 |
</columns>
|
36 |
<columns small="12" large="6"> |
37 |
<a href="#"><img src="assets/img/project-thumb.png" alt="Project Name"></a> |
38 |
</columns>
|
39 |
</row>
|
40 |
</wrapper><!-- END .projects --> |
testimonials.html
1 |
<wrapper class="testimonials"> |
2 |
<row>
|
3 |
<columns small="12" large="12"> |
4 |
<h2 class="text-center">Don’t Just Take Our Word For It</h2> |
5 |
|
6 |
<spacer size="20"></spacer> |
7 |
|
8 |
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> |
9 |
|
10 |
<spacer size="20"></spacer> |
11 |
</columns>
|
12 |
</row>
|
13 |
|
14 |
<row>
|
15 |
<columns small="12" large="4" class="show-for-large"> |
16 |
<center>
|
17 |
<img src="assets/img/user-icon.png" alt="User Name" class="user-icon"> |
18 |
</center>
|
19 |
</columns>
|
20 |
<columns small="12" large="4"> |
21 |
<center>
|
22 |
<img src="assets/img/user-icon-primary.png" alt="User Name" class="user-icon"> |
23 |
</center>
|
24 |
</columns>
|
25 |
<columns small="12" large="4" class="show-for-large"> |
26 |
<center>
|
27 |
<img src="assets/img/user-icon.png" alt="User Name" class="user-icon"> |
28 |
</center>
|
29 |
</columns>
|
30 |
</row>
|
31 |
|
32 |
<row>
|
33 |
<columns small="12" large="12"> |
34 |
<spacer size="40" class="show-for-large"></spacer> |
35 |
|
36 |
<spacer size="20" class="hide-for-large"></spacer> |
37 |
|
38 |
<p class="quote text-center">“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.”</p> |
39 |
|
40 |
<spacer size="30"></spacer> |
41 |
|
42 |
<center>
|
43 |
<img src="assets/img/star-rating.png" alt="4 out of 5 Stars" class="star-rating"> |
44 |
</center>
|
45 |
|
46 |
<spacer size="20"></spacer> |
47 |
|
48 |
<h6 class="user-name text-center">Customer</h6> |
49 |
|
50 |
<spacer size="10"></spacer> |
51 |
|
52 |
<p class="title text-center">Title</p> |
53 |
</columns>
|
54 |
</row>
|
55 |
</wrapper><!-- END .testimonials --> |
footer.html
1 |
<wrapper class="footer"> |
2 |
<container>
|
3 |
<row>
|
4 |
<columns small="4" large="5"> |
5 |
<a href="#" class="facebook social"><img src="assets/img/social-facebook.png" alt="Facebook" class="float-right"></a> |
6 |
</columns>
|
7 |
<columns small="4" large="2"> |
8 |
<a href="#" class="twitter social"><img src="assets/img/social-twitter.png" alt="Twitter" class="float-center"></a> |
9 |
</columns>
|
10 |
<columns small="4" large="5"> |
11 |
<a href="#" class="youtube social"><img src="assets/img/social-youtube.png" alt="YouTube" class="float -left"></a> |
12 |
</columns>
|
13 |
</row>
|
14 |
|
15 |
<row>
|
16 |
<columns small="12" large="12"> |
17 |
<center>
|
18 |
<menu>
|
19 |
<item href="#">Link 1</item> |
20 |
<item href="#">Link 2</item> |
21 |
<item href="#">Link 3</item> |
22 |
<item href="#">Link 4</item> |
23 |
</menu>
|
24 |
</center>
|
25 |
</columns>
|
26 |
</row>
|
27 |
</container>
|
28 |
</wrapper><!-- END .footer --> |
Gaya
1 |
// Projects |
2 |
// =================================== |
3 |
.projects { |
4 |
@media only screen and (max-width: #{$global-breakpoint}) { |
5 |
h2 { |
6 |
font-size:28px !important; |
7 |
}
|
8 |
|
9 |
p { |
10 |
font-size:14px !important; |
11 |
}
|
12 |
}
|
13 |
}
|
14 |
|
15 |
|
16 |
// Testimonials |
17 |
// =================================== |
18 |
.testimonials { |
19 |
.wrapper-inner { |
20 |
padding-top:150px; |
21 |
padding-bottom:100px; |
22 |
|
23 |
@media only screen and (max-width: #{$global-breakpoint}) { |
24 |
padding-top:75px !important; |
25 |
padding-bottom:50px !important; |
26 |
}
|
27 |
}
|
28 |
|
29 |
.user-icon { |
30 |
max-width:90px; |
31 |
}
|
32 |
|
33 |
.quote { |
34 |
font-size:18px; |
35 |
}
|
36 |
|
37 |
.star-rating { |
38 |
max-width:94px; |
39 |
}
|
40 |
|
41 |
.title { |
42 |
color:$medium-gray; |
43 |
}
|
44 |
|
45 |
@media only screen and (max-width: #{$global-breakpoint}) { |
46 |
h2 { |
47 |
font-size:28px !important; |
48 |
|
49 |
}
|
50 |
|
51 |
p { |
52 |
font-size:14px !important; |
53 |
}
|
54 |
|
55 |
.quote { |
56 |
font-size:16px !important; |
57 |
}
|
58 |
}
|
59 |
}
|
60 |
|
61 |
|
62 |
// Footer |
63 |
// =================================== |
64 |
.footer { |
65 |
background:$light-gray; |
66 |
|
67 |
.container { |
68 |
background:$light-gray; |
69 |
}
|
70 |
|
71 |
.wrapper-inner { |
72 |
padding-top:32px; |
73 |
padding-bottom:10px; |
74 |
}
|
75 |
|
76 |
.social { |
77 |
img { |
78 |
max-width:40px; |
79 |
}
|
80 |
}
|
81 |
|
82 |
.menu { |
83 |
.menu-item { |
84 |
a { |
85 |
font-weight:700; |
86 |
}
|
87 |
}
|
88 |
}
|
Termasuk Parsial (Sebagian) yang Tersisa
Sekarang kita telah membuat bagian akhir yang bisa kita dapatkan di dalam index.html kita. Lanjutkan dan tambahkan {{> proyek}} dan {{> tanda pujian}} segera setelah menutup label sampul pemeran utama.
Tapi bagaimana dengan footer (bagian bawah) itu? Footer (bagian bawah) memang perlu disertakan namun perlu ditempatkan di luar label <container>. Hal Ini karena menggunakan sebuah latar belakang lebar penuh. Tambahkan {{> footer}} lurus setelah label kotak penutup.
Menyelesaikanya
Pada titik ini, surat elektronik kita seharusnya terlihat bagus! Namun, anda mungkin melihat bahwa huruf tidak dimuat dengan benar. Kami mendefinisikan variabel $tubuh-font-family untuk menggunakan "Lato", bersama dengan fallback (mundur). Ini adalah huruf Google sehingga kita dapat mengimpornya di file app.scss. Pastikan untuk mengimpor ini sebelum hal lain.
1 |
@import url('https://fonts.googleapis.com/css?family=Lato:400,700'); |
Sekarang surat elektronik kita sudah selesai, kita bisa menyelesaikannya dan membuatnya siap untuk distribusikan! Dengan menggunakan pembantu perintah foundation, kita bisa menjalankan foundation yang akan memilah-milah gambar, segaris css dan mengemas semuanya!
Kesimpulan
Kita telah melakukannya! Kita telah berhasil membuat surat elektronik menggunakan kerangka surat elektronik ZURB Foundation dan perpustakaan Panini! Jika anda ingin melihat fitur lainnya yang disertakan dalam Panini, dokumentasi lengkap telah tersedia.
