Progress 2 - Memilih Framework CSS Terbaik Untuk Pemula

Manakah framework CSS terbaik?

Setelah desain web template-nya selesai dikerjakan menggunakan Adobe Photoshop, sekarang saatnya mengonversi ke HTML dan CSS. Layout desain yang akan dibuat ada di artikel sebelumnya berjudul, "Progress 1 - Merancang Tampilan Web Template Menggunakan Photoshop".

Intro

Alhamdulillah, sekarang saya tengah memasuki tahap kedua, yaitu memilih framework CSS yang akan digunakan untuk mempercantik tampilan rancangan template website yang akan dibuat, sekaligus mempermudah peletakan section.

Ngomong-ngomong... Hai! Anda masih membaca artikel lanjutan tentang desain template website di www.mewdavinci.com - Finally, it's solved!

Agar anda tidak ketinggalan update artikel dengan tema "30 Menit Mudah Merancang Layout Template", silakan subscribe dengan cara mengklik link http://eepurl.com/bw7TIL untuk mendapatkan notifikasi artikel terbaru langsung ke email anda.

Memilih Framework CSS

Mendapatkan kemudahan dan berbagai fitur yang mumpuni tidak hanya diinginkan oleh mereka yang sudah PRO, melainkan saya sebagai pemula pun mendambakan hal tersebut.

Seperti yang telah saya paparkan pada artikel sebelumnya, ada bermacam-macam CSS frameworks yang populer di kalangan web developer. Dua di antaranya adalah Foundation dan Bootstrap. Lanjutkan membaca untuk mengetahui ulasannya, di bawah ini :

1. Foundation

Pertama kalinya saya membuka website Foundation, saya terkesima sambil mengatakan, "Wow! God... Ini keren banget. Awesome!"

Dibandingkan dengan kompetitornya, yaitu Bootstrap. Atau website tutorial lain, tampilan Foundation memang memikat dan gak membosankan.

Berdasarkan dokumentasi, yang paling menarik dari Foundation adalah mampu menyembunyikan menu pada sidebar, yang disebut "Off Canvas". Kemudian, fitur "Joyride". Jika anda pernah bermain game, tentunya anda pernah menikmati "Joyride", dimana biasanya digunakan sebagai tutorial bersifat doing by learning.

Terakhir, "Pricing Tables". Jika anda menjalankan bisnis penyewaan hosting, online shop, channel TV berlangganan, tutorial berbayar, dan bisnis lainnya yang meminta konsumen anda untuk membayar setiap bulan. Maka, Foundation menyediakan kemudahan bagi anda untuk membuat "Pricing Tables".

Silakan kunjungi ZURB Foundation untuk membaca dokumentasinya.

Navigasi Off Canvas yang ditawarkan oleh framework Foundation

2. Bootstrap

Sama halnya dengan Foundation, CSS Framework bernama Bootstrap ini juga jempolan.

Anda akan mendapatkan penjelasan lengkap dengan dokumentasi terstruktur serta tertata rapi, jika anda mengunjungi website asli Bootstrap. Walaupun, bagi saya pribadi, penyajian tutorial dari Bootstrap cenderung membuat saya menjadi cepat jenuh. Akan tetapi, Bootstrap tidak kehilangan daya tariknya.

Yang pertama adalah "Scrollspy". Jika anda ingin menyajikan beberapa sesi atau menu dalam satu halaman, maka penggunaan "Scrollspy" adalah langkah yang tepat.

Pengunjung website anda dapat berpindah dari satu sesi ke sesi lainnya, atau satu menu ke menu lainnya, tanpa harus terjebak dalam loading page yang panjang, lama, dan memakan bandwidth. Baik secara berurutan, maupun secara acak.

Selanjutnya, ada "Jumbotron". Penggunaan Jumbotron secara umum adalah untuk menarik perhatian pengunjung website atas suatu konten spesial atau informasi, seperti penggunaan quote.

Hal menarik lainnya adalah "Progress Bar" atau dikenal juga sebagai "Loading bar", dimana biasa digunakan pada website yang menyajikan fasilitas untuk mengunduh (download), mengunggah (upload), atau menunggu submition progress.

Anda bisa melihat "Progress Bar" ketika anda menonton streaming video, melihat dokumen secara live tanpa menyimpan di hard drive, mengupload foto, video, file, pada email atau general repository seperti Behance dan Dribble, atau bagi penggiat di marketplace ketika sedang menunggu giliran review.

Silakan kunjungi dokumentasi Bootstrap di link ini.

3. Skeleton

CSS Framework bernama Skeleton telah beberapa kali saya sebutkan di artikel-artikel saya yang membahas tentang cara pembuatan desain layout website.

Merujuk pada Awwwards, Sitepoint dan Designernews, Skeleton dinilai mampu dijadikan alternatif yang dapat diandalkan bagi web developer tingkat pemula, ditinjau dari kemudahan memahami struktur framework css itu sendiri.

Jika Skeleton dibandingkan dengan kedua kakaknya, yaitu Foundation dan Bootstrap, tentu apa yang ditawarkan oleh Skeleton sebagai pendatang baru masih kalah jauh.

Berdasarkan pengalaman saya, Skeleton temasuk mudah diikuti dan dipahami oleh pemula seperti saya. Dari Skeleton pula lah saya cepat belajar memahami tentang teknik mengatur grid.

Catatan : Dengan kekurangannya bukan berarti Skeleton menjadi nothing special, justru Skeleton has something special karena mudah dipahami dan mudah diaplikasikan.

Klik ini ini untuk melihat dokumentasi Skeleton, sekaligus men-download source script-nya.

4. W3.CSS (W3School)

Anda suka dengan tampilan Google yang simple, cantik, dan gak mainstream? W3.CSS menyajikan struktur desain yang akan mengingatkan anda dengan tampilan Google.

Okay, this is the last review.

Setelah mencoba keempat frameworks CSS ini. Berdasarkan pengalaman saya, W3.CSS merupakan framework CSS yang lebih mudah dipahami dan lebih simple dibandingkan Skeleton.

Ada dua hal yang menarik dari W3.CSS, yaitu "cards" dan "color themes". Bagi anda yang suka menggunakan sticky notes anywhere-anytime, W3.CSS menyajikan "cards" dengan 2 variasi tampilan, yaitu datar dan berbayang.

Kunjungi dokumentasi W3.CSS untuk mempelajari lebih lanjut.

Result sementara dikerjakan dengan Framework W3.CSS

Sahabatku, saya memilih framework W3.CSS sebagai langkah awal. Bagaimana dengan anda?

Apapun yang anda pilih, pastikan pilihan anda tersebut tidak menghambat langkah anda terlalu lama, atau bahkan menggugurkan niat anda untuk berkarya.

Pada artikel berikutnya, saya akan membagikan kodenya secara bertahap, insyaa Allah...

Okay! Sahabatku, tolong bantu saya share artikel ini melalui akun media sosial anda, seperti Facebook, Twitter, Pinteret, Tumblr, atau Google Plus, kepada teman-teman anda yang ingin mempelajari layouting website menggunakan framework CSS.

Karena artikel berjudul, "Progress 2 - Memilih Framework CSS Terbaik Untuk Pemula" bermanfaat dan anda pun menyukainya.

Dan jangan lupa untuk subscribe atau follow, www.mewdavinci.com - "Finally, It's Solved!", agar anda tetap up to date langsung ke email anda, saat ini juga.

Nantikan terus perkembangan template website saya, dan sampai jumpa lagi di artikel selanjutnya. Wassalamu'alaikum warahmatullah!