Semantic UI

Semantic UI Nedir?

Güncelleme:
Epey zaman önce CSS Framework Kullanımı başlıklı bir yazı yayınlamış ve CSS framework’lerin gelişiminden, günümüzdeki güncel durumlarından bahsetmiştim. Yazı sonrasında ilgili konuyu genişletmem mümkün olmadı. ...
GÖRSEL
Epey zaman önce CSS Framework Kullanımı başlıklı bir yazı yayınlamış ve CSS framework’lerin gelişiminden, günümüzdeki güncel durumlarından bahsetmiştim. 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.CSS Frameworks

Semantic UI Nedir?

Semantic 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 Elements / Components

Semantic UI Nasıl Kullanılır?

Elbette bu kadar özellik saydıktan sonra, Semantic UI’i çalışmalarımıza nasıl dahil edebileceğimizden de bahsetmemiz gerekir. Unutmadan, ceaksan.com, yoldanciktim.com ve dnomia.com web sitelerinde Semantic UI kullanılmaktadır.

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 / Responsive Tasarım

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.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.