Foundation untuk pemula: Sticky Navgation, Flexible Video dan Zepto

() translation by (you can also view the original English article)

Pada salah satu bagian pembelajaran kita di Zurb Foundation ini, kita akan berbicara tentang Magellan, yang menciptakan sticky navigation. Kita akan melihat visibility classes, right-to-left support, keystrokes, thumbnails, flexible video dan the ins dan outs dari zepto. Saya akan menjelaskan kasus penggunaan dari fitur ini dan bagaimana cara terbaik untuk mengimplementasikannya kedalam projek mu.

Dalam sesi ini kita telah membahas sebagian besar dari framework Foundation dan masih ada cara yang lebih baik. Mari sekarang lihat ke beberapa fitur yang dapat kamu terapkan dengan cepat ke dalam situs kamu. Sekarang kita akan memulai dengan plugin JavaScript, namanya Magellan dan memungkinkan anda untuk menambahkan sticky navigation ke dalam projekmu.

Magellan

Tidak biasanya untuk seorang klien meminta untuk fixed navigation di halaman ketika pengguna menavigasi jauh dari standart navigation, seperti scrolling halaman ke bawah. Magellan datang untuk menyelamatkan, menambahkan fixed navigation di halaman ketika pengguna scrolling melewati titik tertentu.

Dengan markup sederhana sangat mudah untuk memulainya.

<div data-magellan-expedition="fixed">
  <ul class="sub-nav">
    <li data-magellan-arrival="contact"><a href="#">Contact</a></li>
    <li data-magellan-arrival="about"><a href="#">About</a></li>
  </ul>
</div>

Menempatkan semuanya di div, ini seharusnya menjadi cepat dan mudah untuk dibuat dan dijalankan. Ada 2 atribut special di Magellan; data-magellan-expedition yang digunakan untuk tipe posisi dan data-magellan-arrival yang bisa dipasangkan dengan sejenis page anchor.

Karena plugin JavaScript ini sangat ringan, satu-satunya pilihan lain yang perlu kamu ketahui adalah opsi-opsi yang dapat diteruskan pada inisialisasi.

$(document).foundation('magellan',{
  // specify the class used for active sections
  activeClass: 'active',
  // how many pixels until the magellan bar sticks, 0 = auto
  threshold: 0
});

Sekali lagi, 2 pilihan disini; tetapkan custom magellan class dan tetapkan titik di page dimana magellan akan beraksi.

Visibility

Sekarang kamu lihat, sekarang tidak! Cukup sering itu terjadi, bisa di akali dengan setel ulang semua kontenmu untuk ukuran layar yang berbeda. Dengan Foundation's visibility classes kamu dapat dengan mudah menampilkan lebih atau sedikit elemen tergantung pada setelan breakpoint. Mari mulai dengan "show" classes, semua cukup sederhana dengan berbagai varian breakpoint untuk dimainkan. Saya menemukan visibility classes paling berguna ketika saya ingin menambahkan atau menghapus elemen diantara smartphone dan desktop, mungkin untuk perangkat seperti iPad.

.show-for-small       /* Visible up to 768px */
.show-for-medium-down /* Visible from 768px down */
.show-for-medium      /* Visible between 768px and 1280px */
.show-for-medium-up   /* Visible from 768px up */
.show-for-large-down  /* Visible from 1280px down */
.show-for-large       /* Visible between 1280px and 1440px */
.show-for-large-up    /* Visible from 1280px up */
.show-for-xlarge      /* Visible above 1440px only */

Untuk menyembunyikan element di breakpoint yang sama cukup gunakan "hide" daripada "show". Mungkin kamu ingin spesifik orientation-based class? ini juga termasuk. Kamu juga akan melihat classes untuk touch juga. Dimanjakan pilihan disini.

.show-for-landscape   /* Visible for landscape orientation */
.show-for-portrait    /* Visible for portrait orientation */
.hide-for-landscape   /* Hidden for landscape orientation */
.hide-for-portrait    /* Hidden for portrait orientation */

/* The touch detection classes */
.show-for-touch       /* Visible for touch enabled devices */
.hide-for-touch       /* Hidden for touch enabled devices */

Sekali lagi, ini akan menjadi lebih mudah jika kamu berada di tempat yang sempit dan butuh menyembunyikan beberapa elemen atau, sebaliknya, jika kamu berada di ruang yang luas kamu bisa memasukan beberapa elemen kedalam.

RTL Support

Saya pikir saya akan membahas ini dengan cepat karena tidak ada yang benar-benar menyebutkan rigth-to-left support.

Ini sangatlah berguna jika kamu pernah memounyai projek internasional dengan user base arabic-centric (misalnya). Ambil Persia, yang menggunakan versi modifikasi dari Arabic alphabet, yang menggunakan teks right-to-left. Sedangkan situs situs seperti BBC news menunjukkan fungsi ini, mereka memiliki tim pengembang yang berani mengambil tantangan desain ini. Di Foundation, semua ada untukmu.

1	<html class="no-js" lang="ar" dir="rtl">

