Semantic UI adalah kumpulan kode/framework yang membantu menciptakan tampilan yang cantik dan responsif dengan menggunakan HTML yang human-friendly. Bahasa pemrograman ini memiliki fungsi yang sama dengan bootstrap. Semantic mempunyai komponen-komponen UI yang terbilang elegant dan modern yang membuatnya bagus untuk di terapkan di berbagai macam web
Bahasa pemrograman ini memiliki kelebihan-kelebihan seperti.
- Concise HTML
Semancti UI membuat kode-kode dan class yang dapat disesuaikan serta penulisanya pun dibuat dari bahasa yang biasa digunakan sehingga mudah untuk dimodifikasi hubungannya.<div class="ui three buttons"> <button class="ui active button">One</button> <button class="ui button">Two</button> <button class="ui button">Three</button> </div> -
>
Intuitive Javascript
javascript dapat dilihat dan dimodifikasi dengan mudah dimengerti. contoh$('select.dropdown') .dropdown('set selected', ['meteor', 'ember']) ; - Simplified Debugging
dapat dengan mudah mencari permasalahan yang terjadi.
berikut ini langkah-langkah cara menggunaakn simantic ui di halaman website
- download dulu simantic di website resminya disini
- Setelah didownload, buat folder dengan nama “simatic-test” kemudian ektrak di folder htdocs tersebut
- folder dari ektrak diberi nama “simantik”
- kemudian buat file bernama index.html, kodenya html sederhana
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> - index.html belum terhubung dengan file simantik untuk itu kita membutuhkan code tambahan untuk menghubungkannya dan simantic ini tetap membutuhkan sebuah file jquery
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="semantic/semantic.min.js"></script> - jika di gabungkan akan berbentuk seperti ini :
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="semantic/semantic.min.css"> </head> <body> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="semantic/semantic.min.js"></script> </body> </html> - dokumen simantik siap digunakan..