Semantic UI Nedir?

Yazı sonrasında ilgili konuyu genişletmem mümkün olmadı. Ancak, Vue.js başta olmak üzere, örnekler oluştururken bahsi geçen framework’lerden bazıları çalışma dosyaları içerisinde yer bulmaktaydı. Hal böyle olunca, Semantic UI ve Bulma ile ilgili yazılar yayınlamak bir gereklilik haline geldi. Evet, ilk yazımız Semantic UI ile ilgili. Öncelikle, CSS framework kavramına yabancı iseniz CSS Framework Kullanımı yazısına hızlıca bir göz atabilirsiniz. Diğer yandan Semantic UI ile ilgili olarak framework’ün kendi web sitesi¹ ve GitHub sayfasını² inceleyebilirsiniz. Ayrıca, Learn Semantic³ web sayfasının da öğrenme sürecinde oldukça işinize yarayacağını düşünüyorum.

Semantic UI

Semantic UI estetik, işlevsel ve duyarlı (responsive) arayüzler geliştirmeyi mümkün kılan bir geliştirme framework’ü. Bu maksatla, kelimeleri ve sınıfları (classes) değiştirilebilen kavramlar olarak ele alır. Bu ne demek? Hemen şöyle izah edeyim. Semantic UI sınıfları (classes) doğal dil yapısı gibi sıralanarak anlamlı bir yapı oluşturur. Aşağıdaki örneğe bir göz atalım.

<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>

Yukarıdaki class (sınıf) içeriğine baktığınızda kolay bir şekilde ilgili katman içeriğinin 3 adet butondan oluştuğunu, alt elemanlara baktığınızda da her birinin işlevini kolaylıkla anlayabilirsiniz. Örneği biraz daha geliştirelim.

<div class="ui three labeled icon buttons">
  <button class="ui active button"><i class="pause icon"></i> One</button>
  <button class="ui inverted orange button"><i class="right arrow icon"></i> Two</button>
  <button class="ui orange button"><i class="play icon"></i> Three</button>
</div>

Görüldüğü üzere, class içeriğinden elemanların nasıl davranacağını, hangi özelliklere sahip olacağını kolaylıkla anlamak mümkün. Diğer yandan, Semantic UI CSS’in yanı sıra, JavaScript ile davranışsal özellikler de sunmakta. Geliştiriciler bu davranışları istedikleri gibi düzenleyebilmektedirler.

$('select.dropdown').dropdown('set selected', ['meteor', 'ember']);

<select name="skills" multiple="" class="ui fluid dropdown">
  <option value="">Skills</option>
  <option value="angular">Angular</option>
  <option value="css">CSS</option>
  <option value="ember">Ember</option>
  <option value="html">HTML</option>
  <option value="javascript">Javascript</option>
  <option value="meteor">Meteor</option>
  <option value="node">NodeJS</option>
</select>

Bu özellikler dahilinde, Semantic UI 3000+ tema değişkeni ve 50+ UI bileşeni ile neredeyse her ihtiyaca doğrudan cevap veren, oldukça kapsamlı arayüz çalışmaları oluşturabilmeyi mümkün kılmakta.

Semantic UI Kullanımı

Elbette bu kadar özellik saydıktan sonra, Semantic UI’i çalışmalarımıza nasıl dahil edebileceğimizden de bahsetmemiz gerekir.

Semantic UI, React⁴ ve Angular⁵ için geliştirme aşamasında olan (pek çok bileşeni hazır durumda) bir desteğe de sahip. Şimdilik doğrudan bir Vue.js desteği mevcut değil. Ancak, Semantic UI⁶ Vue değerlendirilebilecek opsiyonlardan biri olabilir. Diğer entegrasyonlar (Meteor, Ember vb.) ve yönergeler için Integrations⁷ sayfasını inceleyebilirsiniz.

Semantic UI’ı projelerinizde kullanmak isterseniz Gulp yönergelerine de göz atmak isteyebilirsiniz⁸. Semantic UI şu sebeplerden dolayı Gulp kullanımını öne çıkartmakta⁸:

• LESS dosyalarını tema değişkenleri ( theming variables) ile yönetebilmek (konuyla ilgili olarak Theming sayfasını inceleyebilirsiniz⁹)
• Dosya değişikliklerini izleyerek düzenleme yapılan dosyaları işleme almak ve değişiklikleri temaya uygulamak,
• Yalnızca gerekli bileşenleri ilişkili kılmak,
• RTLCSS ile Right-To-Left (RTL) diller için destek sağlamak.

Benim özellikle üzerinde duracağım kullanım ise CDN ile (jsDelivr)¹⁰ sağlayacağımız ve ihtiyaç duyulan bileşenleri harici olarak dahil edeceğimiz (hem CSS, hem de JS dosyalarını) kullanım olacak¹¹.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

Örnek uygulamalar süresince pek çok kullanımdan bahsedeceğim. Aşinalık kazanmak ve şimdiden çalışmalarınıza Semantic UI’ı dahil etmek isterseniz, örnek olarak hazırlanmış şablonlara Layouts sayfasından ulaşabilirsiniz. Diğer yandan, daha spesifik bilgi edinmek amacıyla (ve elbette kullanım ve özelleştirme detayları için) Elements, Collections, Views, Modules, Behaviors bölümlerini es geçmemelisiniz.

Semantic UI Örnekleri

Vue.js örneklerinde sıklıkla yer vermeye çalışıyorum. Bu amaçla, hazırladığım basit todo list uygulamasına göz atabilirsiniz. Konular ilerledikçe daha kompleks örneklere de yer vereceğim. Diğer yandan, Grav, Ghost ve WordPress temalarında Semantic UI ve Bulma sıklıkla yer bulacak.

Semantic UI Projesinin Son Durumu

Semantic UI projesi detayları net olarak açıklanmayan bir takım nedenlerden dolayı sürdürülememekte. Son olarak release edilen 2.4.1 üzerinden geçen zaman ile birlikte projeye topluluk desteği ile Fomantic UI¹² fork’u üzerinden devam edilmekte. Güncel durumda 2.8.3 release’ine sahip olan fork pek çok iyileştirme barındırmakta. Semantic UI aşinalığınız varsa ve/veya projelerinizde kullanmışsanız bu fork ile devam edebilirsiniz. Benim kişisel kararım ise Bulma CSS veya Tailwind CSS ile devam etmek.