Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Configuration

Configure the Frutjam CSS-only Tailwind CSS plugin. Set default themes, define custom color tokens, toggle the prefix system - zero JavaScript required. WCAG accessible defaults, works with Django, HTMX, Laravel, and any framework.

Projenize uyacak şekilde yalnızca Frutjam CSS'ye özel Tailwind CSS eklentisini yapılandırın. Temaları ayarlayın, özel renk belirteçleri tanımlayın, önek sistemini değiştirin ve isteğe bağlı bileşenleri seçin; sıfır JavaScript gereklidir. WCAG AA'ya erişilebilir varsayılanlar. Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.

Temel Kurulum

@plugin yönergesini kullanarak Frutjam'ı CSS dosyanıza ekleyin. Hiçbir seçeneğe gerek yok; her şey kutudan çıktığı gibi çalışıyor.

css 
1
2
@import "tailwindcss";
@plugin "frutjam";

Eklenti Seçenekleri

@plugin bloğunun içindeki seçenekleri ileterek Frutjam'ı özelleştirin:

css 
1
2
3
4
5
6
7
8
9
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
  reset: true;
  root: :host;
  include: button, card, alert;
  /* or: */
  exclude: table, timeline;
}

önek

Kendi CSS'nizle çakışmaları önlemek için tüm Frutjam sınıf adlarına bir önek ekler.

css 
1
2
3
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn fj-btn-primary">Send mail</button>

Önekin nasıl davranacağı, Tailwind'in prefix() seçeneğini de kullanıp kullanmadığınıza bağlıdır:

Yalnızca Frutjam öneki

Frutjam sınıf adlarına ön ek eklenmiştir. Bunları doğrudan HTML'de kullanın.

css 
1
2
3
4
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn">Button</button>

Yalnızca arka rüzgar öneki

