Fandom Developers Wiki
Advertisement

LeafyStrap, JustLeafy'nin 2021 Ana Sayfa tasarımından türetilmiş, ana sayfaları biçimlendirmek ve biçimlendirmek için Önyükleme benzeri bir stil sayfasıdır.

Görünüm[]

Leafystrap example

Dark

Leafystrap example light

Light

Kurulum[]

Başlarken[]

LeafyStrap, bileşenleri tanımlamak ve oluşturmak için sınıfları kullanır, bu sınıflar ana sayfanızda daha karmaşık bileşenler oluşturmak için birbirleriyle birleştirilebilir.

Bileşenler[]

Şu anda LeafyStrap'ta bulunan tüm kullanılabilir bileşenlerin listesi:

Ana[]

İsteğe bağlı olarak, önemli, isteğe bağlı ancak önerilen görünmesi için ayrı kutu öğelerini bu bileşenle sarın.

<div class="mp-main">
<div class="mp-box">
I'm important
</div>
</div>

Kutu[]

Stil sayfasının temel bileşeni. Vikinin vurgu temasına karşılık gelen sol kenarlıklı bir kutu oluşturur, arka plan vikinin arka planına karşılık gelir.

<div class="mp-box">
Ben bir kutuyum.
</div>

Başlık[]

Ana içinde kullanıldığında renkli olmasına rağmen, mp-accent-text ile daha uyumlu, büyütülmüş bir metin oluşturur.

<h2 class="mp-title">Ben kocamanım</h2>
Altyazı[]

Başlık için bir altyazı bileşeni, bunu bir "hoş geldiniz" metni, wiki jargonu ve hatta wiki'niz hakkında bazı bilgiler olarak kullanın.

<h2 class="mp-title">Ben kocamanım</h2>
<div class="mp-subtitle">Hayır değilsin.</div>

Kenar çubuğu bileşimi[]

Kutu bileşeni ile birlikte kullanıldığında, kutunun görünümünü ana sayfa kenar çubuğuna uyacak şekilde ayarlar.

<div class="mp-box mp-side">
Kenar çubuğuna daha doğal bir şekilde uyuyorum.
</div>


Izgara kapsayıcı[]

Kutularınızın bir ızgarada olmasını ister misiniz? Bunu gerçekleştirmek için bu kapsayıcı sınıfını kullanın.

Örnek
<div class="mp-grid">
<div class="mp-box">Öge 1.</div>
<div class="mp-box">Öge 2.</div>
<div class="mp-box">3 numara.</div>
<div class="mp-box">4 numara, <s>pilot uçuşun ortasında öldü.</s></div>
</div>

Dekoratörler[]

İşte bir şeyleri renklendirmek için bileşenlere tüm kullanılabilir "eklemelerin" veya Ddkoratörlerin bir listesi.

Aksan metni[]

Metni aksan rengiyle görüntüleyin, bu davranış başlık gibi önceki bazı bildirimlerde zaten görülebilir.

Örnek
<span class="mp-accent-text">Vikiye</span> hoş geldiniz

Merkezi metin[]

Centers the text.

Example
<div class="mp-center mp-box">Merkezim!</div>

Değişkenler[]

LeafyStrap, Common.css ve madde alanı kapsamı içinde standart hâle getirmek ve özelleştirilebilirliği artırmak için özel değişkenler kullanır. Bazı CSS değişkenlerinin satır içinde nasıl kullanılacağını görmek için Ahmad Shadeed'in Satır İçi Stiller ile CSS Değişkenleri sayfasına bakın. İşte tüm değişkenlerin ve kullanımlarının bir listesi:

--lstrap-accent
Genel aksan rengi, bu kenarlıkları ve aksanlı metni etkiler.
--lstrap-text-c
Normal metin rengi.
--lstrap-bg
Bileşenlerin arka plan rengi.
--lstrap-font
Genel yazı tipi.
--lstrap-border-w
Kutuların kenarlık genişliği.
--lstrap-font
Genel yazı tipi.
--lstrap-header-font
Font used by title and header texts.
--lstrap-margin
Margin size used by components.
--lstrap-padding
Padding size used by components.
Advertisement