Başlarken

Kurulum

WebBlocks UI'ın derleme adımı yoktur ve sıfır bağımlılığı vardır. Projenize en uygun yöntemi seçin.

CDN (çoğu proje için önerilir)

Başlamanın en hızlı yolu. Dosyalar GitHub sürümlerinden jsDelivr aracılığıyla sunulur.

<!-- <head> içine ekle -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.css">

<!-- </body> öncesine ekle -->
<script src="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.js"></script>

İndir & Kendi Sunucunda Barındır

Derlenmiş dosyaları indir ve kendi sunucundan sun — internet bağımlılığı yok, CDN yok.

Seçenek A — Son sürümü indir (ZIP)

github.com/fklavyenet/webblocks-ui/releases/latest adresine git
Assets altında Source code (zip) seçeneğine tıkla
ZIP'i çıkar, dist/ klasörünü projenize kopyala
Dosyalara göreli yol ile referans ver:

<link rel="stylesheet" href="/assets/webblocks-ui.css">
<script src="/assets/webblocks-ui.js"></script>

Seçenek B — git ile klonla

Tam depoyu klonla ve dist/ dosyalarını doğrudan kullan. İstediğin zaman çekerek en son sürüme geçebilirsin.

# Depoyu klonla
git clone https://github.com/fklavyenet/webblocks-ui.git

# Ya da belirli bir etiketli sürümü klonla
git clone --branch v2.2.5 --depth 1 https://github.com/fklavyenet/webblocks-ui.git

# İhtiyacın olan dosyalar dist/ içinde:
#   dist/webblocks-ui.css
#   dist/webblocks-ui.js
#   dist/webblocks-icons.svg   (SVG sprite ikonlar için)
#   dist/webblocks-icons.css   (<i> etiketi ikonları için, isteğe bağlı)

Seçenek C — Doğrudan dosya indirme

Klonlamadan GitHub deposundan tek tek dosyaları indir:

# Derlenmiş dosyaları doğrudan indir (curl)
curl -O https://raw.githubusercontent.com/fklavyenet/webblocks-ui/v2.2.5/dist/webblocks-ui.css
curl -O https://raw.githubusercontent.com/fklavyenet/webblocks-ui/v2.2.5/dist/webblocks-ui.js
curl -O https://raw.githubusercontent.com/fklavyenet/webblocks-ui/v2.2.5/dist/webblocks-icons.svg
curl -O https://raw.githubusercontent.com/fklavyenet/webblocks-ui/v2.2.5/dist/webblocks-icons.css

Hangi seçeneği kullanmalısın? Hızlı prototipler için CDN'i kullan. Sürüm kontrolü ve çevrimdışı erişim üzerinde tam kontrol istediğin üretim projeleri için ZIP/git clone tercih et.

İsteğe bağlı: İkonlar

<i> etiketi ikon desteği için ikon CSS dosyasını da dahil et. SVG sprite ayrı olarak yüklenir (aşağıya bak).

<!-- İsteğe bağlı: <i> etiketi kullanımı için wb-icon-* sınıfları ekler -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.css">

Not: İkon CSS'i mask-image kullanır ve modern tarayıcı gerektirir (Chrome 79+, Firefox 53+, Safari 15.4+). İsteğe bağlıdır ve ana paketi şişirmemek için ayrı bir dosyada tutulur.

İlk sayfan

Minimal HTML iskeleti. data-mode ve data-accent nitelikleri <html> üzerinde tema motorunu etkinleştirir.

<!DOCTYPE html>
<html lang="tr" data-mode="light" data-accent="ocean">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uygulamam</title>
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.css">
</head>
<body>

  <button class="wb-btn wb-btn-primary">Merhaba, WebBlocks UI!</button>

  <script src="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.js"></script>
</body>
</html>

SVG ikon sprite'ını yükleme

Satır içi SVG ikonları (<svg><use href="#wb-icon-..."></use></svg>) kullanıyorsan, JS'inden sonra küçük bir fetch parçacığıyla sprite'ı yükle:

<script>
fetch('https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.svg')
  .then(function(r) { return r.text(); })
  .then(function(svg) {
    var parser = new DOMParser();
    var svgEl = parser.parseFromString(svg, 'image/svg+xml').documentElement;
    svgEl.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden';
    document.body.insertBefore(svgEl, document.body.firstChild);
      if (window.WBTheme) window.WBTheme.sync();
  });
</script>

Yükledikten sonra herhangi bir ikonu şöyle kullanabilirsin:

<svg class="wb-icon" aria-hidden="true">
  <use href="#wb-icon-settings"></use>
</svg>

Tema ayarı

