bootstrap

Bootstrap – Mendesain Web Menjadi Lebih Mudah (Twitter Style)

This entry was posted on Saturday, August 4th, 2012.

Dalam membangun sebuah web, desain tampilan adalah sebuah perkara penting, bahkan terkadang menunjukan sebuah keprofesionalan web developer. Dan ini adakalanya menjadi masalah besar, terutama bagi web developer yang bekerja sendiri, artinya programmernya si doi, web designernya juga beliau bahkan system analystnya juga orang yang sama. Sebenernya masalahnya sih sederhana, yaitu kemantapan desain. Nggak sedikit lho, programer yang punya selera desain yang tidak terlalu tinggi (menghindari kata buruk). Banyak temen saya yang sebenernya dari segi coding, dia jago banget, logika kayak gimana pun dilahap, hanya saja kalo udah disuruh ngedesain tampilan web, pasti hasilnya standar banget, bahkan kalo menurut saya nggak banget. Ya, masalahnya adalah berbicara tampilan dan desain, maka kita akan berbicara seni, dan nggak semua orang yang pandai logika pemrograman punya selera seni tinggi. Masalah selanjutnya adalah, bila sebuah proyek web dilakukan sendirian, maka core system dan design akan dilakukan oleh orang yang sama. So, tentu akan membutuhkan waktu. Tau sendiri bikin core system susahnya gimana, perlu konsentrasi penuh, ditambah lagi mesti ngedesain tampilan juga, belum lagi kalo selera desain kita rendah. Salah-salah, kita udah bikin sistem yang canggihnya minta ampun tentunya dengan usaha maksimal dan mati-matian, bahkan sampe nggak tidur selama seminggu, tapi pas dikasih liat ke klien, karya kita malah diketawain, karena tampilannya nggak banget. Maka beruntunglah bagi Anda yang selain memiliki kemampuan coding juga memiliki kemampuan desain yang lumayan.

Oke Kres, gue udah setuju kalo ngedesain web kadang-kadang jadi masalah. Selanjutnya apa??

Nih, ane mau ngasih tau khusus yang belum tau. Buat yang udah tau juga nggak apa2 biar tambah tau atau mungkin bisa mengklarifikasi kalo ada yang salah. :D

Di project terakhir saya PustakaBasa, yaitu project skripsi saya dan juga merupakan startup kedua saya setelah Nyankod (saya belum sempet bikin reviewnya). Saya dituntut untuk menyelesaikannya dengan cepat, yang namanya skripsi otomatis nggak Cuma bikin aplikasinya aja, tapi juga bikin tulisan, dan itu pasti akan memakan waktu. So, buat menghemat waktu akhirnya saya mencoba menerapkan sebuah toolkit yang menurut saya lumayan ampuh, terutama dari segi kemudahan desain, yaitu Bootstrap Twitter.

Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter buat mempermudah web depelover dalam mendesain tampilan aplikasi. Dengan Bootstrap, developer web bisa menghemat waktu dalam mendesain tampilan aplikasi. Di Bootstrap udah tersedia CSS, HTML dan juga JQuery Plugin untuk typography, forms, buttons, tables, grids, navigation dan berbagai komponen interface lainnya. Bootstrap pertama kali dirilis pada Agustus 2012 dan berlisesni open source. Bootstrap bisa didownload secara gratis di GitHub (http://twitter.github.com/bootstrap/index.html). Saat ini Bootstrap udah ngerilis versi 2.0.3.

Kelebihan utama dari Bootstrap adalah Responsive Layout dan 12-column grid system. Dengan Responsive Layout maka aplikasi web yang didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column grid system sederhananya adalah Bootstrap akan membagi lebar layar menjadi 12 bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih mudah.

Biar lebih memahami tentang konsep responsive layout dan grid system mungkin nanti saya akan buat artikel khusus yang akan membahas ini. Untuk artikle kali ini, saya akan fokuskan bagaimana Bootstrap sangat membantu dalam proses mendesain tampilan halaman web.

Bootstrap telah menyediakan deklarator class-class css yang kita bisa panggil dengan mudah untuk kebutuhan tampilan kita. Sebagai contoh kita akan membuat sebuah tombol seperti berikut:

btn_sukses

Maka yang kita butuhkan hanya menambahkan selektor class tombol sukses (btn btn-success) pada Bootstrap, yaitu seperti berikut ini coy:

<a class="btn btn-success" href="">Link</a>

atau

<button class="btn btn-success" type="submit">Button</button>

atau

<input class="btn btn-success" type="button" value="Input">

atau

<input class="btn btn-success" type="submit" value="Submit">

Kita juga bisa menggunakan jenis tombol lainnya yang disediakan oleh Bootstrap. Buat ngeliat jenis-jenis tombol Bootstrap, silahkan mampir disini.

Tombol merupakan salah satu kemudahan dari Bootstrap. Kita juga bisa dengan mudah untuk membuat style tabel, form bahkan icon-icon standar yang sering digunakan dalam pembuatan website.

Di Bootstrap, bahkan kita bisa membuat menu dropdown seperti berikut dengan mudah:

drop_down

Membuat modal seperti berikut:

modal

Membuat tab seperti berikut:

tabs

Atau menampilkan alert seperti ini:

alert

Serta banyak lagi yang lainnya, yang bisa bikin pembuatan website itu menjadi lebih mudah tentunya dengan style modern bergaya twitter. So, kita nggak akan ribed lagi buat ngedisain, jadi bisa fokus pada core system aja. Kalo pun emang mau modifikasi juga bisa kok, Bootstrap sifatnya pleksibel, seperti CSS biasa aja.

Kalo pengen belajar lebih dalam tentang Bootstrap, kamu bisa baca user guidenya di sini. Atau kamu bisa tunggu artikel saya selanjutnya, insya Allah nanti akan saya coba bahas tentang bagaimana cara menggunakan Bootstrap untuk membuat sebuah tampilan website. Untuk kali ini kita perkenalan dulu. Hehehe…. semoga bermanfaat jou…!!

SUBSCRIBE TO NEWSLETTER

About

Seorang makhluk bulan yang sedang bertamasya di Bumi. Untuk mengisi waktu luang di Bumi, doi menghabiskan waktu dengan coding, nonton anime dan tidur. Nggak suka makan sayur-sayuran. Dan punya pendapat bahwa sayur-sayuran diciptakan Tuhan bukan untuk dimakan, tapi untuk menghias makanan. Berbakat untuk mengundang perhatian. Bersama teman-temannya di Bumi, membuat sebuah website yang disebut CodePolitan. Bersama CodePolitan, doi melakukan banyak hal keren dan menyenangkan.