Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Sites
Webdesign

Bagaimana Memilih Grid yang Tepat pada Foundation

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Lukman Nulhakim (you can also view the original English article)

Dalam video hari ini kita akan berbicara tentang tiga sistem grid yang saat ini ditemukan dalam ZURB's Foundation Framework. Lebih khusus lagi, kita akan mempelajari mana yang harus kita gunakan dalam berbagai situasi. Mari Kita Mulai!

Kami telah membuat panduan komprehensif untuk membantu Anda mempelajari Foundation, apakah Anda baru saja memulai atau ingin menjelajahi lebih banyak topik lanjutan, lihat dan Pelajari tentang Foundation.

Memilih Grid pada Foundation

1. Float Grid

Yang pertama, dan yang paling lama melayani Grid pada Foundation adalah Grid dengan tipe Float. Seperti namanya, ia menggunakan kolom dengan css Float untuk membuat Layout.

Markup ini mungkin akrab bagi Anda; menggunakan baris (row) dan struktur kolom (column) yang sama yang dapat ditemukan pada sistem lain:

2. Flex Grid

Contoh kedua diperkenalkan pada Foundation 6 dan berjalan dengan nama "the flex grid". Dilengkapi oleh CSS flexbox, dan meskipun berperilaku sangat mirip dengan grid pada umumnya, ia memiliki beberapa fitur unik seperti vertikal dan horizontal alignment, dan automatic-sizing.

Markupnya persis sama dengan Grid bertipe Float; Anda menentukan baris dan kolom, dan menggunakan kelas khusus untuk dapat menentukan ukuran kolom tersebut. Namun, karena grid ini didasarkan pada flexbox, kita memiliki akses ke beberapa kemampuan yang lebih tinggi. Autosizing adalah salah satu fitur tersebut; jika kita meninggalkan ukuran class pada kolom itu akan memperluas untuk mengisi ruang yang tersedia:

Atau, menggunakan class shrink akan mengecilkan kolom ke ukuran minimum yang dibutuhkan kontennya:

Sebagai contoh, Lihatlah video screencast di atas.

3. XY Grid

Contoh ketiga kami adalah grid terbaru (dan menurut saya yang paling dahsyat); Grid XY, diperkenalkan di Foundation 6.4. Juga didukung oleh Flexbox Grid, Sementara memang memiliki beberapa kesamaan dengan Flex grid, tetapi ada juga beberapa perbedaan besar.

Perbedaan signifikan yang pertama adalah grid XY dapat membuat item secara horizontal dan vertikal.

Perbedaan kedua adalah markup. Di sini kita mendefinisikan sebuah elemen container (baik dengan kelas grid-x atau grid-y) dan kemudian mengisinya dengan elemen cell:

Secara default tidak ada gutter sama sekali, sehingga semua cell akan berada rata dengan cell di sekitarnya. Sebagai gantinya, kami mendefinisikan gutter pada elemen grid-x: grid-margin-x atau grid-padding-x (mengganti x untuk y jika kita berurusan dengan grid vertikal). Nilai yang dibawa ini dapat diatur menggunakan masing-masing variabel Sass $grid-margin-gutters dan $grid-padding-gutters

Grid Foundation yang manakah yang harus Anda pilih?

Ketika memilih grid mana yang akan digunakan, keputusan harus dibuat berdasarkan beberapa faktor.

  1. Browser support adalah yang paling penting, karena flexbox tidak memiliki dukungan secara universal (IE menjadi browser dipertanyakan dalam hal ini). Float Grid tidak terpengaruh oleh dukungan flexbox pada browser.
  2. Kedua, Apakah Anda memerlukan layout dengan grid vertikal? Jika demikian, Anda harus memilih XY Grid.
  3. Terakhir, seberapa penting kecepatan penulisan kode dan pemeliharaan untuk Anda? XY Grid menggunakan sintaks yang jauh lebih sederhana daripada pendahulunya, jadi akan lebih mudah untuk digunakan.

Untuk lebih jelasnya, lihatlah screencast di atas, atau lihat kursus terbaru saya!

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.