WebBlocks UI çok eksenli bir tema motoruna sahiptir. Tüm eksenler <html> öğesinde data-* nitelikleri aracılığıyla ayarlanır.

Nitelik	Değerler	Varsayılan
data-mode	`light` · `dark` · `auto`	light
data-accent	`ocean` · `forest` · `sunset` · `royal` · `mint` · `amber` · `rose` · `slate-fire`	ocean
data-preset	`modern` · `minimal` · `rounded` · `bold` · `editorial`	—
data-radius	`sharp` · `soft`	—
data-density	`compact` · `comfortable`	—
data-shadow	`flat` · `soft`	—
data-font	`system` · `modern` · `editorial`	—
data-border	`none` · `subtle` · `medium` · `bold` · `dashed`	—

Eksenleri birleştirme

<!-- Karanlık mod, forest vurgu, kompakt yoğunluk, keskin yarıçap -->
<html data-mode="dark" data-accent="forest" data-density="compact" data-radius="sharp">

Ön ayarları kullanma

Ön ayarlar birden fazla ekseni adlandırılmış bir stilde bir araya getirir. Tekil eksen nitelikleri ön ayar değerlerini geçersiz kılar.

<!-- "rounded" ön ayarını uygula, yalnızca vurgu rengini geçersiz kıl -->
<html data-preset="rounded" data-accent="rose">

Çalışma zamanında tema değiştirme

Eksenleri çalışma zamanında değiştirmek için WBTheme JS API'sini kullan. Yerleşik data-wb-mode-cycle ve data-wb-mode-set nitelikleri bağlamayı zahmetsiz kılar.

<!-- Tıklamada light → dark → auto arasında geçiş -->
<button data-wb-mode-cycle>Karanlık modu değiştir</button>

<!-- Belirli bir mod ayarla -->
<button data-wb-mode-set="dark">Karanlık</button>
<button data-wb-mode-set="light">Aydınlık</button>

<!-- Vurgu rengini ayarla -->
<button data-wb-accent-set="forest">Forest vurgu</button>

Ya da JS API'sini doğrudan çağır:

WBTheme.setMode('dark');
WBTheme.setAccent('sunset');
WBTheme.setPreset('rounded');
WBTheme.setDensity('compact');

Not: Doğru nitelik adı data-mode'dur — data-theme değil. WBTheme kullanıcının tercihini otomatik olarak localStorage'a kaydeder.

Bileşen yazma

Her WebBlocks UI bileşeni wb- ön ekini kullanır. Bileşenler düz HTML'dir — özel öğe veya JS framework gerekmez.

Buton varyantları

<button class="wb-btn wb-btn-primary">Primary</button>
<button class="wb-btn wb-btn-outline">Outline</button>
<button class="wb-btn wb-btn-ghost">Ghost</button>
<button class="wb-btn wb-btn-danger">Sil</button>

<!-- Boyutlar -->
<button class="wb-btn wb-btn-primary wb-btn-sm">Küçük</button>
<button class="wb-btn wb-btn-primary wb-btn-lg">Büyük</button>

Kart

<div class="wb-card">
  <div class="wb-card-header">
    <h3 class="wb-card-title">Kart başlığı</h3>
  </div>
  <div class="wb-card-body">
    Kart içeriği buraya gelir.
  </div>
  <div class="wb-card-footer">
    <button class="wb-btn wb-btn-primary wb-btn-sm">Kaydet</button>
  </div>
</div>

Uyarı

<div class="wb-alert wb-alert-success">Kayıt başarıyla kaydedildi.</div>
<div class="wb-alert wb-alert-danger">Bir şeyler yanlış gitti.</div>
<div class="wb-alert wb-alert-warning">Yayınlamadan önce lütfen inceleyin.</div>
<div class="wb-alert wb-alert-info">Oturumunuz 10 dakika içinde sona eriyor.</div>

Form alanı

<div class="wb-field">
  <label class="wb-label">E-posta</label>
  <input type="email" class="wb-input" placeholder="siz@ornek.com">
  <p class="wb-field-hint">E-postanızı asla paylaşmayacağız.</p>
</div>

<!-- Hata durumu -->
<div class="wb-field">
  <label class="wb-label">İsim</label>
  <input type="text" class="wb-input is-invalid" value="x">
  <p class="wb-field-error">İsim en az 2 karakter olmalıdır.</p>
</div>

Canlı örnekler ve kopyalamaya hazır kodlar için Bileşenler referansına bakın (40+ bileşen).

Dashboard kabuğu

Dashboard kabuğu admin panellerin dış çerçevesini sağlar: katlanabilir kenar çubuğu, yapışkan üst çubuk ve kaydırılabilir içerik alanı.

