# Foundation Tasarım Sistemi

## Foundation Tasarım Sistemi Arayüz Önizlemesi

Kitapçık sayfa artışlarını ve kopya sayılarını doğrulayın, ayrıntıları Reveal'da inceleyin ve yerel bir prova durumu kaydedin.

## Foundation Tasarım Sistemi Tasarım Başvurusu

jQuery 3.7.1 ile Sites 6.9.0 için Foundation ayarları ve derlenmiş varsayılan CSS. Dolar işaretiyle başlayan adlar Sass ayarlarıdır; tarayıcı CSS özel özellikleri değildir. Baskı kuralları ve kapak renkleri, örnek için özgün tercihlerdir.

### Foundation paleti

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $primary-color | #1779ba | foundation-palette içindeki birincil eylem rolü. |
| $secondary-color | #767676 | İkincil rol. |
| $success-color | #3adb76 | Paletin başarı girdisi. |
| $warning-color | #ffae00 | Paletin uyarı girdisi. |
| $alert-color | #cc4b37 | Hata/uyarı rolü. |
| $body-font-color | #0a0a0a | Varsayılan okuma metni. |
| $body-background | #fefefe | Varsayılan sayfa arka planı. |
| $light-gray | #e6e6e6 | Nötr açık yüzey/kenarlık kaynağı. |
| $medium-gray | #cacaca | Orta nötr. |
| $dark-gray | #8a8a8a | Koyu nötr. |
### Tipografi ve geometri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $global-font-size | 100% | Tarayıcıya göreli temel yazı tipi boyutu. |
| $global-lineheight | 1.5 | Gövde satır yüksekliği. |
| $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | Varsayılan yazı tipi tercihi. |
| $global-margin | 1rem | Temel kenar boşluğu ritmi. |
| $global-padding | 1rem | Temel dolgu ritmi. |
| $global-radius | 0 | Varsayılan olarak kare köşeler. |
| $global-width | rem-calc(1200) | Varsayılan azami ızgara genişliği. |
| $button-padding | 0.85em 1em | Varsayılan düğme dikey/yatay dolgusu. |
### XY Grid kesme noktaları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| small | 0 | Temel aralık. |
| medium | 640px | Prova formu ve önizleme bölünmesi: 7/5. |
| large | 1024px | Geniş aralık. |
| xlarge | 1200px | Kullanılabilir Sass kesme noktası. |
| xxlarge | 1440px | Kullanılabilir Sass kesme noktası. |
| $breakpoint-classes | small medium large | Varsayılan ayar yalnızca bu adlandırılmış genişlik sınıflarını oluşturur. |
### Açıkça belirtilmiş prova masası kuralları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| booklet validator | integer, 4–200, divisible by 4 | Abide'de uygulanan özgün ön kontrol varsayımı. |
| copies validator | integer, 1–10 | Özgün yerel prova adedi sınırı. |
| Page heading | 38px / 1.15; mobile 30px | Özgün tipografi iyileştirmesi. |
| Form padding | 24px; mobile 18px | Özgün kompakt form düzeni. |
| Cover colors | #e3d8bd / #718474 / #31483b | Özgün illüstrasyon; Foundation palet değerleri değil. |
## Foundation Tasarım Sistemi: Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

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

foundation-sites@6.9.0 ve jquery@3.7.1 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

### Prova masası işaretlemesi

XY Grid, açık form hataları, ön kontrol onay kutusu, bilgilendirme kutuları ve Reveal onayı.

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

Kod referansı

- Formda data-abide ve novalidate kullanılır; böylece hata akışını Abide yönetir.

- Reveal, benzersiz bir kimlikle ve data-reveal özniteliğiyle tanımlanır.

### Özel Abide doğrulayıcıları ve Reveal akışı

Doğrulayıcılar Foundation başlatılmadan önce kaydedilir; formvalid, Reveal'da bir anlık görüntü açar.

```
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')});
```

Kod referansı

- Test edilen bu Abide akışında step özniteliği, dörder sayfalık artışları tek başına zorunlu kılmadı; özel doğrulayıcı bunu sağlar.

- İnceleme iletişim kutusu yalnızca geçerli bir formda açılır.

### Özgün kapak ve düzen iyileştirmeleri

Varsayılan Foundation ayarlarından ayrı CSS çizimi ve sayfaya özgü tipografi.

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

Kod referansı

- Kapağın tüm renkleri uygulamaya özgü tercihlerdir.

## Foundation Tasarım Sistemi: Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Sağlanan app.js, Abide doğrulayıcılarını başlatmadan önce kaydeder ve Reveal'ı geçerli bir form olayına bağlar. Özgün CSS dosyasını style.css adıyla kaydedin. Yerel ön izleme aynı bağımlılıkları satır içine alır. HTML sarmalayıcısı tüm gövde işaretlemesini içerir; sağlanan etkileşim ve CSS örneklerini burada belirtilen dosya adlarıyla kaydedin.

