Bulma Tasarım Sistemi.

Bulma Tasarım Sistemi: Açık Davranışlı Bir CSS Framework'ü

Anlamsal HTML öğelerinde Bulma sınıflarını kullanın

Bulma; öğeler, bileşenler, düzen yardımcı sınıfları ve değiştiricilerden oluşan görsel bir sözlük sunar. Bir form durum yöneticisi ya da JavaScript widget çalışma zamanı değildir. Editoryal masa, resmî 1.0.4 stil sayfasını yükler ve doğrulama, canlı metin önizlemesi ve tema değiştirme için tümü gösterilen küçük bir betik ekler. React bağımlılığı veya framework sağlayıcısı yoktur.

Bir alan; etiketi, denetim sarmalayıcısını ve yardım metnini bir araya getirir. Giriş sınıfı doğrudan input öğesine uygulanırken select sınıfı, yerel select öğesini saran bir sarmalayıcıya uygulanır. Bu ayrımlar önemlidir; çünkü sarmalayıcı dekorasyonu ve aralıkları yönetir. Ekran görüntüsündeki görünümü genel div öğelerine kopyalamak, yerel düzenleme ve klavye davranışını kaybettirir.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi: HSL Rolleri ve Açık/Koyu Temalar

Sabit geçersiz kılmalar yerine değiştiricileri kullanın

Bulma 1, renk ailelerini HSL bileşenleri olarak saklar ve bunlardan ilişkili değerler türetir. Bağlantı rolü; inceleme düğmesini, bölüm etiketini ve destekleyici vurguları biçimlendirir. Uyarı ve başarı etiketleri Taslak ve İncelemeye hazır durumlarını belirtir; ancak metin etiketi her zaman görünür kalır. İleti, bir hatayı bildirmek yerine süreç sınırlarını açıkladığı için is-info sınıfını kullanır.

Demo, html üzerinde data-theme=light ile başlar. Görünüm düğmesi bu özniteliği light ve dark arasında değiştirir. Tüm kartlar, alanlar, yardım metinleri ve iletiler birlikte doğru temayı devralır. Kutuya doğrudan beyaz arka plan vermek bu geçişi bozar. Marka özelleştirmeleri için yalnızca son düğme arka planını değiştirmek yerine belgelenmiş rol değişkenlerini değiştirin ve bunlardan türetilen durumları doğrulayın.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi: Yazı Tipi Tercihleri ve Kullanışlı Bir Tipografi Ölçeği

Paket yazı tipi sunmayı değil, yazı tipi tercihlerini tanımlar

Varsayılan yazı tipi sıralaması Inter ile başlar ve birkaç sistem yazı tipi yedeği içerir. Bulma yüklemek Inter'ı indirmez. Çevrimdışı bu örnek, listelenen yazı tiplerinden yüklü olanı kullanır. Bu nedenle belirli bir yazı tipine ihtiyaç duyan bir üretim derlemesi, yazı tipi dosyasını ve yükleme politikasını ayrıca sağlamalıdır. Başlık ve alt başlık sınıfları, HTML başlık düzeyini değiştirmeden görsel hiyerarşi oluşturur.

Editoryal masa, sayfa için title is-2, form için title is-4 ve makale başlığı için title is-3 kullanır. Dar ekranlarda uygulanan geçersiz kılma, sayfa başlığını 2rem boyutuna indirir; bu, özellikle yerel bir iyileştirmedir. Denetimler normal 1rem boyutunu korur. Yardım metni ilgili alanın yanında kalır; böylece kullanıcının yönergeleri ayrı bir kenar çubuğunda araması gerekmez.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi: Aralık Yardımcıları ve Duyarlı Sütunlar

Doğal biçimde alt alta dizilen yedi/beş sütun bölünmesi

Üst columns öğesi is-variable is-6 kullanır; alt öğeleri ise column is-7 ve column is-5'tir. Bu oranlar forma, makale önizlemesinden daha fazla alan ayırır. Mobil öncelikli varsayılan davranışta sütunlar mobil genişliklerde alt alta dizilir. Bu nedenle bu düzen, sıkışık bir yatay düzeni koruyacak olan is-mobile sınıfını eklemez.

Aralık yardımcı sınıflarındaki son ekler doğrusal bir piksel ölçeği oluşturmaz. Özellikle beşinci son ek 1.5rem, altıncı son ek ise 3rem'dir. Kart ve ileti arasındaki boşlukta mt-5, küçük etiketlerde mb-3 kullanılır. Dış bölüm, dikeyde 2rem ve yatayda 1.5rem kullanan bir uygulama geçersiz kılmasıdır; kuruluma tam ek CSS dahil edilmiştir.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi: Alan Yapısı ve Doğrulama

Hata, yalnızca renkten ibaret değildir

Başlık ve özet, etiketler ve yardım metinleriyle açıkça ilişkilendirilmiştir. Gönderim reddedildiğinde girişe ve yardım metnine is-danger eklenir, aria-invalid=true olarak ayarlanır ve geçersiz ilk denetime odaklanılır. Başlık en az beş kırpılmış karakter, özet ise en az yirmi karakter içermelidir. Bunlar örnek editoryal gereksinimlerdir; Bulma kısıtlamaları değildir.

