Responsive website saat ini mungkin sudah menjadi syarat mutlak dalam membuat sebuah website. Pasalnya google mensyaratkan sebuah website agar memiliki fitur responsive sehingga bisa dibuka di segala device. Bagi Anda yang belum tau apa itu responsive website dan cara melihat apakah website kita sudah responsive, baca artikel saya sebelumnya tentang Cara Menguji Website Responsive. Banyak cara agar website menjadi responsive di antaranya dengan menggunakan media query pada css.
 |
| Responsive Website |
Bagi yang sudah terbiasa menggunakan framework css bootstrap mungkin sudah paham penggunaan class untuk membuat website responsive. Tetapi untuk membuat website responsive saja, tanpa fitur lain yang disuguhkan bootsrap terlalu berat dan berlebihan, mengingat resource bandwidth yang ada dalam website kita.
 |
| CSS Skeleton Boilerplate |
Alternativ yang bisa kita gunakan adalah dengan CSS Skeleton Boilerplate, dalam paket downloadnya sudah terdapat normalize.css dan skeleton.css. Kedua file tersebut berukuran sangat kecil, total hanya sekitar 18Kb saja. Dibandingkan dengan bootstrap tentu jauh lebih besar. Maka dari itu CSS Skeleton cocok untuk membuat website kita menjadi responsive selain boostrap tanpa harus kehilangan banyak bandwidth dan tentu website kita di akses lebih cepat.
Dalam paket downloadnya CSS Skeleton terdapat beberapa fungsi utama, yaitu:
- The Grid
Fungsi ini adalah fungsi yang paling penting dalam membuat website menjadi responsive. Penggunanya sangat mudah. Kita hanya perlu memanggil nama class one sampai twelve. Sama seperti halnya boostrap, Skeleton juga terdiri dari 12 grid. - Typography
Fungsi untuk styling heading 1 sampai 6 termasuk letter-spacing, line-height, margin, bold, stronge dll. - Buttons
Fungsi untuk styling tombol, terdapat dua tipe tombol yaitu button default dan button primary. Button default hanya menampilkan line saja sedangkan button primary dengan fill color. - Form
Fungsi untuk membuat sebuah form. Lengkap mulai dari input, label, textarea, select option, dan submit button. - List
Untuk membuat style ul li dan ol li. Dapat kita manfaatkan membuat sebuah menu dengan default list style adalah circle. - Code
Fungsi untuk membuat sebuah code blok - Table
Fungsi untuk membuat sebuah table dan yang trakir - Media Query
Fungsi untuk masing-masing media resolusi Desktop, Tablet, Phablet, Mobile
Untuk cara penggunaa CSS Skeleton Boilerplate sepertinya tidak perlu saya jelaskan di sini. Kita bisa melihat dokumentasi singkatnya di website resmi CSS Skeleton Boilerplate disini.
Silahkan berkomentar dengan bijak dan sopan :)