Tailwind'in prefix()'i bir değişken olarak çalışır; tüm yardımcı programlar (Frutjam'ınkiler dahil) HTML'de bir değişken seçici olarak öneki gerektirir.

css 
1
2
@import "tailwindcss" prefix(tw);
@plugin "frutjam";
html 
<button class="tw:btn">Button</button>

Her iki önek

Frutjam sınıflarını yeniden adlandırır (ör. fj-btn) ve en üstte Tailwind'in değişken öneki gereklidir.

css 
1
2
3
4
@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="tw:fj-btn">Button</button>

sıfırlama

Frutjam'ın temel öğe sıfırlamalarını (yeniden başlatma stilleri) enjekte edip etmediğini kontrol eder. Varsayılan olarak true'dur.

true olduğunda Frutjam, Tailwind'in ön kontrolüne benzer şekilde kutu modelini, tipografiyi, listeleri, medyayı ve form öğelerini sıfırlar. false olduğunda yalnızca CSS değişken belirteçleri eklenir; ham öğe stilleri tamamen atlanır.

Zaten başka bir CSS çerçevesi (Bootstrap, Bulma vb.) kullanıyorsanız veya kendi sıfırlamanızı kullanıyorsanız, *, html, body, h1–h6 ve button gibi öğelerde çakışmaları önlemek için false olarak ayarlayın.

css 
1
2
3
@plugin "frutjam" {
  reset: false;
}

kök

Frutjam'ın tasarım belirteci değişkenlerini (--color-primary, --color-base, vb.) kaydettiği CSS seçici. Varsayılan olarak :root şeklindedir.

Üç yararlı değer vardır:

DeğerNe zaman kullanılmalı
:rootVarsayılan. Tokenlar dünya çapında tüm sayfada mevcuttur.
:hostGölge DOM / Web Bileşenleri. Dışarı sızmamaları için bileşenin içindeki belirteçleri kapsam altına alır.
Herhangi bir seçici (ör. #app)Belirteçleri belirli bir sarmalayıcı öğeye kadar kapsar. Frutjam aynı sayfada başka bir çerçeveyle bir arada bulunduğunda kullanışlıdır.

Varsayılan — küresel belirteçler

css 
1
2
3
@plugin "frutjam" {
  root: :root;
}

Gölge DOM / Web Bileşenleri

css 
1
2
3
@plugin "frutjam" {
  root: :host;
}

Bir sarmalayıcı öğenin kapsamı

Başka bir çerçeve zaten :root'u kontrol ediyorsa (örneğin, Bootstrap kendi --bs-* değişkenlerini ve gövde renklerini ayarlar), bunun yerine Frutjam'ı bir konteyner öğesine yönlendirin. Bu, color, background-color ve tüm CSS değişkenlerini :root'un dışına taşır, böylece yalnızca sarmalayıcının içinde uygulanırlar.

css 
1
2
3
4
5
@plugin "frutjam" {
  prefix: fj;
  reset: false;
  root: #my-app;
}
html 
1
2
3
4
<div id="my-app" data-theme="blueberry">
  <!-- Frutjam components here, Bootstrap outside -->
  <button class="fj-btn fj-btn-primary">Send</button>
</div>

katmak

Kütüphanenin tamamı yerine yalnızca belirli bileşenleri yükleyin. Üretimde çıktı boyutunu azaltmak için kullanışlıdır.

css 
1
2
3
@plugin "frutjam" {
  include: button, card, alert, badge;
}

hariç tutmak

Listelenenler dışındaki tüm bileşenleri yükleyin. Tam yapıdan yalnızca birkaç bileşeni çıkarmanız gerektiğinde kullanın.

css 
1
2
3
@plugin "frutjam" {
  exclude: table, timeline, chat;
}

Özel bir tema oluşturun

Kendi temanızı oluşturmak için renk değerlerinizi bir [data-theme="your-theme-name"] seçici içinde sağlanan CSS değişkenlerine atamanız yeterlidir.

1. The "Automatic" Approach (Minimal)

Bu versiyonda --color-on-* değişkenlerini atladık. Frutjam, eksik değişkenleri tespit eder ve bileşenin erişilebilir ve okunabilir kalmasını sağlamak için genellikle çok açık veya çok koyu bir OKLCH değeri arasında geçiş yaparak en uygun metin rengini hesaplar.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-info: oklch(0.685 0.169 237.323);
        --color-success: oklch(0.792 0.209 151.711);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-error: oklch(0.577 0.245 27.325);
    }
}

2. The "Manual" Approach (Full Control)

Bu versiyonda --color-on-* değişkenlerini açıkça tanımlıyoruz. Bu, belirli marka yönergeleriniz olduğunda (saf beyaz yerine renkli kırık beyaz kullanmak gibi) veya erişilebilirlik kontrollerini geçmeye devam eden düşük kontrastlı, sofistike bir görünüm gibi belirli bir "hava" elde etmek istediğinizde idealdir.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-on-base:oklch(0.22 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-on-neutral: oklch(1 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-on-primary: oklch(96.2% 0.018 272.314);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-on-secondary: oklch(1 0 0);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-on-accent: oklch(1 0 0);
        --color-info: oklch(0.685 0.169 237.323);
        --color-on-info: oklch(0.15 0 0);
        --color-success: oklch(0.792 0.209 151.711);
        --color-on-success: oklch(0.15 0 0);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-on-warning: oklch(0.15 0 0);
        --color-error: oklch(0.577 0.245 27.325);
        --color-on-error: oklch(1 0 0);
    }
}

Özel temanızı HTML'nizdeki projenize uygulamak için bir HTML öğesine data-theme='your-theme-name' kullanın.

html 
1
2
3
<html data-theme="your-theme-name">
 ...
</html>

Temalar iç içe yerleştirilebilir; HTML'nizin herhangi bir bölümüne, o alanın genel temasını geçersiz kılacak şekilde belirli bir tema uygulayabilirsiniz.

html 
1
2
3
4
5
6
7
8
<html data-theme="light">
  <div data-theme="dark">
    This div uses the dark theme.
    <span data-theme="your-custom-theme">
      This span uses the your-custom-theme
    </span>
  </div>
</html>

Ek Okuma