Metin denetimi onay kutusu da seçilmelidir. Açıklayıcı hata iletisi aria-describedby ile ilişkilendirilir. Bulma bu durumları görsel olarak gösterebilir ancak metnin hazır olup olmadığına karar veremez. Bu kararı betik verir ve yerel form gezinmesini engeller. Herhangi bir sunucu sonucu uydurulmaz.

1. Odaklanan geçersiz girişi görmek için başlığı silip formu gönderin.
2. En az yirmi karakterden oluşan bir başlığı ve özeti geri yükleyin.
3. Metin denetimi onay kutusunu işaretleyin, formu gönderin ve ardından metni düzenleyerek taslağı yeniden Taslak durumuna getirin.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi: Kart, İleti ve Durum Etiketleri

Her kapsayıcıya tek bir görev verin

Makale kartında card-header ve card-content ayrı tutulur. Üst bilgide konu belirtilirken etiket, editoryal durumu gösterir. İçerikte canlı bölüm, başlık ve özetin ardından meta veriler yer alır. Önizlemede bilerek önce metne odaklanılır: yazar, dikkat dağıtıcı bir yer tutucu görsel olmadan hiyerarşiyi ve uzunluğu değerlendirebilir.

İleti bileşeni, incelemeye hazır olma durumunun yerel olduğunu açıklamak için message-header ve message-body kullanır. Doğrulamadan bağımsız olarak görünür kalır. Geçici bir başarı bildirimi, bu kalıcı açıklamanın yerini tutmaz; çünkü bildirimi kapatmak, kullanıcının makalenin yayımlandığını sanmasına yol açabilir.

• Kart: mevcut makale düzeni.
• Etiket: açıkça belirtilen taslak veya inceleme durumu.
• İleti: eylemin ne yaptığını açıklayan kalıcı bilgi.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi: Widget Çalışma Zamanı Olmadan Uygulama Durumu

Eski başarı durumlarının kalmasını ve önizlemeye güvenli olmayan içerik eklenmesini önleyin

Her giriş olayı önizlemeyi günceller ve durumu Taslak olarak sıfırlar. Böylece yazar, incelenmiş metni değiştirdikten sonra Hazır etiketinin kalması önlenir. Görüntüleme textContent ile güncellenir; bu nedenle yazılan HTML işaretleme olarak yorumlanmak yerine metin olarak gösterilir. Bunlar uygulamanın sorumluluklarıdır; Bulma stil sayfası bu işlevleri sağlayamaz.

Taslağı geri yükleme işlemi form.reset çağrısını yapar, doğrulama sınıflarını ve aria-invalid özniteliğini kaldırır, onay kutusu yardım metnini temizler ve önizlemeyi yeniden oluşturur. Belgeyi yeniden yüklemeden özgün örnek içeriğe döner. Gönderim sonrasındaki değişikliklerde durum paragrafı role=status kullanır; normal yazım sırasında odağın tekrar tekrar yer değiştirmesi önlenir.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi: CSS Yükleyin ve Davranışı Görünür Tutun

Sağlayıcı yok, Bulma JavaScript pakete dahil değil

[email protected] paketini yükleyin ve derlenmiş CSS dosyasını yerel bir varlığa kopyalayın ya da mevcut bir paketleyicide bu CSS dosyasını içe aktarın. Burada gösterilen yalın HTML kurulumu, varlık kopyalandıktan sonra derleme adımı gerektirmez. Eksiksiz masa işaretlemesini body içine yerleştirin ve app.js dosyasını defer ile yükleyin. Bulma bileşenlerini etkinleştireceği beklentisiyle ilgisiz bir JavaScript paketini yüklemeyin.

Daha sonra modal veya açılır menü eklerseniz klavye, odak ve kapatma davranışlarını bilinçli biçimde sağlayın. is-active gibi bir sınıf görünümü değiştirir; odak tuzağı oluşturmaz. Bu örnekte yerel girdiler ve düğmeler, davranış kapsamını küçük ve incelenebilir tutar.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemini Uygun Kapsamda Özelleştirme

Üzerine yazmadan önce bileşen değişkenlerini inceleyin

Global --bulma değişkenleri temayı belirler, ancak bileşenler kendi seçicilerinde de değişken tanımlar. Daha özgül bir bileşen ataması, kök düzeyindeki bir değeri geçersiz kılabilir. Kök düzeyinde bir geçersiz kılma işe yaramıyor gibi görünüyorsa derlenmiş CSS içindeki sınıfı inceleyin; ardından ilgisiz bildirimleri çoğaltmak yerine geçersiz kılmayı uygun bileşene ekleyin.

Uzun süre kullanılacak bir ürün için paket varsayılanlarını, marka geçersiz kılmalarını ve ekrana özgü düzen kurallarını birbirinden ayrı tutun. Örnekteki küçük kapsayıcı ve mobil başlık ayarlamaları ekran kurallarıdır. Referans tablolarında gerçek Bulma değerleri ayrı ayrı gösterilir; böylece hangi ayarların yeniden kullanılabileceği, hangilerinin yalnızca bu editoryal masaya ait olduğu açıkça görülür.

Destekleyici belirtimi okuyun

Bulma Tasarım Sistemi Bileşen Örnekleri

<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>

const $=id=>document.getElementById(id);
const fields=['headline','summary'];
function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';}
function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();}
for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview);
$('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';});
$('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();});
$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';});