Foundation Tasarım Sistemi.

Foundation: Gerçek Çalışma Zamanına Sahip Siteler İçin Tasarım Sistemi

Gerçek Çalışma Zamanına Sahip Siteler için Foundation

Foundation for Sites, duyarlı bir CSS çerçevesini JavaScript eklentileriyle bir araya getirir. Prova masası, düzen için XY Grid'i, doğrulama için Abide'ı ve inceleme iletişim kutusu için Reveal'ı kullanır. Derlenmiş çalışma zamanı jQuery 3.7.1'den sonra yüklenir; sayfa hazır olduğunda $(document).foundation() veri özniteliklerini başlatır.

Bu, Foundation for Emails'ten farklıdır. Sayfada tarayıcı formları, JavaScript doğrulaması ve bir modal kullanılır; işaretlemesi bir e-posta şablonu değildir. Çevrimdışı örnek, 6.9.0 sürümündeki gerçek dosyaları içerir ve bu bileşenlerin statik taklidini çizmek yerine küçük, özgün bir betik ekler.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi Sass Ayarları ve Varsayılan Palet

Sass Ayarları ve Varsayılan Palet

Başvuru tablosunda, yüklenmiş Sass yapılandırmasındaki ayarlar listelenir. Varsayılan palette primary #1779ba, secondary #767676, success #3adb76, warning #ffae00 ve alert #cc4b37 bulunur. Bunlar çerçevenin renk rollerini tanımlar; sıcak tonlu kitapçık kapağı ise kendi paletine sahip özgün CSS çizimidir.

Dolar işaretiyle başlayan ayarlar, derleme zamanındaki girdilerdir. Bunlar, tarayıcıdaki stil özniteliğine atanabilen CSS özel özellikleri değildir. Çerçeve temasını değiştirmek için Sass derlemesi kullanın veya ekrana özgü bir düzenleme için derlenmiş stil sayfasından sonra, kapsamı açıkça belirtilmiş sıradan CSS kuralları ekleyin. Örnekte başlık, form dolgusu ve arka plan için ikinci yöntem uygulanır.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi: Varsayılan Geometri ve Yerel Okuma Hiyerarşisi

Varsayılan Geometri ve Yerel Okuma Hiyerarşisi

Foundation, tarayıcı boyutuna bağlı %100 yazı tipi boyutuyla, 1.5 gövde satır yüksekliğiyle ve Helvetica Neue/Helvetica/Roboto/Arial yazı tipi yığınıyla başlar. Genel köşe yarıçapı sıfırdır; bu nedenle varsayılan görünüm, günümüzün birçok bileşen kitine kıyasla daha köşelidir. Girdiler, bilgilendirme kutuları ve prova formu, ilgisiz ve büyük köşe yarıçapları eklenmeden bu görünümü korur.

Uygulama, satır yüksekliği 1.15 olan 38px sayfa başlığını seçer; mobilde bu değer 30px'e düşer. Öncü metin 18 pikseldir. İllüstrasyonda baskı bağlamını görünür kılmak için kalın, üst üste yerleştirilmiş harfler ve basit bir daire kullanılır; form ise istikrarlı, beyaz bir çalışma yüzeyi olarak kalır. Bunlar, sağlanan CSS içinde eksiksiz biçimde listelenen yerel tercihlerdir.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi XY Grid ve Boşluk Seçimi

XY Izgarası ve Oluk Seçimi

grid-container içinde grid-x grid-margin-x satırı bulunur. İki hücre, 640px üzerindeki ekranlarda form ve kitapçık ön izlemesi için on iki sütunu medium-7 ve medium-5 olarak böler. Bu eşik değerinin altında hücreler kaynak sırasına göre alt alta dizilir. İç içe yerleştirilmiş Pages/Proof copies satırında small-6 hücreleri kullanılarak iki kompakt sayı alanı telefonda yan yana tutulur.

Foundation hem margin hem de padding ızgaralarını destekler. Bu örnekte, aynı satırda her iki türü karıştırmak yerine kapsayıcı içindeki boşluklar için tutarlı biçimde margin aralıkları seçilir. Eşik değerleri eşlemesi Sass kullanımına yönelik xlarge ve xxlarge değerlerini de içerir; ancak varsayılan breakpoint-classes ayarı small, medium ve large genişlik sınıflarını üretir. Eşlemede bir değerin bulunması, ilgili tüm yardımcı sınıfların derlenmiş dosyada otomatik olarak yer aldığı anlamına gelmez.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi: Gerçek Doğrulama Kurallarını Tanımlama