Menggantikan html tagmu dengan ini dan kamu akan jalan. Tunggu, aku tahu apa yang kamu pikirkan, Aku tidak ingin Arabic, benar? Jangan khawatir, Chinese zh, Farsi fa, Hebrew he/iw, Japanese ja, Urdu ur, Yiddish yi/ji juga mendukung. Cukup ubah nilai atribut "lang" dengan bahasa pilihan kamu.

Keystrokes

Saya bertaruh banyak dari kamu telah mengunduh Foundation telah mengambil alih keystrokes checkbox karena kamu tidak tahu apa itu. Benar? Baik, jika kamu belum membaca dokumentasi, kamu akan mencari tahu.

Keystrokes membungkus seluruh teks dan menampilkan mereka sebagai sebuah key. Jadi, daripada mengatakan press control, alt, dan delete cara lama yang membosankan kamu bisa mereapikannya dan berikan beberapa arti.

1	<kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>del</kbd>

Sederhana tapi efektif, terutama jika kamu mempunyai key yang ditetapkan pada fungsi fungsi tertentu seperti membuat tombol kontrol arah orbit slider.

Thumbnails

Thumbnails adalah cara yang paling cepat untuk styling gambar kecil dengan anchor.

Ini adalah salah satu detail kecil yang menambah keajaiban itu adalah Foundation. Ambil sebuah gambar, masukan kedalam tag <a class="th"> dengan class "th". Boom. Kerjaan selesai. Ini bagus untuk projek projek kamu yang mempunyai sedikit atau tanpa desain input, sebagai pengembang kamu bisa membuat situs terlihat keren dengan style minimal yang termasuk dalam framework.

<a href="#" class="th" >

<img src="images/funkyTown.jpg" alt="Get down to funky town" />

</a>

Flex Video

Embedding video bisa membuat pusing, terutama dengan video player lama berbasis flash yang mempunyai setelan ganda dari dimension attributes (ugh, sangat tidak nyaman) membuat video responsive juga butuh usaha. Solusinya gampang; kamu ingin menambahkan favorite video kucing lucu kamu ke situs kamu, tapi hal yang membosankan itu akan terpotong, atau terputus ketika kamu menontonnya di ponselmu setiap malam sebelum tidur, atau setiap pagi di iPad saat berada di kamar mandi. Dengan flex-video kamu bisa menghembuskan napas lega dan nonton lagi kucingnya.

Bungkus semua video dari situs populer (seperti Youtube dan Vimeo) di div dengan class "flex-video", maka foundation akan menjaga rasio aspek di tempat, penskalaan video dan mencegah cacat mengerikan atau cincang pada kucing.

<div class="flex-video">

<iframe width="420" height="315" src="//www.youtube.com/embed/RcVyl9X3gFo" frameborder="0" allowfullscreen></iframe>

</div>

Zepto

Di setiap paket dari framework Foundation terdapat JavaScript library khusus bernama "zepto", yang sifatnya hampir sama dengan jQuery.

Pada memuat halaman Foundation terlihat zepto akan berjalan, jika tidak maka jQuery dikirim ke naughty step. Masalahnya adalah, meskipun, zepto bukanlah pengganti lengkap untuk jQuery. Kenyataannya, kurang lebih 7.100 garis kode lebih ringkas daripada jQuery, jadi mengapa pakai ini dan mengapa Foundation akan membuang jQuery untuk JavaScript Ini?

Zepto menduplikasi cukup banyak fitur jQuery yang diatur untuk mengatasi semua perintah dasar yang dikeluarkan oleh Foundation. Menggunakan library yang jauh lebih ringan dan langkah cerdas karena kerangka kerjanya adalah mobile-first - dibutuhkan lebih dari beberapa detik untuk memuat jQuery dari perangkat seluler melalui koneksi seluler. itu tambahan kode tidak lebih dari 7.100 baris kode, karena mereka mengurus semua kompatibilitas animasi dan browser yang keren, di antara hal-hal lain.

Saya pengguna animasi jQuery yang cukup sering, jadi saya cenderung hanya membuang zepto dari awal. Namun, saya baru-baru ini mengerjakan proyek yang hanya bersifat seluler dan yang tidak memerlukan animasi jQuery; menggunakan zepto memberi pengguna waktu pemuatan penuh 2,3 detik lebih cepat. Jadi jika kamu bisa mengerjakan tanpa jQuery, maka zepto adalah pengganti tulang punggung.

Tool Berguna

Berikan pengguna pengguna kamu sesuatu yang yang dilakukan ketika mereka mau tidak mau tersesat ke jalan buntu di website kamu, 404 invader game!

Ditemukan di situs web: werk, ini adalah cara yang menyenangkan dan berpotensi membuat kecanduan untuk tersesat di proyek situsmu berikutnya. Gunakan tombol panah kamu untuk mengendalikan senapan <kbd>A</kbd> & <kbd>S</kbd> untuk bergerak dan <kbd>space</kbd> untuk menembak (lihat apa yang saya lakukan di sana?)

Yang Akan Datang

Dalam artikel berikutnya kita akan mengupas SASS, bagaimana mendapatkan versi SASS dari Foundation, mengaturnya, alat-alat yang kamu perlukan dan gambaran singkat tentang bagaimana menggunakan preprocessor style perkasa ini dalam proyek-proyek kamu yang akan datang.