Sunday, November 29, 2015

Semua Hal yang Harus Diketahui Tentang Zurb Foundation 6

Zurb Foundation 6

Semua Hal yang Harus Diketahui Tentang Zurb Foundation 6 - Zurb Foundation rilis generasi 6 dan lebih baik daripada pendahulunya, Foundation 6 diyakini akan lebih ramping, sederhana, namun lebih canggih. Zurb telah kalah sendiri. Saat ini Foundation 6 hanya dapat diinstal melalui package manager, tapi Juragan enggak bohong bahwa Foundation 6 memang mengagumkan.

Foundation 6 features

Juragan sulit mengatakan bahwa versi ini minim fitur, Foundation 6 punya semua yang kamu butuhkan bahkan lebih, tetapi perlu dicatat bahwa beberapa elemen yang lebih cocok untuk aplikasi sudah dihapus, Karena elemen elemen tersebut menjadi bagian Foundation for Apps.

Versi ini berbicara tentang performa. Setelah kamu pelajari kamu dapat membangun website dengan lebih cepat, situs tersebut akan di-load lebih bail, dan JavaScript akan berjalan lebih epik. Foundation 6 hampir setengah lebih ringan dari segi ukuran file. Setengah !

New features

Explicit support untuk bahasa RTL

Versi ini mendukung bahasa RTL (yang ditulis dari kanan ke kiri) seperti bahasa Arab; walaupun tetap membutuhkan beberapa tweaking. Foundation 6 memiliki built in support untuk hal ini.

Flex grid

Flex Grid adalah komponen Grid yang dibuat dengan Flexbox. Ini mungkin memberikan sejumlah fitur dan pilihan dalam mengatasi keterbatasan Float-based Grid. Namun disisi lain, mungkin tidak berjalan dengan baik, terutama oleh Internet Explore.

Typography helper classes

Beberapa enhancements tambahan keren untuk website typography. Secara khusus, ada kelas pembantu yang dirancang untuk membuat layout typography :
  • Text alignment class
  • Subheader class – Menerapkan warna lebih terang untuk setiap pos dengan class .subheader
  • Lead paragraph styles
  • Un-bulleted lists
  • Statistics – Menerapkan ukuran font yang lebih besar untuk nomor penting 

Navigation

Semua komponen navigasi sebelumnya mendapat digabung menjadi komponen yang fleksibel. Ini berarti bahwa semua jenis navigasi akan berjalan dengan baik satu sama lain. Ini juga berarti bahwa kamu dapat memilih berbagai jenis navigasi untuk ukuran layar yang berbeda.

Kamu ingin drill-down navigasi pada smartphone atau horizontal-bar pada desktop ? Itu sangat mudah dengan kelas ukuran layar yang spesifik. Ingin top-bar kembali ? Hanya menambahkan div wrapper pada komponen menu default.

Walaupun untuk menggunakan keseluruhan fitur sangat sederhana, pastikan untuk membaca dokumentasi tentang menu dan navigasi (kebiasaan orang indonesia).

Badge

Kamu sudah tahu lingkaran kecil atau kotak (biasanya ditempatkan pada atau dekat ikon) dengan beberapa macam angka kecil di dalamnya ? Seperti pemberitahuan Facebook ? yups mereka adalah badges atau lencana. Foundation 6 memiliki fitur tersebut dengan lebih baik.

Sticky

Perlu membuat sesuatu tetap pada posisinya saat pengunjung melakukan scroll pada website kamu ? Ingin membuatnya berhenti pada posisi tertentu ? Sticky adalah solusinya ! Fitur ini juga digunakan jika kamu ingin membuat Magellan menu pada Foundation 5.

Toggler

Dalam kasus dropdown,  accordions, drilldowns, tooltips, dan modals tidak cukup untuk kebutuhan kamu, berikut adalah cara umum untuk membuat toggle (muncul atau menghilang). Ini adalah cara untuk beralih dari toogle berbasis JavaScript.

Media object

Nah, dari namanya ini adalah elemen dimana kamu dapat menanamkan video atau objek Flash. Yup, Fitur ini untuk menampilkan objek media seperti gambar dan lain lain.

Misal, kamu bisa menempatkan avatar sebelah username dan field komentar di bagian field komentar user. Atau, kamu mungkin menggunakannya untuk menempatkan tanggal rilis film, aktor utama, dan meta data lainnya di sebelah review film. Cek dokumentasi untuk contoh lebih lengkap.

Fitur yang pada dasarnya sama seperti sebelumnya

Setiap fitur telah diperbarui atau ditulis ulang. Namun, banyak yang secara fungsional tidak berubah. Periksa dokumentasi untuk memastikan class yang kamu tulis sudah benar. Berikut adalah fitur-fitur yang masih sama :
  • Abide – form validation
  • Accordions
  • Basic global styles
  • Breadcrumb navigation
  • Buttons
  • Callouts
  • Color mixins
  • Dropdown menus
  • Equalizer – column alignment
  • Flex Video
  • Forms
  • Interchange responsive content
  • Label
  • Magellan –  Secara default sudah tidak sticked
  • Media queries - Perlu dicatat bahwa break point sudah berubah)
  • Off-canvas
  • Pagination
  • Progress bars
  • Reveal
  • Sliders
  • Switches
  • Tables
  • Tabs
  • The Grid
  • Thumbnails
  • Tooltip
  • Typography styles
  • Visibility and utility classes

So is it really any good kan gengs ?

Yup. Hal baru pada pembuatan website. Juragan berharap kamu untuk mengunakannya dengan lebih baik. see you gengs

Artikel Terkait