Kumpulan Tema CSS Twitter Bootstrap

logo_bootstrap

Kali ini saya akan berbagi salah satu informasi penting, terutama bagi sobat yang seorang Web Developer, Front End Developer, dan bahkan Web Designer. Bagi sobat yang suka menggeluti dunia pemrograman website pasti mengenal yang namanya Twitter Bootstrap. Lebih akrab disapa BootstrapBootstrap adalah salah satu framework CSS yang populer dan banyak digunakan oleh para web developer untuk mempermudah pembuatan interface website.

Bagi beberapa web developer berpikiran kurang mau ambil pusing buat ngurusin bagian front-end atau penampilan halaman website yang dibuat. Khususnya bagi backend developer, tentunya lebih menyukai permainan logika pada pembuatan aplikasi bagian modul, sistem, dan alur/algoritma nya daripada harus berkutat pada indahnya halaman website yang dibuat. Tapi sayangnya jika produk software yang hanya mementingkan fungsinya dan mengabaikan interface-nya tentu itu salah. Keduanya harus dibentuk dengan baik dan seimbang, karena itulah dibuat framework CSS yang Free dan Open Source untuk memudahkan web developer mempercantik halaman web. Dengan dukungan framework CSS seperti Bootstrap, web developer dimudahkan untuk ‘bisa’ melakukan peran seorang web designer 😀 walaupun gak sepenuhnya. Yang penting produk yang dibuat nyaman dilihat gak bikin sakit mata 😀 .

Bootstrap secara default memiliki tampilan yang mirip Twitter, bisa dilihat di situs resmi Bootstrap dan bandingkan dengan tampilan Twitter.

Secara default udah waw banget ya, saya sendiri kalo bikin style css belom bisa sebagus itu wkwk. Walaupun terlihat waw, ada kalanya itu terlihat membosankan. Saya pun sampai sempet beralih ke CSS Materialize, karena saya ingin mencoba sesuatu yang baru 😀 Mungkin bagi web designer gampangnya adalah tinggal ubah-ubah sendiri/ custom sesuai selera namun bagaimana yang kemampuan designnya belum begitu pro kaya saya 😀 . Sobat bisa mengubah tampilan default bootstrap dengan tema bootstrap yang ada di situs Bootswatch.

Mereka menyediakan tema bootstrap gratis yang enak diliat. Malah  ada yang sampai cita rasa bootstrap-nya hampir tak terlihat. Berikut saya deskripsikan secara singkat tema-tema bootstrap yang di publikasikan oleh Bootswatch.

Untuk download, klik link download lalu akan terbuka di tab baru kumpulan kode css. Select all / Ctrl + A dan copy / Ctrl + C, setelah itu buka notepad lalu paste / Ctrl + V. Dan terakhir save.

1. DEFAULT

Sesuai namanya default, yang berarti ini adalah tema bawaan bootstrap itu sendiri. Bootstrap yang digunakan versi 3.3 seperti tampilan Twitter saat ini.

Download | Demo


2. CERULEAN

Deskripsinya : “A calm blue sky“. Tema yang ini terlihat lebih indah seperti indahnya langit cerah wkwk.

Download | Demo

3. COSMO

Deskripsi : “An ode to Metro” . Silahkan sobat buka demonya, perhatikan setiap bentuk-bentuk elemen form nya. Mengingatkan kita kepada salah satu framework CSS, yap betul sekali yaituMetroUI dulu sempet tenar tapi sekarang kurang terdengar lagi namanya 😀 .

Download | Demo

4. CYBORG

Deskripsi : “Jet black and electric blue“. Yang keempat ini khusus bagi sobat yang penyuka warna hitam. Perpaduan warnanya pun enak dilihat. Recomended 😀 .

Download | Demo


5. DARKLY

Deskripsi : “Jet black and electric blue“. Sesuai dengan namanya yaitu Darkly, Dark yang berarti gelap, cocok buat sobat yang suka warna gelap. Darkly ini juga komposisi stylenya Flat. Apa itu Flat? silahkan googling sendiri :v.

Download | Demo


6. FLATLY

Deskripsi : “Flat and modern“. Udah cari tau apa itu flat? Design flat sekarang lagi nge-tren contohnya Kaskus pake Flat, Google juga, namun dia mencampurkan Flat dengan style classic jadilah Material yang ada di toko bangunan :v. Tema Flatly ini sama seperti Darkly namun yang ini Light version 😀

Download | Demo


7. JOURNAL

Deskripsi : “Crisp like a new sheet of paper“. Dari namanya dan perpaduan warnanya, ini design cocok bagi sobat yang inget membuat website diary, blog, ataupun majalah 😀

Download | Demo

8. LUMEN

Deskripsi : “Light and shadow“. Lumen ini elemennya terlihat 3D karena menggunakan shadow, selain itu warna yang cerah dan enak dilihat. Tema ini saya pakai untuk mengerjakan project saya.

Download | Demo

9. PAPER

Deskripsi : “Material is the metaphor“. Ini dia Bootstrap rasa Material :v, dengan deskripsi yang wah Material is the metaphor. Bagi sobat yang ingin mencoba design Material namun enggan menggunakan Materialize buatan Google bisa pake tema Bootstrap ini 😀

Download | Demo

10. READABLE

Deskripsi : “Optimized for legibility“. Tema yang ini di buat dikhususkan lebih ringan, lebih cepat oleh karena itu diberi deksripsi Optimized.

Download | Demo

11. SANDSTONE

Deskripsi : “A touch of warmth“. ‘Hangat’ itu kata yang tepat untuk design ini. Terlihat seperti flat.

Download | Demo

12. SIMPLEX

Deskripsi: “Mini and minimalist“. Tema bootstrap paling miniamalist, terlihat sederhana tapi ‘wah’. Seperti Cerulean namun ini bentuk lainnya dan warna merah menjadi ciri khas nya.

Download | Demo

13. SLATE

Deskripsi : “Shades of gunmetal gray“.

Download | Demo


14. SPACELAB

Deskripsi : “Silvery and sleek“.

Download | Demo

15. SUPERHERO

Deskripsi : “The brave and the blue“.

Download | Demo

16. UNITED

Deskripsi : “Ubuntu orange and unique font“.

Download | Demo

17. YETI

Deskripsi : “A friendly foundation”.

Download | Demo

Tambahan, jika sobat mau mengoleksi semuanya. Bisa download download semua tema nya pada link dibawah.

Download Bootstrap 3.2 Themes Full (287 KB)

Melelahkan jika harus download satu per satu 😀

Itu dia kumpulan tema-tema menarik Twitter Bootstrap, jangan lupa beri tahu teman-teman sobat tentang informasi menarik ini dengan cara share artikel ini 😀

Tinggalkan Komentar

Loading Facebook Comments ...
Loading Disqus Comments ...