Gerçek Doğrulama Kurallarını Kaydedin

Formda data-abide, novalidate ve data-validate-on=submit kullanılarak düğmeye tıklama sırasında değişiklikle tetiklenen hata düzeninin yeniden akması önlenir; her form-error span'i, data-form-error-for aracılığıyla ilgili girdiye bağlanır. data-abide-error ile işaretlenmiş bir alert callout, form düzeyinde özet sunar. Zorunlu başlık ve ön kontrol onay kutusuna ilişkin hataların yanı sıra iki özel sayısal doğrulayıcı kullanılır.

Kitapçık doğrulayıcısı, dörde bölünebilen 4 ile 200 arasındaki tam sayıları kabul eder. Kopya sayısı doğrulayıcısı 1 ile 10 arasındaki tam sayıları kabul eder. Her ikisi de başlatma öncesinde Foundation.Abide.defaults.validators öğesine kaydedilir ve data-validator aracılığıyla çağrılır. Test edilen bu akışta yerel step özniteliği, kitapçık sayfa sayısı artışını tek başına zorunlu kılmadı; bu nedenle uygulama buna güvenmez. Dört sayfa varsayımı bu örneğe özgüdür ve tüm baskı süreçleri için geçerli değildir.

1. Beş sayfa girip gönderin: inceleme kapalı kalmalıdır.
2. On altı sayfa ve bir başlık girip ön kontrolü tamamlayın.
3. Yerel provayı kaydetmeden önce yakalanan değerleri inceleyin.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi: Hata Görünümünü Gezinmeye Bağlama

Hata Görünümünü Gezinmeye Bağlama

forminvalid.zf.abide olayı gerçekleştiğinde uygulama, data-invalid taşıyan ilk alana odaklanır. Böylece kullanıcı düzeltme yapabileceği bir noktaya yönelirken alert callout genel sorunu açıklar. Girdi hata span'leri aria-describedby aracılığıyla ilişkilendirilir; dolayısıyla ileti, adı belirtilmemiş bir alanın yanındaki kırmızı bir işaretten ibaret değildir.

Olayların tüm akışı JavaScript örneğinde görülebilir. Tarayıcının mevcut olmayan bir uç noktaya gitmesini önlemek için sıradan submit olayı engellenir. Bekleyen anlık görüntüyü yalnızca formvalid.zf.abide oluşturur ve incelemeyi açar. Bu önemlidir: inceleme iletişim kutusunu doğrudan gönder düğmesine bağlamak, doğrulama sonucunu devre dışı bırakır.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi: Reveal'da Anlık Görüntüyü İnceleme

Reveal'da Anlık Görüntüyü İnceleyin

Modal, data-reveal özniteliğini ve başlığına yönelik bir aria-labelledby ilişkisini içerir. Geçerli form işleyicisi bekleyen bir nesne oluşturur ve tanım listesini textContent ile oluşturur. Reveal, Foundation API aracılığıyla açılır, modal davranışını sağlar ve data-close düğmeleri ya da onay işleyicisi aracılığıyla kapanır.

Düzenlemeye devam et düğmesi, herhangi bir sonuç kaydetmeden iletişim kutusunu kapatır. Yerel provayı kaydet düğmesi, kapanmadan önce aynı bekleyen değerleri durum bilgilendirme kutusuna yazar. Kapatma simgesinin açık bir etiketi vardır. Uygulamada dosya yükleme veya baskı siparişi oluşturma işlemi bulunmadığından onay, bunlardan herhangi birinin gerçekleştiği iddiasında bulunmaz.

• Reveal, geçerli form olayında yakalanan değerleri gösterir.
• İptal, kaydedilmiş yerel sonucu değiştirmez.
• Onay yalnızca ön izleme durumunu kaydeder; harici bir sipariş oluşturmaz.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi: Bağımlılık Zincirini Sabitleme ve Yükleme

Bağımlılık Zincirini Sabitleyin ve Yükleyin

