Mozaic’in 16px sihirli birimini, birbiriyle uyumlu 48px kontrollerini, gerçek SCSS içe aktarımlarını ve BEM sınıflarını kullanarak işlevsel bir miktar kontrolü düzeni oluşturun. Raf planlayıcı; sınırları, türü belirtilmiş hataları ve yerel malzeme özetini görünür kılar.
Mozaic’in sihirli birimini ve orta boy miktar kontrolünü yorumlayan özgün, çevrimdışı HTML/CSS çalışması; özgün illüstrasyon ve uygulama renk paleti, yerel kütüphane CSS uygulaması değildir. · Uygulama başvurusu
02
Adeo Mozaic Tasarım Sistemi Tasarım Başvurusu
Mozaic SCSS/BEM belgeleri: temel ve kurulum sayfaları v1.85.0 sürümünü, miktar kodu başvurusu ise v1.76.0 sürümünü belirtir. Bunlar belgelenmiş başvuru sözleşmeleridir; tüm sayfaların aynı en güncel paket sürümünü izlediği iddiası değildir.
Adeo Mozaic Tasarım Sistemi: Yapılandırılabilir perakende kimliğine sahip SCSS bileşenleri
ADEO kuruluştur, varsayılan hazır ayar değildir
Mozaic, kaynak stillerini ve belirteçlerini yazı tiplerinden ve SVG simgelerinden ayrı sunar. Varsayılan belirteç teması Leroy Merlin’dir; ADEO ise açıkça seçilmesi gereken bir hazır ayardır. Bu nedenle özgün yeşil önizleme, resmî bir ADEO kurumsal renginin kanıtı değildir.
ADEO hazır ayarı için preset: "adeo" ve tokens.localTokensExportPath içeren bir mozaic.config.js oluşturun, ardından npx mozaic-tokens-build komutunu çalıştırın. Özel belirteç dizini, ilgisiz değerleri değiştirmek yerine karşılık gelen JSON yollarını derin birleştirmeyle birleştirir. Tema oluşturma ve bileşen stillerini biçimlendirme, derlemenin ayrı konularıdır.
styles, SCSS bileşenlerini sağlar.
tokens, kaynak ve oluşturulmuş belirteç biçimlerini sağlar.
web-fonts ve icons, ayrı varlıkları sağlar.
css-dev-tools, derleme ve lint yapılandırmasını sağlar.
Adeo Mozaic Tasarım Sistemi Metin kapsayıcılarını sabitlemeden sihirli birimi kullanın
Rem tabanlı 16px başvuru değeri
Mozaic ölçeğinin küçük değerlerinde çeyrek birimlik, orta bölümünde yarım birimlik, büyük uzaklıklarda ise tam birimlik artışlar kullanılır. Başvuru tablosu, ikinci bir boşluk sistemi uydurmadan adlandırılmış gerçek değerleri sunar.
Planlayıcıda 16px aralıklar, 24px iç boşluk ve 48px kontrol yüksekliği kullanılır. Bu değerler, çevredeki kartların ve metinlerin büyümesine olanak tanırken bileşeni de aynı ritme oturtur. Çevrilmiş veya büyütülmüş bir etiketi sabit yükseklikteki içerik kutusunda kırpmak yerine minimum kontrol yüksekliği belirlemek daha uygundur.
Adeo Mozaic Tasarım Sistemi Yoğun kontrollerin yanında gövde metnini okunaklı tutun
Üç kullanışlı gövde metni boyutu
Belgelenmiş gövde metni ölçeğinin merkezinde 16px normal ağırlık bulunur. Çok satırlı metin için önerilen en küçük boyut 14px, paragraf için önerilen en büyük boyut ise 18px’tir. Önizleme sistem yazı tipi yedeğini kullanır ve Mozaic web-fonts paketini içerdiği izlenimini vermez.
Projeyi adlandırmak için büyük başlığı, hesaplamayı açıklamak için gövde metnini, örneğin kapsamını belirtmek içinse daha küçük destekleyici satırı kullanın. Malzeme değerleri, raf illüstrasyonunun içine çizilmiş metinler değil, gerçek metinler olarak kalır.
Adeo Mozaic tasarım sistemi Tek bileşen, uyumlu üç öğe
Sarmalayıcı, uygulama durumunu sağlamaz
Miktar seçici; kare, kenarlıklı bir azaltma düğmesini, sayısal giriş alanını ve bununla uyumlu bir artırma düğmesini bir araya getirir. Metin girişi ve düğme dâhil üç bileşenin de stillerini import edin; yalnızca quantity-selector import etmek, belgelenmiş bileşim için yeterli değildir.
Kompakt bir varyant için düğme ve giriş alanı boyutlarını birlikte değiştirin. Kullanım yönergeleri, küçük kesme noktalarında orta boyutun kullanılmasını gerektirir; bu nedenle telefonda her şeyi küçültmek yanlış bir optimizasyondur. Önizleme, 48px kontrolleri korur ve çevredeki düzeni dikey olarak sıralar.
Adeo Mozaic Tasarım Sistemi Sınır stilleri gerçek davranışla uyumlu olmalıdır
Yazılan girişin, artı ve eksi düğmelerinden daha fazla durumu vardır
Özgün örnek, 1 ile 12 arasındaki tam sayıları doğrular. Değer bir olduğunda azaltma gerçekten devre dışıdır; on iki olduğunda ise artırma devre dışıdır. is-disabled sınıfı tek başına klavyeyle etkinleştirmeyi engellemez. Yerel disabled özniteliğiyle görsel sınıf eşzamanlı tutulur.
Boş veya kesirli olarak girilen değer sessizce makul görünen bir malzeme listesine dönüştürülmez. Gönderim, kabul edilen aralığı açıklar ve odağı alana taşır. Hazırlanan sonuç önceki miktara karşılık geldiğinden, sonraki düzenleme eski sonucu temizler. Raf hesabı, kurgusal örnek verileridir; yapısal veya satın alma tavsiyesi değildir.
Boş dizeyi sıfır saymadan girilen değeri okuyun.
Örnek sayımları hesaplamadan önce tam sayı ve aralık koşullarını doğrulayın.
Her iki sınır düğmesini ve erişilebilir hata durumunu güncelleyin.
Yalnızca doğrulama başarılı olduktan sonra yerel bir anlık görüntü oluşturun.
Adeo Mozaic Tasarım Sistemi Projenin sonucu için tek bir dolu eylem kullanın
Adımlarla değiştirme ve liste hazırlama işlemlerini ayırın
Adım seçici, bir giriş değerini değiştirdiğinden sade kenarlıklı kare kontroller kullanır. Dolu Malzeme listesi hazırla düğmesi formun tamamına yönelik bir eylemdir. Yan yana duran, aynı renkteki iki dolu eylem bu ayrımı belirsizleştirir.
Sonuç mesajında hiçbir şeyin sipariş edilmediği açıkça belirtilir. Sahte bir yükleme durumu, ödeme akışı veya ağ üzerinden gönderim yoktur. Değerlerle eylemler arasındaki ilişkiyi göstermek için somut bir özet yeterlidir.
Adeo Mozaic Tasarım Sistemi Belgelenmiş import ifadelerini Mozaic’in işlem hattından derleyin
Önce ayarlar, ardından bileşen çıktısı
Tüm ayarları import eden ifade değişkenleri, işlevleri ve mixin’leri sağlar, ancak tek başına bileşen CSS çıktısı üretmez. Sağlanan paket bunu text-input, button ve quantity-selector ile devam ettirir. Sunulan eklenti yapılandırması, Mozaic import yollarını çözümler ve gerekli dönüşümleri uygular.
Eklenti paketi bir CLI çalıştırıcısı sağlamadığından kurulum, PostCSS CLI çalıştırıcısını içerir. Üretim için MOZAIC_ENV eklenti yapılandırmasını değiştirir. Kurulum sayfası artık Node 20+ sürümünü zorunlu, Dart Sass’ı ise önerilen seçenek olarak belirtir; Node Sass’tan söz eden eski metinler, kullanımdan kaldırılmış derleyiciyi yüklemek için gerekçe sayılmamalıdır.
Adeo Mozaic Tasarım Sistemi Yardımcı sınıf boşluklarını bileşenlerin iç yapısından ayrı tutun
Bileşenin kendi düzenini belirlediği yerlerde ölçek değerlerini kullanın
Mozaic’in margin ve padding yardımcı sınıfları, bileşenler arasındaki boşluklar için tasarlanmıştır. Yeni bir bileşenin içinde, bileşenin kendi başına çalışabilmesi için SCSS sihirli birim değişkenlerini kullanın. calc($mu025 - 1px) örneğinde olduğu gibi, amaçlanan ritmi korumak için hedef boyuttan bir kenarlık kalınlığını çıkarmak gerekebilir.
Çevrimdışı örnek, yerel Mozaic CSS uygulaması olduğu iddiasında bulunmaz. Belgelenmiş boyutları ve miktar bileşeninin yapısını özgün renklerle, CSS raf illüstrasyonuyla ve yalnızca yerel çalışan bir etkileşimle yorumlar. Ayrı kod bloğunda gerçek kütüphane sınıfları ve derleme bağlantısı sunulur.
Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Mozaic’in sihirli birim ve orta miktar denetiminin özgün, çevrimdışı HTML/CSS yorumu; yerel kütüphane CSS değil, özgün çizim ve uygulama paleti.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Shelf materials planner</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#242920;font:16px/1.5 Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #23682c;outline-offset:4px}header{border-bottom:1px solid #d9ddd1;padding:16px 32px;display:flex;justify-content:space-between;gap:16px}header b{font-size:18px}header span,.note{font-size:14px;color:#5a6154}main{max-width:1056px;margin:auto;padding:32px}h1{font-size:36px;line-height:1.1;letter-spacing:-1px;margin:8px 0 16px}p{margin:0 0 16px}.eyebrow{font-size:12px;letter-spacing:2px;color:#23682c;font-weight:bold}.layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}.art{background:#e5eadc;border-radius:4px;min-height:350px;display:grid;place-items:center;position:relative;overflow:hidden}.wall{width:78%;height:220px;background:linear-gradient(90deg,transparent 49.6%,#d8dfcf 50%,transparent 50.4%);position:relative}.board{position:absolute;left:0;right:0;top:130px;height:18px;background:repeating-linear-gradient(0deg,#bd9b6e 0 3px,#c6a477 3px 7px);box-shadow:0 10px 12px #26341b20;transform:skewY(-3deg)}.bracket{position:absolute;top:148px;width:12px;height:62px;background:#727867;transform:skewY(-3deg)}.bracket.a{left:15%}.bracket.b{right:15%}.pot{position:absolute;left:23%;top:58px;width:47px;height:72px;background:#c88462;border-radius:3px 3px 15px 15px}.leaf{position:absolute;width:52px;height:34px;background:#3d6e38;left:4px;top:-22px;border-radius:100% 0 100% 0;transform:rotate(-25deg)}.leaf:after{content:'';position:absolute;width:45px;height:30px;background:#638a47;left:20px;top:-15px;border-radius:0 100% 0 100%;transform:rotate(45deg)}.books{position:absolute;top:48px;right:20%;height:80px;display:flex;gap:4px;align-items:end}.books i{width:18px;height:76px;background:#f4efe4;display:block;border-top:6px solid #7f9673}.books i:nth-child(2){height:88px;background:#d3b795}.books i:nth-child(3){height:68px;background:#718268;transform:rotate(-10deg)}.art small{position:absolute;bottom:16px;left:24px;color:#526448}.panel{background:#fff;padding:24px;border:1px solid #d9ddd1;border-radius:4px}h2{font-size:24px;line-height:1.25;margin:0 0 8px}label{display:block;font-weight:bold;margin:24px 0 8px}.quantity{display:flex;max-width:240px;margin-bottom:8px}.quantity button,.quantity input{height:48px;border:1px solid #727a6a;background:#fff}.quantity button{width:48px;color:#23682c;font-size:24px;flex-shrink:0}.quantity button:first-child{border-radius:4px 0 0 4px}.quantity button:last-child{border-radius:0 4px 4px 0}.quantity input{width:96px;min-width:0;border-left:0;border-right:0;text-align:center;appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}button:disabled{color:#a2a69b;background:#f1f2ed;cursor:default}.materials{margin:24px 0;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #d9ddd1;padding:16px 0}.materials strong{font-size:24px;display:block}.materials span{font-size:14px;color:#62695c}.primary{min-height:48px;padding:12px 24px;background:#23682c;color:#fff;border:0;border-radius:4px;width:100%;font-weight:bold}.error{color:#ac2323;margin:8px 0;font-size:14px}.result{margin-top:16px;background:#eaf3e2;padding:16px;border-left:4px solid #23682c}.result:empty{display:none}footer{padding-top:24px;font-size:14px;color:#62695c}@media(max-width:650px){header{padding:16px}header span{max-width:140px}main{padding:24px 16px}h1{font-size:32px}.layout{grid-template-columns:1fr;gap:16px}.art{min-height:260px}.panel{padding:24px}.materials{gap:12px}}
</style><header><b>PROJECT WORKSHOP</b><span>Original Mozaic interpretation</span></header><main><p class="eyebrow">SMALL PROJECT · BIG DIFFERENCE</p><h1>Make room for what matters.</h1><p>Plan a simple shelf arrangement and prepare its sample materials list.</p><div class="layout"><div class="art" role="img" aria-label="Original illustration of a wooden shelf with books and a potted plant"><div class="wall"><div class="board"></div><div class="bracket a"></div><div class="bracket b"></div><div class="pot"><div class="leaf"></div></div><div class="books"><i></i><i></i><i></i></div></div><small>Original shelf illustration</small></div><form class="panel" id="planner" novalidate><h2>Your shelf project</h2><p class="note">Each sample shelf uses one board, two brackets and four screws.</p><label for="quantity">Number of shelves</label><div class="quantity"><button id="minus" type="button" aria-label="Remove one shelf" aria-controls="quantity">−</button><input id="quantity" type="number" min="1" max="12" step="1" required value="2" aria-describedby="hint error"><button id="plus" type="button" aria-label="Add one shelf" aria-controls="quantity">+</button></div><p class="note" id="hint">Choose a whole number from 1 to 12.</p><p class="error" id="error" role="alert"></p><div class="materials" aria-live="polite"><div><strong id="boards">2</strong><span>Boards</span></div><div><strong id="brackets">4</strong><span>Brackets</span></div><div><strong id="screws">8</strong><span>Screws</span></div></div><button type="submit" class="primary">Prepare materials list</button><div id="result" class="result" role="status"></div></form></div><footer>Local interaction example. No order is placed. Sample quantities are illustrative, not structural guidance.</footer></main><script>const input=document.querySelector('#quantity'),minus=document.querySelector('#minus'),plus=document.querySelector('#plus'),error=document.querySelector('#error'),result=document.querySelector('#result');function number(){return input.value.trim()===''?NaN:Number(input.value)}function valid(n){return Number.isInteger(n)&&n>=1&&n<=12}function update(show=false){const n=number(),ok=valid(n);result.textContent='';minus.disabled=ok&&n===1;plus.disabled=ok&&n===12;input.setAttribute('aria-invalid',String(!ok&&show));error.textContent=!ok&&show?'Enter a whole number from 1 to 12.':'';document.querySelector('#boards').textContent=ok?n:'—';document.querySelector('#brackets').textContent=ok?n*2:'—';document.querySelector('#screws').textContent=ok?n*4:'—';return ok}minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update()};plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update()};input.oninput=()=>update();document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`};update();</script></html>
Raf miktarları bir sipariş değil, malzeme listesi oluşturur. Yerel işaretleme, belgelenmiş Mozaic PostCSS çıktısını gerektirir; bu bağımsız belge kendi yorumlama stillerini içerir.
Sınırları belirlenmiş raf miktarı ve türetilmiş malzeme listesi
Yerel Mozaic sınıfları, yerel bir sayı giriş alanını çevreler. Özgün JavaScript tam sayı doğrulaması, sınırda devre dışı bırakma ve yalnızca yerel bir özet sağlar.
html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./mozaic.css"><title>Shelf materials</title>
<main><h1>Plan a shelf project</h1>
<form id="planner" novalidate>
<label for="quantity">Number of shelves</label>
<p id="hint">Choose 1 to 12. Each sample shelf needs two brackets and four screws.</p>
<div class="mc-quantity-selector">
<button type="button" id="minus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left" aria-controls="quantity" aria-label="Remove one shelf">−</button>
<input id="quantity" name="quantity" class="mc-text-input mc-quantity-selector__input" type="number" min="1" max="12" step="1" value="2" required aria-describedby="hint error">
<button type="button" id="plus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right" aria-controls="quantity" aria-label="Add one shelf">+</button>
</div>
<p id="error" role="alert"></p><p id="counts" aria-live="polite"></p>
<button type="submit" class="mc-button">Prepare materials list</button>
<p id="result" role="status"></p></form></main>
<script>
const input=document.querySelector('#quantity'), minus=document.querySelector('#minus'), plus=document.querySelector('#plus');
const error=document.querySelector('#error'), counts=document.querySelector('#counts'), result=document.querySelector('#result');
function number(){return input.value.trim()===''?NaN:Number(input.value);}
function valid(n){return Number.isInteger(n)&&n>=1&&n<=12;}
function update(showError=false){
const n=number(),ok=valid(n); result.textContent='';
minus.disabled=ok&&n===1; plus.disabled=ok&&n===12;
minus.classList.toggle('is-disabled',minus.disabled);plus.classList.toggle('is-disabled',plus.disabled);
input.setAttribute('aria-invalid',String(!ok&&showError));
error.textContent=!ok&&showError?'Enter a whole number from 1 to 12.':'';
counts.textContent=ok?`${n} boards · ${n*2} brackets · ${n*4} screws`:'Enter a quantity to calculate materials.';
return ok;
}
minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update();};
plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update();};
input.oninput=()=>update();
document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return;}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`;};
update();
</script></html>
İki adım düğmesi, formu göndermemeleri için type="button" kullanır.
Yerel min/max/step değerleri anlamlarını korurken özel doğrulama boş ve kesirli girişleri denetler.
Bir miktarın değiştirilmesi, önceki hazırlanmış anlık görüntüyü geçersiz kılar.
04
Adeo Mozaic Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Belgelenmiş PostCSS yapılandırmasını kullanan genel SCSS iş akışı. HTML örneğini public/index.html yoluna kaydedin. Yerel paket derlemesi burada çalıştırılmadı; çevrimdışı önizleme bağımsız bir yorumdur. Güncel kurulum yönergeleri, eski PostCSS sayfasındaki Node Sass ifadesinin yerine Dart Sass kullanır.
text
# Node 20+. Use a CommonJS project for this configuration.
npm install @mozaic-ds/styles sass
npm install --save-dev @mozaic-ds/css-dev-tools postcss postcss-cli postcss-scss
# Save the configuration and SCSS below, then build:
npx postcss src/bundle.scss --output public/mozaic.css
# Production build on a POSIX shell:
MOZAIC_ENV=production npx postcss src/bundle.scss --output public/mozaic.css
// postcss.config.js
module.exports = {
syntax: require('postcss-scss'),
plugins: require('@mozaic-ds/css-dev-tools/postcssPluginConfig')
};
// src/bundle.scss — settings must precede components.
@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.button';
@import 'components/c.quantity-selector';
Projeniz İçin Bir İstem
Ajan İstemi
text-input, button ve quantity-selector bileşenlerinden önce settings-tools/all-settings kullanan bir Mozaic SCSS bileşimi oluştur. Küçük ekranlarda 48px orta boy denetimleri eşleştir, sınır düğmelerini yerel olarak devre dışı bırak, girilen tam sayıları doğrula ve yalnızca yerel bir özet oluştur. Belgelenmiş PostCSS işlem hattını kullan; varsayılan Leroy Merlin temasıyla ADEO ön ayarını birbirinden ayır.
05
Adeo Mozaic Tasarım Sistemi Kaynakları ve Kapsamı
Mozaic’e bağımsız bir OpenDesign referansı. Örnek, ADEO ya da Leroy Merlin mağazası, canlı sipariş veya yapısal yönlendirme değildir. Belge anlık görüntülerinde farklı sürüm etiketleri bulunur.
