Foundation Part 5 Visibility Classes Pada Framework Foundation

Foundation Part 5 : Visibility Classes Pada Framework Foundation


Foundation Part 5 : Visibility classes Pada Framework Foundation – Setelah sebelumnya kita membahas tentang tutorial cara membuat form dengan foundation framework, pada tutorial ini kita akan melanjutkan tentang pembahasan foundation framework dengan membahas  Visibility class pada framework foundation.

Pada framework foundation terdapat sebuah fitur yaitu fitur visibility classes. visibility classes adalah fitur dimana kita bisa menampilkan atau menyembunyikan sebuah elemant tertentu dengan hanya bantuan sebuah class yang sudah di sediakan. dan tinggal di gunakan saja.

Yuk simak lebih lanjut penjelasan tentang visibility classes pada framework foundation dan beserta contoh nya.

Foundation Part 5 : Visibility classes Pada Framework Foundation

Seperti yang telah di singgung pada pengertian visibility classes di atas, visibility classes di buat untuk membantu kita atau memberi kemudahan dalam menampilkan atau menyembunyikan element tertentu pada saat-saat tertentu pula.

contoh yang akan kita buat pada Foundation Part 5 : Visibility Classes Pada Framework Foundation ini adalah kita akan memembuat contoh penggunaan visibility classes pada framework foundation, yaitu dengan menampilkan sebuah element tertentu hanya pada saat halaman website di buka melalui smartphone. atau menampilkan sesuatu hanya pada saat halaman website tersebut di buka melalui ukuran layar tablet. dan sebaliknya kita bisa juga menyembunyikan sesuatu element jika di akses atau di buka melalui smartphone atau perangkat lain yang memiliki ukuran layar yang berbeda-beda.

Sebelum teman-teman mengikuti tutorial lebih lanjut, di sarankan terlebih dulu untuk membaca tuorial foundation dasar tentang cara menggunakan framewor foundation berikut : Foundation part 2 : Cara menggunakan framework foundation. agar lebih mudah untuk di pahami.

Foundation Part 5 : Visibility classes Pada Framework Foundation

Adapun beberapa class yang bisa di gunakan untuk visibility classes pada framework foundation adalah sebagai berikut :

  • show-for-small
    Class ini di gunakan untuk menampilkan element tertentu pada saat di akses dari layar berukuran smarphone.
  • show-for-medium
    Class ini di gunakan untuk menampilkan element tertentu pada saat di akses dari layar berukuran tablet.
  • show-for-large
    Class ini di gunakan untuk menampilkan element tertentu pada saat di akses dari layar berukuran pc/laptop.
  • hide-for-small
    Class ini di gunakan untuk menyembunyikan element tertentu pada saat di akses dari layar berukuran smarphone.
  • hide-for-medium
    Class ini di gunakan untuk menyembunyikan element tertentu pada saat di akses dari layar berukuran tablet.
  • hide-for-large
    Class ini di gunakan untuk menyembunyikan element tertentu pada saat di akses dari layar berukuran pc/laptop.

Menampilkan element tertentu pada ukuran layar tertentu

Di sini akan kita buat sebuah contoh untuk menampilkan suatu element paragraf pada saat di buka melalui ukuran layar device yang berbeda-beda.

bisa teman-teman perhatikan pada bagian

yg mana kita telah berikan class-class untuk menampilkan element tersebut pada saat di akses atau di buka melalui layar yang berukuran berbeda-beda.

jika halaman ini di buka atau di akses dari laptop atau pc.

jika di buka dari layar laptop

jika di buka dari layar laptop

dan jika di jalankan atau di buka dari tablet

jika di buka dari layar tablet

jika di buka dari layar tablet

jika di jalankan dari smartphone

jika di buka dari layar smartphone

jika di buka dari layar smartphone

Nah, bisa teman-teman lihat sendiri hasilnya pada gambar-gambar di atas.

Menyembunyikan element tertentu pada ukuran layar tertentu

Untuk menyembunyikan element dengan menggunakan visibility classes dapat perhatikan pada contoh berikut.

 

Oke saya rasa cukup sekian dulu tutorial Foundation Part 5 : Visibility Classes Pada Framework Foundation. semoga dapat bermanfaat. dan akan kita lanjutkan materi foundation selanjutnya pada tutorial selanjutnya.





About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]