Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Emails
Webdesign

Foundation for Emails: How to Use Panini Partials

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Muhlis Tirowali (you can also view the original English article)

Final product image
What You'll Be Creating

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.

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.

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!

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:

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:

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.

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.

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.

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

testimonials.html

footer.html

Gaya

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.

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.