Skip to content

Commit 5a0a155

Browse files
mervedenizovalimervedenizovali
authored
Update README.md
1 parent 4c054ed commit 5a0a155

File tree

1 file changed

+64
-71
lines changed

1 file changed

+64
-71
lines changed

‎README.md

Lines changed: 64 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,42 @@
44
![Dependencies](https://status.david-dm.org/gh/mertasan/tailwindcss-variables.svg)
55
[![license](https://img.shields.io/badge/License-GPLv3-green.svg?label=license)](//github.com/mertasan/tailwindcss-variables/tree/master/LICENSE)
66

7-
# tailwindcss CSS variables
7+
# Tailwindcss CSS Variables
88

9-
Bu eklenti, tailwindcss için CSS değişkenlerini `tailwind.config.js` dosyası aracılığıyla kolayca yapılandırmaya
10-
olanak sağlar.
9+
This plugin allows you to configure CSS variables for tailwindcss by enabling the `tailwind.config.js` file.
1110

12-
Kullanım şekli, tailwindcss'in varsayılan yapılandırmaları ile benzer şekildedir. Dark Mode için ayrı değişken
13-
grubu belirleyebilmek, plugin API aracılığıyla kendi paketlerinize kolayca entegre edebilmek de mümkün.
1411

15-
## Öne çıkan özellikler
12+
How it works is similar to the tailwindcss' default configirations. It is also possible to define a different variable group for Dark Mode and to integrate it with your packages through plugin API.
1613

17-
- Değişkenler, tailwindcss renklerini tanımlamak kadar basit.
18-
- Değişkenleri `:root` ya da custom CSS seçicilere tanımlayabilirsiniz.
19-
- Değişkenler iç içe geçmiş obje notasyonu (nested object notation) kullanılarak oluşturulabilir.
20-
- Dark Mode için farklı değişkenler oluşturulabilir.
21-
- Dark Mode değişkenleri, yapılandırmanızdaki `class` ya da `media` moduna göre otomatik tanımlanır.
22-
- Yapılandırmadaki `darkMode` ayarı eğer `class` olarak belirtilmiş ise özel seçiciler tanımlanabilir.
23-
- Plugin API aracılığıyla kendi eklentinizi oluştururken tema yapılandırması yapmanıza olanak sağlar.
24-
- Değişkenler için prefix tanımlaması yapılabilir. (plugin API için faydalı)
25-
- Değişkenler, yapılandırma dosyasında veya .css vb. stil dosyalarında kullanılabilir.
26-
- Çoklu tema gibi gereksinimlerinizi ek bir eklentiye gerek kalmadan kendiniz yapılandırabilirsiniz!
2714

28-
## Dökümantasyonlar
15+
## Highlighted Features
2916

30-
| Dil | Dökümantasyon linki |
17+
- Variables are as easy as defining tailwindcss' colors...
18+
- You can designate the variables to `:root` or custom CSS selectors.
19+
- Variables can be formed through using nested object notation.
20+
- Different variables can be composed for the Dark Mode.
21+
- Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.
22+
- If `darkMode` settings are set as `class`, custom selectors can be defined.
23+
- Enables you to configure themes when you are creating your own plugin through Plugin API.
24+
- Prefix can be defined for variables. (Benefits the Plugin API)
25+
- Variables can be used for the configuration file or .css like style files.
26+
- You can configure your own needs such as multi-themes without needing an additional plugin!
27+
28+
29+
## Documentation
30+
31+
| Language | Documentation Link|
3132
| --- | --- |
3233
| English | [**Documentation**](./README.md) |
33-
| Türkçe | Dokümantasyon |
34+
| Turkish | Dokümantasyon |
3435

35-
## Kurulum
36+
## Installation
3637

3738
```cli
3839
npm install -D @mertasan/tailwindcss-variables
3940
```
4041

41-
## Basit Kullanım
42+
## Easy Accessibility
4243

4344
```javascript
4445
// tailwind.config.js
@@ -93,7 +94,7 @@ module.exports = {
9394

9495
## Dark Mode
9596

96-
### `class` modu ile
97+
### with the `class` mode
9798

9899
```javascript
99100
// tailwind.config.js
@@ -166,15 +167,15 @@ module.exports = {
166167
}
167168
```
168169

169-
#### `darkToRoot` ve `darkSelector` ayarları ile
170+
#### with the `darkToRoot` and `darkSelector` configurations
171+
172+
If the `darkMode:`configuration is set as `'class'` in your tailwindcss configuration, you can change and customize the `darkToRoot` and `darkSelector` settings.
170173

171-
Eğer tailwindcss yapılandırmanızda `darkMode: 'class'` olarak tanımlıysa, eklentinin `darkToRoot` ve `darkSelector`
172-
ayarlarını kullanarak özelleştirebilirsiniz.
173174

174-
| option | type | default | description |
175+
| Option | Type | Default | Description |
175176
|-------------- |-------- |--------- |------------------------------------------------------------------------- |
176-
| darkSelector | string | .dark | Dark mode için kullanılan CSS seçici. |
177-
| darkToRoot | bool | true | `darkSelector` ayarında tanımlanan seçici :root olarak mı kullanılıyor? |
177+
| darkSelector | string | .dark | CSS selector used for Dark mode. |
178+
| darkToRoot | bool | true | Does the selector defined as`darkSelector` being used as :root ? |
178179

179180
```javascript
180181
// tailwind.config.js
@@ -250,7 +251,7 @@ module.exports = {
250251
}
251252
```
252253

253-
### `media` modu ile
254+
### with the `media` mode
254255

255256
```javascript
256257
// tailwind.config.js
@@ -325,7 +326,7 @@ module.exports = {
325326
}
326327
```
327328

328-
## Prefix Kullanımı
329+
## Using Prefixes
329330

330331
```javascript
331332
// tailwind.config.js
@@ -375,7 +376,7 @@ module.exports = {
375376
}
376377
```
377378

378-
## İç içe geçmiş obje notasyonu (Nested)
379+
## Nested Object Notation
379380

380381
```javascript
381382
// tailwind.config.js
@@ -417,24 +418,23 @@ module.exports = {
417418
```
418419

419420

420-
## Key adlandırma kuralları
421+
## Rules for Naming Keys
422+
423+
Variable keys can only include designated characters. Other characters will be automatically removed. Because using underscores (_) on objects is allowed, underscores will be transformed into middle dashes (-).
421424

422-
Değişken keyleri yalnızca belirli karakterlere sahip olabilir. Diğer karakterler otomatik olarak temizlenir.
423-
Objelerde alt tire (_) kullanımı mümkün olduğundan, alt tireler de orta çizgiye (-) dönüştürülür.
424425

425426
Rule:
426427
````jsregexp
427428
/[^a-zA-Z0-9\-]+/gi
428429
````
429430

430-
| öncesi | sonrası |
431+
| Before | After |
431432
|-------------- |-------- |
432433
| hello[$&+,:;=?@#'<>.-^*()%!]world | hello-world |
433434
| hello__world | hello-world |
434435
| css_variables_for-tailwindcss | css-variables-for-tailwindcss |
435436

436-
İşte bir örnek:
437-
437+
Here's an example:
438438
```javascript
439439
// tailwind.config.js
440440

@@ -485,9 +485,9 @@ module.exports = {
485485
}
486486
```
487487

488-
## Kendi eklentileriniz için API örneği
488+
## API example for your own plugins
489489

490-
- [Ayrıntılı açıklama](#gerçek-kullanım-örneği-detaylı)
490+
- [Detailed Explanation](#gerçek-kullanım-örneği-detaylı)
491491

492492
```javascript
493493
// tailwind.config.js
@@ -547,9 +547,9 @@ module.exports = {
547547
}
548548
```
549549

550-
### API Component helper
550+
### API Component Helper
551551

552-
tailwindcss-variables plugin API'yi bileşenlerinizi kayıt etmek için de kullanabilirsiniz.
552+
You can also use tailwindcss-variables plugin API to save your components.
553553

554554
```javascript
555555
// tailwind.config.js
@@ -637,27 +637,21 @@ module.exports = {
637637
}
638638
```
639639

640-
## Gerçek kullanım örneği (detaylı)
640+
## Detailed Authentic Usage Example
641641

642-
**Avantajları neler?**
642+
**What are the advantages?**
643643

644-
Laravel için bir form oluşturucu (PHP) paketi oluşturduğunuzu hayal edin. Bu durumda özelleştirmeniz gereken
645-
birçok stil olacağına eminim. Ancak en gerekli olan şeylerden bir tanesi renkler! Bileşenleri kendi belirlediğiniz
646-
renklerle oluşturursunuz. Elbette bu renkler `vendor:publish` komutu ile kullanıcılar tarafından özelleştirilebilir ama
647-
bunu herkes için daha basit hale getirebilirsiniz. Kullanıcılar renkleri kendileri yapılandırabilir, isterlerse
648-
eklentinizi dark mode için yapılandırabilirler. Böylelikle, kullanıcılar bazı basit değişiklikler için
649-
`.css` veya `.blade.php` dosyalarını özelleştirmek zorunda kalmazlar. Bu sayede eklentinizi güncel şablonlarıyla
650-
birlikte kullanarak, gelecekteki versiyon güncellemelerine uyum sağlayabilirler. Bu açıklamayı okuduysanız eğer,
651-
bu eklentininin ortaya çıkma nedenini artık biliyorsunuz demektir. :)
644+
Imagine you are creating a form builder (PHP) package for Laravel. In this case, I am sure there will be a lot of styles to customize. Nonetheless, one of the most necessary things is the colors! You'll develop the components with the colors you pick out. Of course these colors can be customized with the `vendor:publish` command but you can make it simpler for everyone. Users can customize the colors for their own likings and if they wish they can also configure your extension for the dark mode as well. This way, users don't have to alter the `.css` or `.blade.php` files for some small and simple customizations. Thus, they can use your extension with up to date templates and can adapt to future version updates. If you have read this statement, it means that now you know why this plugin came about. :)
652645

653646

654-
**Dezavantajları neler?**
655647

656-
Bir fikriniz varsa eğer, lütfen PR göndermekten çekinmeyin.
648+
**What are the disadvantages?**
657649

658-
**Bu örnek ile ilgili kaynaklar:**
650+
If you have any ideas, please don't refrain to send a PR.
659651

660-
- [kaynak](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples/readme-source)
652+
**Resources on this example:**
653+
654+
- [Source](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples/readme-source)
661655
- [test](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__/readme.test.js)
662656

663657
**Your own plugin themes:**
@@ -767,35 +761,34 @@ module.exports = {
767761
}
768762
```
769763

770-
Bu örnekteki gibi bir kurgu sayesinde, eklentinizin stilleri için, sizin ek .css dosyaları yayınlamanıza,
771-
kullanan kişilerin ise paketlerinizi kullanabilmek için stil dosyaları derlemelerine gerek kalmayacak.
764+
With a setup just like on this example, it won't be necessary to publish extra .css flies for your plugin styles and also, it won't be necessary for the users to sort out your style files to compile your packages.
765+
772766

773767

774-
## Örnekler ve testler
768+
## Examples and Tests
775769

776-
Hem kullanım şekli konusunda yardımcı olması için, hem de sunulan tüm özellikleri test ederek
777-
doğru çalıştığından emin olmak için örnekler hazırladım.
770+
I have prepared examples on both helping with the usage and for testing all of the features that's being offered to make sure it works just fine.
778771

779772

780-
| Kaynak | Durum |
773+
| Source | State |
781774
| --- | --- |
782-
| [Örnekler](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/examples) | ![Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples) |
783-
| [Plugin API örnekleri](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![API Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=api-examples) |
784-
| [Testler](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__) | ![Tests](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests) |
775+
| [Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/examples) | ![Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples) |
776+
| [Plugin API Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![API Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=api-examples) |
777+
| [Tests](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__) | ![Tests](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests) |
785778
| [Travis CI](https://travis-ci.com/mertasan/tailwindcss-variables) | ![Tests](https://img.shields.io/travis/mertasan/tailwindcss-variables/master.svg?label=travis-ci) |
786779

787-
> Örneklere ve testlere ait dosyalar pull-request, push, release vb. etkinliklerde otomatik olarak yeniden
788-
> derlenmektedir. Bu nedenle, örnek dosyalarda `require(../index)` gibi dosya yolları kullanıldı.
789-
> Örnekleri kullanacaksanız eğer, ilgili yerleri `require('@mertasan/tailwindcss-variables')` şeklinde değiştirmeniz gerekiyor.
780+
> Documents on examples and tests are re-organized on pull-request, push, release and etc. activities.
781+
> For this reason, file paths like `require(../index)` have been used on the example files. If you were to use the examples, you need to change the relevant interiors as `require('@mertasan/tailwindcss-variables')`.
782+
>
790783
791784

792-
## Yardım
785+
## Help
793786

794-
Lütfen GitHub issues aracılığıyla tüm soru ve sorunlarınızı iletin. Size yardımcı olmaya çalışacağım.
787+
Please send any questions and issues through GitHub issues. I will try my best to help you.
795788

796-
## Katkı
789+
## Contribution
797790

798-
Herhangi bir özelliği iyileştirir veya yeni özellikler eklerseniz eğer, lütfen pull-request göndermekten çekinmeyin.
791+
If you are to improve or/and add new features, please feel free to send pull-requests.
799792

800793
## License
801794

0 commit comments

Comments
 (0)