[email protected] ve [email protected] paketlerini yükleyin; ardından derlenmiş CSS dosyasını, Foundation JavaScript dosyasını ve jQuery'yi yerel varlıklara kopyalayın. Stil sayfasını sayfa iyileştirmelerinden önce yükleyin. Önce jQuery'yi, ikinci olarak Foundation dosyasını ve üçüncü olarak uygulama betiğini yükleyin; defer, belge ayrıştırıldıktan sonra da bu sırayı korur.

$(document).foundation() çağrısından önce özel doğrulayıcıları kaydedin. Doğrulayıcıları başlatmadan sonra kaydetmek, önlenebilir bir zamanlama bağımlılığı yaratır. Geçerli örnekte tekrarlanabilirlik için derlenmiş çalışma zamanının tamamı kullanılır. Üretim paketi eklentileri ve bağımlılıklarını seçebilir; ancak işaretlemede veri özniteliklerini bırakırken Abide'ı veya Reveal'ı çıkarmamalıdır.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi: Ön Kontrol Yerel Bir Tercihtir, Üretim Onayı Değil

Ön Kontrol Yerel Bir Karardır; Üretim Onayı Değildir

Diyagram ve sayfa sayısı kuralı prova bağlamını somutlaştırır; ancak belirli bir matbaanın üretim şartnamesi değildir. Örnekte kullanıcılardan gerçek kısıtlamaları üretim hizmet sağlayıcısıyla doğrulamaları açıkça istenir. Kopya adedi, envanter veya fiyat bilgisi değil, örneğe özgü yerel bir sınırdır.

Gerçek bir gönderim akışı; dosya incelemesi, sunucu tarafında doğrulama ve izlenebilir bir kabul yanıtı gerektirir. Foundation arayüz bileşenlerini sağlayabilir; ancak bu alana özgü denetimler uygulama tarafından gerçekleştirilmelidir. Bu sınırı açıkça belirtmek, okuyucuların yanıltıcı bir başarı iddiasını devralmadan doğrulama ve inceleme kalıbını yeniden kullanmasını sağlar.

Destekleyici belirtimi okuyun

Foundation Tasarım Sistemi Bileşen Örnekleri

<main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>

Foundation.Abide.defaults.validators.booklet=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=4&&n<=200&&n%4===0};
Foundation.Abide.defaults.validators.copies=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=1&&n<=10};
$(document).foundation();let pending=null;
$('#proof-form').on('submit',event=>event.preventDefault()).on('formvalid.zf.abide',()=>{pending={title:$('#job').val().trim(),pages:Number($('#pages').val()),copies:Number($('#copies').val()),stock:$('#stock').val()};const list=document.getElementById('proof-summary');list.replaceChildren();for(const[label,value]of [['Job',pending.title],['Pages',pending.pages],['Proof copies',pending.copies],['Stock',pending.stock]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=value;list.append(dt,dd);}$('#proof-review').foundation('open');}).on('forminvalid.zf.abide',()=>{document.querySelector('#proof-form [data-invalid]')?.focus()}).on('reset',()=>{$('#result').text('No proof recorded. This preview does not submit a print order.')});
$('#confirm').on('click',()=>{$('#result').text('Recorded locally: '+pending.title+' — '+pending.pages+' pages, '+pending.copies+' proof copies. No order was created.');$('#proof-review').foundation('close')});

body{background:#f6f5f1}.proof-desk{max-width:1100px;padding-top:32px;padding-bottom:32px}header{margin-bottom:32px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#596456}h1{font-size:38px;line-height:1.15}.lead{font-size:18px;color:#53606a}form{background:white;padding:24px;border:1px solid #ddd}.paper-preview{background:#e3d8bd;aspect-ratio:4/3;padding:24px;position:relative;overflow:hidden;margin-bottom:20px}.paper-preview span{position:relative;z-index:1;font-size:36px;line-height:1;font-weight:700;letter-spacing:-.04em;color:#31483b}.paper-circle{position:absolute;width:75%;aspect-ratio:1;background:#718474;border-radius:50%;top:25%;left:40%}.paper-preview strong{position:absolute;bottom:20px;left:24px;color:#31483b;font-size:12px;letter-spacing:.13em}.callout h2{font-weight:600}#result{margin-top:16px}.reveal dl{display:grid;grid-template-columns:110px 1fr;gap:10px}.reveal dd{overflow-wrap:anywhere}.button:focus-visible{outline:3px solid #143e5b;outline-offset:3px}@media(max-width:639px){h1{font-size:30px}form{padding:18px}.paper-preview{margin-top:16px}}