Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Menggunakan Grid Framework Metro UI. Setiap framework tentunya mempunyai aturan penggunaan yang berbeda – beda. Meraka mempunyai standarisasi yang harus diikuti oleh setiap penggunanya. Dalam menggunakan framework kita tidak bisa seleluasa menggunakan native HTML dan CSS. Setiap framework sudah menyediakan library class dan attribut – attribut penunjang lainnya seperti form dan input, tables, buttons, images, metro icon font, color, helper classes .

Pada pembahasan tutorial kali ini saya akan membahas tentang Cara Menggunakan Grid Framework Metro UI, Untuk grid dalam metro UI sudah saya singgung di pembahasan saya sebelumnya, grid dalam metro UI mempunyai 12 grid sistem. Sama halnya dengan bootstrap namun penggunaanya sangat berbeda. Untuk cara penggunaanya di bawah ini saya akan berikan contoh cara penggunaan grid metro ui, silahkan teman – teman lihat di bawah ini, bagi yang baru bergabung bisa lihat artikel saya sebelumnya tentang cara instalasi framework metro UI.

Buat  file index.html dan simpan dalam folder dimana teman – teman menyimpan file hasil download tan dari framework metro UI.

Cara Menggunakan Grid Framework Metro UI

Kalau sudah silahkan isi filenya seperti di bawah ini:

Jika sudah silahkan teman – teman link ke empat file di bawah ini:

Cara Menggunakan Grid Framework Metro UI

Oke kalau sudah silahkan save , dibawah ini saya akan jelaskan tentang script di atas. Untuk mebuat kolom dalam metro UI kita harus diklarasiin terlebih dahulu berapa jumlah kolom yang akan kita buat di dalam class row cellsn. kita bisa sett nilai cellsn sesuai jumlah kolom yang akan kita buat misalkan saya akan buat dua kolom berarti saya akan rubah cellsn menjadi cells2 seperti di bawah ini;

Cara Menggunakan Grid Framework Metro UI

Dan untuk melihat hasil dari script di atas silahkan teman cuba buka dibrowser teman – teman kurang lebih hasilnya nanti akan seperti di bawah ini;

Cara Menggunakan Grid Framework Metro UI

Oke bagaimana teman – teman cukup mudah bukan Cara Menggunakan Grid Framework Metro UI, itulah tadi pembahasan saya pada hari ini semoga bermanfaat bagi teman – teman semua.