Semantic UI, Alternatif Desain Web Selain Bootstrap

Tidak dapat dipungkiri bahwa Bootstrap saat ini termasuk framework untuk frontend yang paling banyak digunakan. Apabila anda termasuk desainer web yang telah lama menggunakan Bootstrap dan sudah mulai bosan dengan tampilan Bootstrap, kini anda punya alternatif lain yakni Semantic Ui. Semantic UI, alternatif desain web selain bootstrap. Pada tulisan kali ini akan kita kupas secara sekilas mengenai framework untuk desain web ini.

Mengenal Semantic UI

Semantic UI merupakan framework untuk pengembangan front-end yang modern. Framework ini muncul sebagai alternatif lain untuk desain front-end selain Foundation dan Bootstrap. Pada tulisan di webnya, Semantic UI menjelaskan tujuannya yakni untuk memudahkan desainer dan developer dalam hal sharing UI. Semantic UI melakukannya dengan salah satu langkahnya berupa nama class yang semantic. Nama class ini memudahkan bagi desainer ataupun developer dalam hal memahami class tersebut. Hal ini berbeda dengan yang dilakukan oleh framework lain yang menggunakan singkatan atau karakter penghubung berupa tanda minus. Dengan cara ini, nama class dalam Semantic UI lebih mudah dipahami saat membacanya karena serasa terangkai dalam satu kalimat. Sebagai contohnya berikut ini.

<h4 class="ui header"> Sign in with: </h4>
<div class="ui facebook button">
  <i class="facebook icon"></i>
  Facebook
</div>

Pada contoh kode diatas, dengan melihat nama classnya dapat dengan mudah dipahami akan apa yang dihasilkan dari kode tersebut. Kita juga dapat dengan mudah mengingat nama-nama class tersebut tanpa harus mengingat nama-nama class yang disingkat.

Semantic UI, Alternatif Desain Web Selain Bootstrap

Apa saja yang bisa kita lakukan untuk desain web dengan menggunakan Semantic UI?. Selain nama class yang mudah diiingat dan dipahami, Semantic UI juga menyediakan banyak sekali pilihan layout saat anda menginstall atau mendownloadnya pertama kali. Beberapa hasil tampilan dari Semantic UI ini juga dimunculkan di websitenya, seperti pada gambar berikut ini.

semantic ui, alternatif desain web selain bootstrapDari gambar di atas, dapat dilihat beberapa tampilan yang dapat dibuat dengan memanfaatkan class dari Semantic UI, misalnya untuk tampilan card atau feed. Beberapa tampilan lain yang dapat dengan mudah dibuat adalah untuk toggle switch On dan Off.

 

Incoming search terms:

Be Sociable, Share!

Related Posts:

Add a Comment

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