```
<!-- npm install foundation-sites@6.9.0 jquery@3.7.1
mkdir -p assets
cp node_modules/foundation-sites/dist/css/foundation.min.css assets/
cp node_modules/foundation-sites/dist/js/foundation.min.js assets/
cp node_modules/jquery/dist/jquery.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Proof desk</title>
<link rel="stylesheet" href="assets/foundation.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/jquery.min.js" defer></script>
<script src="assets/foundation.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><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>
</body></html>
```

### Projeniz İçin Bir İstem

```
Sağlanan Foundation 6.9.0 baskı prova masasıyla, XY Grid işaretlemesiyle, Abide doğrulayıcılarıyla ve Reveal akışıyla başlayın. Tam sayı ve dördün katı olan sayfa sayısı denetimlerini ve gönderimle tetiklenen doğrulamayı koruyun; etiketleri ve hata ilişkilendirmelerini muhafaza edin. Yerel Reveal incelemesini yalnızca geçerli prova ayrıntıları için açın ve iptali yerel onaydan ayrı tutun. Başlatma kodunun tamamını ve özgün düzen CSS öğesini koruyun; doğrulayıcıları yalnızca görsel hata sınıflarıyla değiştirmeyin veya bir baskı sipariş edildiğini ima etmeyin.
```

## Foundation Tasarım Sistemi Kaynakları ve Kapsamı

jQuery 3.7.1 ile Foundation 6.9.0. Baskı kuralları ve illüstrasyon özgün örneklerdir. Dosya yükleme veya baskı siparişi işlevi uygulanmamıştır.

- Genel stiller Sass temelleri ve renk paleti.

- XY Grid Hücre genişlikleri ve oluk türleri.

- Abide Doğrulama kuralları ve olaylar.

- Reveal Modal yapısı ve API.

- JavaScript Bağımlılıkları yükleme ve başlatma.

- Formlar Yerel form işaretlemesi ve stillendirme.

## Foundation Tasarım Sistemiyle İlgili Kaynaklar

### Framework7

Gerçek swipeout eylemleri, açık iOS tema değerleri, klavyeyle erişilebilen bir eylem açıcı ve tamamlanmış çalışmaları sıfırlanana kadar listede tutan filtreli bir liste içeren yerel bir Framework7 eskiz defteri.

### gluestack UI

gluestack’in gerçek core Button ve Input oluşturucularını, açık v5 anlamsal renklerini ve eksiksiz React Native Web kaynak kodunu kullanarak bir saha kiti kontrol listesi oluşturun. Doğrulamayı, klavye eylemlerini, kararlı öğe kimliğini ve yerel olarak hesaplanan paketleme ilerlemesini inceleyin.

### Headless UI

Headless UI; iletişim kutuları, liste kutuları ve anahtarlar için stilsiz React etkileşim bileşenleri sunar. Bu kılavuz, belge paylaşımı akışını örnek alarak yerel odak, seçim ve açılır pencere davranışlarını sıradan CSS ile bir araya getirmeye odaklanır.


- [Uygulama başvurusu](https://get.foundation/sites/docs/abide.html)
- [Kaynak](https://get.foundation/sites/docs/global.html)
- [Kaynak](https://get.foundation/sites/docs/xy-grid.html)
- [Kaynak](https://get.foundation/sites/docs/abide.html)
- [Destekleyici belirtimi okuyun](https://get.foundation/sites/docs/javascript.html)
- [Destekleyici belirtimi okuyun](https://get.foundation/sites/docs/global.html)
- [Destekleyici belirtimi okuyun](https://get.foundation/sites/docs/xy-grid.html)
- [Destekleyici belirtimi okuyun](https://get.foundation/sites/docs/abide.html)
- [Destekleyici belirtimi okuyun](https://get.foundation/sites/docs/reveal.html)
- [Kod referansı](https://get.foundation/sites/docs/xy-grid.html)
- [Kod referansı](https://get.foundation/sites/docs/abide.html)
- [Kod referansı](https://get.foundation/sites/docs/global.html)
- [Genel stiller Sass temelleri ve renk paleti.](https://get.foundation/sites/docs/global.html)
- [XY Grid Hücre genişlikleri ve oluk türleri.](https://get.foundation/sites/docs/xy-grid.html)
- [Abide Doğrulama kuralları ve olaylar.](https://get.foundation/sites/docs/abide.html)
- [Reveal Modal yapısı ve API.](https://get.foundation/sites/docs/reveal.html)
- [JavaScript Bağımlılıkları yükleme ve başlatma.](https://get.foundation/sites/docs/javascript.html)
- [Formlar Yerel form işaretlemesi ve stillendirme.](https://get.foundation/sites/docs/forms.html)