<div class="wb-dashboard-shell">

  <!-- Kenar çubuğu -->
  <aside class="wb-sidebar">
    <div class="wb-sidebar-brand">
      <a href="#">Uygulamam</a>
    </div>
    <nav class="wb-sidebar-nav">
      <a href="#" class="wb-sidebar-link is-active">Dashboard</a>
      <a href="#" class="wb-sidebar-link">Kullanıcılar</a>
      <a href="#" class="wb-sidebar-link">Ayarlar</a>
    </nav>
  </aside>

  <!-- Ana alan -->
  <div class="wb-dashboard-body">
    <!-- Üst çubuk -->
    <header class="wb-navbar">
      <button class="wb-btn wb-btn-ghost wb-btn-sm" data-wb-toggle="sidebar">
        ☰ Menü
      </button>
    </header>

    <!-- İçerik -->
    <main class="wb-dashboard-main">
      <div class="wb-container">
        <h1>Sayfa başlığı</h1>
        <p>Sayfa içeriği…</p>
      </div>
    </main>
  </div>

</div>

Tam kabuk dökümleri ve tüm düzen varyantları için Düzenler sayfasına bakın.

Laravel entegrasyonu

WebBlocks UI herhangi bir şablon diliyle çalışır. İşte Laravel Blade projesine nasıl entegre edeceğin.

Önerilen yaklaşım: Layout üzerinden CDN

CDN bağlantılarını temel Blade layout'una ekle:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      data-mode="light"
      data-accent="ocean">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', config('app.name'))</title>

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.css">

    @stack('styles')
</head>
<body>

  @yield('content')

  <script src="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.js"></script>
  @stack('scripts')
</body>
</html>

public klasöründe kendi sunucunda barındır

dist/ dosyalarını Laravel'in public/ dizinine kopyala ve asset() yardımcısıyla referans ver:

<!-- public/vendor/webblocks-ui/webblocks-ui.css -->
<link rel="stylesheet" href="{{ asset('vendor/webblocks-ui/webblocks-ui.css') }}">
<script src="{{ asset('vendor/webblocks-ui/webblocks-ui.js') }}"></script>

AJAX modülleri için CSRF meta etiketi

WBAjaxToggle veya diğer AJAX özelliklerini kullanıyorsan, CSRF meta etiketini ekle — modül bunu otomatik olarak okur:

<!-- <head> içinde -->
<meta name="csrf-token" content="{{ csrf_token() }}">

Örnek: AJAX onay kutusu geçişi

Özel JS yazmadan tek bir onay kutusuyla bir modelin durumunu değiştir:

<!-- Blade görünümünde -->
<input
  type="checkbox"
  class="wb-switch"
  data-wb-ajax-toggle
  data-wb-url="{{ route('users.toggle-active', $user) }}"
  data-wb-field="is_active"
  data-wb-success="Durum güncellendi"
  {{ $user->is_active ? 'checked' : '' }}
>

Önemli: WebBlocks UI düz HTML sınıfları kullanır — Blade bileşeni veya Blade yönergesi yoktur. HTML, HTML olarak kalır; bu da şablonların Laravel, plain PHP, Django, Rails veya herhangi bir framework'te aynı şekilde çalıştığı anlamına gelir.

Vite kullanıcıları

WebBlocks UI'ı (CDN veya public klasörü) kendi uygulama kodun için Vite ile birleştirebilirsin. WebBlocks UI'ı Vite üzerinden içe aktarmana gerek yoktur — kasıtlı olarak derleme sürecinin dışında tutulmuştur.

<!-- WebBlocks UI için CDN, kendi stil/scriptler için Vite -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.css">
@vite(['resources/css/app.css', 'resources/js/app.js'])

Sonraki adımlar

Her şey hazır. Buradan nereye gidebileceğin.

Token sistemini keşfet

Tasarım tokenlerinin nasıl çalıştığını ve markanla eşleştirmek için nasıl geçersiz kılınacağını öğren.
Temel & Tokenlar →
Tüm bileşenlere göz at

Butonlar, kartlar, modallar, drawer'lar, tablolar, formlar, toastlar ve 30'dan fazlası.
Bileşenler →
Dashboard düzeni kur

Dashboard kabuğu, kenar çubuğu navigasyonu, ayarlar kabuğu ve içerik kabuğu.
Düzenler →
JavaScript API'yi öğren

WBModal, WBDrawer, WBToast, WBAjaxToggle, WBTheme ve 8 modül daha.
JavaScript API →
İkon setine göz at

Kopyalamaya hazır SVG ve <i> etiketi parçacıklarıyla 152 Lucide ikonu.
İkonlar →