Tutorial CSS Skeleton Lengkap Beserta Penjelasan

Tutorial CSS Skeleton  Lengkap Beserta Penjelasan  ~ Pada tutorial kali ini saya ingin sharing ilmu tentang cara menggunakan CSS Skeleton. Untuk pendahuluan saya akan menjelaskan apa itu CSS Skeleton ?
CSS Skeleton merupakan Freamwork CSS sama persis cara menggunakan Bootstrap, teteapi CSS Skeleton ini lebih memfokuskan kita pada penggunaan nama class yang menggunakan bahasa inggris.
 Seperti contoh :

  • Class="twelve columns" ; // penggunaan grid pada css skeleton
  • Class="u-full-width"; // penggunaan form input pada css skeleton

Cara menggunakan CSS Skeleton pada text editor :

  1. Kunjungi dahulu situs resminya , dilahkan klik link berikut http://getskeleton.com/
  2. Pada halaman pertama terdapat tombol download bewarna biru. Seperti dibawah ini :
  3. blog-agustutorial~Tutorial CSS Skeleton  Lengkap Penjelasan
  4. Pada gambar diatas silahkan teman-teman klik tombol download maka akan menghasilkan sebuah download seperti  berikut :
  5. blog-agustutorial~Tutorial CSS Skeleton  Lengkap Penjelasan
  6. Jika sudah muncul, silahkan download langsung dan extract file tersebut, lalu klik kanan pada index.html di dalam folder extractkan tadi buka dengan text-editor kalian masing-masing. Seperti Contoh Berikut :

  7. blog-agustutorial~Tutorial CSS Skeleton  Lengkap Penjelasan
  8. Tahap berikutnya kita masukan kode yang ada di website CSS Skeleton, seperti contoh saya menggunakan form sebagai contoh :

  9. blog-agustutorial~Tutorial CSS Skeleton  Lengkap Penjelasan
  10. Tahap berikutnya jalankan di browser teman-teman masing-masing, jika benar maka tampilannya seperti berikut :

  11. blog-agustutorial~Tutorial CSS Skeleton  Lengkap Penjelasan
Catatan : untuk pengaturan lainnya silahkan teman-teman rubah css terbut atau menambahkannya lagi
Dan untuk mempermudah proses pembelajaran kalian silahkan lihat video dibawah ini :



Sekian dari tutorial saya  ini semoga bermanfaat untuk teman-teman semuanya dan bagi teman-teman yang ingin download source kode nya silahkan klik tombol dibawah :

Comments

Popular posts from this blog

Membuat Palindrome Checker

Menampilkan Bilangan Genap dan Ganjil dengan PHP

Menghitung Jumlah Digit Suatu Karakter PHP