Mengenal Lebih Dekat Semantic UI

semantic framework

semantic frameworkMENGENAL LEBIH DEKAT SEMANTIC UI

Framework – Kite perlu mengenal framework SemantiC UI lebih dekat. Mengapa? Framework CSS untuk ‘mempercantik’ tampilan UI website sudah banyak tersedia. Selain bootstrap, Semantic UI juga di gemari oleh programmer frontend. Walaupun tidak se populer bootstrap, Semantic UI juga banyak penggunanya. Bahkan fitur-fiturnya terbilang cukup lengkap juga. Banyak juga yang berpendapat bahwa framework ini lebih mudah daripada bootstrap. Penasaran seperti apa? Simak ulasan berikut.

Apa itu Semantic UI?

Semantic adalah framework untuk membangun front-end yang mambantu dalam membuat layout yang responsif dengan HTML. Frameworknya memperlakukan words dan classes sebagai konsep yang dapat ditukarkan dimana classes menggunakan syntax dari bahasa natural untuk menyambunkan konsep secara intuitif. Untuk memicu fungsionalitas, framework ini menggunakan frasa sederhana yang dikenal sebagai behaviors.

Mengapa Semantic UI?

Mempunyai banyak keunggulan seperti tampilan nya yang elegan, tidak berat saat di load pada browser, dapat di kustomisasi sesuai kemauan developer, memiliki beberapa tema yang dapat digunakan, dan juga mudah untuk di gunakan sebagai template pada website kamu.

Keunggulan Semantic UI

1. Komponen lebih lengkap

Salah satu sisi yang membuat Semantic UI memiliki nilai lebih Greader adalah komponen yang lebih lengkap dibandingkan framework atau library CSS yang lainnya, ini yang membuat Semantic UI ini Greader mulai banyak digunakan oleh beberapa developer website khususnya yang berada pada bidang Front-End pada website, dengan lengkap nya komponen akan memudahkan developer untuk menyesuaikan kebutuhan nya pada project yang dibuat dengan menggunakan Semantic UI.

framework

2. Tampilan Elegan

Salah satu faktor yang membuat Semantic UI nyaman untuk digunakan Greader pada website kamu adalah tampilan nya yang elegan, kamu dapat menemukan tampilan yang user-friendly pada framework atau library CSS yang satu ini, Semantic UI cenderung memiliki tampilan yang bersih tanpa mengurangi nilai elegan pada website kamu yang menggunakan Semantic UI.

UI sinematic

3. Penulisan Class Tidak Ribet

Hal yang kadang menjadi masalah bagi beberapa developer yang ingin memakai framework atau library CSS itu Greader adalah penulisan class nya yang cenderung membingungkan, akan tetapi Semantic UI memiliki penulisan yang sangat human-friendly, jadi kamu tidak perlu khawatir karena kesulitan untuk memakai framework atau library CSS yang satu ini, dan juga website dokumentasi dari Semantic UI juga mudah untuk dipahami dan di implementasikan pada website kamu.

framework css

Cara Instalasi Semantic UI

  1. Pertama, masuk ke web resmi semantic UI atau klik disini
  2. Selanjutnya, download node js disni, kemudian pilih win-x64/x86 dan download node js dengan format sesuai keinginan. Misalnya dengan format .exe.
  3. Kemudian, install node js dan tunggu hingga selesai
  4. Buat folder project. Setelah itu buka cmd pada folder project dengan cara kombinasi tombol Shift dan klik kanan pada folder, pilih command here.\
  5. Setelah jendela cmd terbuka, maka ketik perintah “npm install –g gulp” dengan syarat harus terkoneksi internet.
  6. Kemudian setelah install gulp selesai, selanjutnya ketik perintah “npm install semantic-ui –save”, tunggu proses selesai, lalu perintah “cd /namafolder” untuk masuk ke direktori semantic yang ada dalam folder project tadi. Kemudian build gulp dengan cara “gulp build”, tunggu proses hingga selesai.
  7. Setelah selesai maka didalam folder semantic tersebut akan terdapat semantic ui hasil install menggunakan node js tadi. Jika menggunakan semantic ui yang langsung jadi, maka tinggal copy folder semantic ui tersebut ke dalam folder project web yang dibuat.
  8. Setelah poin-poin diatas selesai, maka tinggal membuat file index.html di dalam folder project yang telah dibuat tadi.
  9. Kemudian, di dalam folder tersebut, buatlah sebuah dile index.html, yang isinya adalah html web yang akan dibuat
  10. Setelah itu, buat link untuk memanggil css dan js, dimana link pemanggilannya diletakkan didalam tag <head>#</head>
  11. Tuliskan class-class yang terdapat di Sinematic. dimana disetiap pembuatan div-div kebanyakan selalu diawali dengan ui, yang berfungsi sebagai user interface, untuk tampilan yang lebih baik.
  12. Setelah semua selesai, maka coba untuk menjalankan project web yang telah dibuat tadi. Selamat mencoba.

Nah, tadi artikel mengenal Sinematic UI. Sudah tertarik belajar framework ini? atau masih bingung?

JOGJA ONE SOLUTION – Kami hadir memberi solusi untuk kebutuhan media promosi bisnis atau usaha Anda. Grafik order dan omzet meningkat. Dapatkan website murah, desain menarik, kompleks, dan full maintenance dengan harga yang terjangkau KLIK DISINI. Atau hubungi kami di Telp (0274) 5017127 | WA : 0888 0289 8802


Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat