55+ CSS Araçları: Ön İşlemciler, Eklentiler, Düzenleyiciler ve Gradyan Üreticileri

CSS, Basamaklı Stil Sayfası anlamına gelir. CSS, web sayfalarını tasarlamak için HTML ile birlikte kullanılan bir biçimlendirme dilidir. HTML sayfaları harika görünmüyor ama CSS ile güzel ve çekici görünmelerini sağlayabilirsiniz. WordPress Tema Geliştirmeyi öğrenmeyi planlıyorsanız öncelikle HTML ve CSS öğrenmelisiniz.

Tema Geliştirme Araçları serisinden daha fazla makale

• WordPress Geliştirme Araçları Serisi Ana Sayfası
• HTML, CSS, JavaScript, jQuery, Bootstrap ve WordPress'te Ustalaşmak için 15 Ücretsiz Kitap İndirin
• Web Geliştiricileri için 30'dan Fazla En İyi Chrome, Firefox Uzantısı, Öğreticiler ve Araçların nihai listesi
• HTML, CSS, PHP, jQuery, JavaScript, Git ve Daha Fazlasını Öğrenmek İçin 38 Ücretsiz Video Kursu

Bu yazıda, yeni başlayanlar ve ileri düzey WordPress geliştiricileri için en iyi CSS araçlarını paylaşacağız. Yeni başlayan biriyseniz ve HTML veya CSS hakkında hiçbir şey bilmiyorsanız, HTML, CSS ve diğer programlama dillerini sıfırdan öğrenmek için 38 ücretsiz kurs ve 15 ücretsiz e-kitap indirebilirsiniz.

12 CSS Araçları: CSS Ön İşlemcileri, Uygulamalar ve Eklentiler

1. Less CSS : Less bir CSS ön işlemcisidir, yani CSS dilini genişleterek değişkenlere, karışımlara, işlevlere ve CSS'yi daha sürdürülebilir, temaya uygun ve genişletilebilir hale getirmenize izin veren diğer birçok tekniğe izin veren özellikler ekler.

2. SASS , dünyadaki en olgun, kararlı ve güçlü profesyonel düzeyde CSS uzantı dili olduğunu iddia ediyor. SASS neredeyse on yıllık ve Sass ile oluşturulmuş Compass, Bourbon ve Susy dahil sonsuz sayıda çerçeve var.

3. Stylus , normal CSS'nin işlevselliğini artıran bir CSS Ön İşlemcisidir. güçlü mantıksal işlevsellik sunar, Node.js / JavaScript aracılığıyla çalıştırma yeteneği, (Ruby yok), Node.js kurulumunun bir parçası olarak çalıştırma yeteneği, Temiz ve minimal ancak esnek sözdizimi.

4. CodeKit (32 $) , MAC kullanıcıları için çok güçlü ve popüler bir Uygulamadır. CodeKit, Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown ve Javascript'i derleyebilir. Otomatik Yenileme Tarayıcıları sunun ve yerleşik Bower ile Bootstrap, jQuery, Modernizr, Zurb Foundation ve hatta WordPress dahil olmak üzere 6.000'den fazla bileşeni tek bir tıklamayla kurabilirsiniz.

5. PrePros (29 $) : Prepros, LESS, Sass, Compass, Stylus, Jade ve çok daha fazlasını otomatik CSS öneki ile derlemek için birinci sınıf bir araçtır, Çapraz tarayıcı testi için yerleşik sunucu ile birlikte gelir. Windows, Mac OS X ve Linux için kullanılabilir. Otomatik CSS Ön Eki, Otomatik Tarayıcı Yenileme, Dosya Küçültme, Görüntü Optimizasyonu, Yerleşik Sunucu ve daha pek çok özellik sunar.

6. Emmet : Farklı kod editörlerinin hızlı ve kolay bir şekilde kod yazmaları için ücretsiz bir eklenti. Emmet saf JavaScript ile yazılmıştır ve farklı platformlarda çalışır: web tarayıcısı, Node.js, Microsoft WSH ve Mozilla Rhino.

7. Fire.App : Windows için CodeKit benzeri bir araç fire.app'dir (ayrıca Linux ve Mac'te çalışır). Sass/Compass'ı seviyor ama komut satırı arayüzünden nefret mi ediyorsunuz? Fire.app, tıpkı Compass.app'ımız gibi birinci sınıf Sass/Compass desteğine sahiptir. Artık satıcı CSS önekleri ve el yapımı hareketli görüntüler yok!. Fire.app, Mac, Linux ve Windows platformunda çalışır. Yükleme işlemi, tıklayıp sürüklemek kadar kolaydır.

8. Snippets , kodunuzu yönetmek için ücretsiz bir programdır. kod parçacıklarını farklı projelerde düzenlemenize ve yeniden kullanmanıza, parçacıkları herkese açık olarak ve ekibinizle paylaşmanıza yardımcı olur. Bu, Mac ve Windows için kullanılabilir.

9. Koala App , web geliştiricilerinin bunları daha verimli kullanmalarına yardımcı olmak için Less, Sass, Compass ve CoffeeScript derlemesi için bir GUI uygulamasıdır. Koala Windows, Linux ve Mac üzerinde çalışabilir.

   

10. LiveReload CSS düzenlemeleri ve görüntü değişiklikleri canlı olarak uygulanır. CoffeeScript, SASS, LESS ve diğerleri sadece çalışır. LiveReload, dosya sistemindeki değişiklikleri izler. Bir dosyayı kaydeder kaydetmez, gerektiği gibi ön işleme tabi tutulur ve tarayıcı yenilenir.

11. Scout App , Sass & Compass'ın gücünü web tasarımcılarının ellerine sunan bir çapraz platform uygulamasıdır. Scout, daha fazla kontrol, optimizasyon ve organizasyon sağlayarak CSS iş akışınızı bir çırpıda yapmanıza yardımcı olur.

12. Crunch 2 Crunch, Less, Sass, CoffeeScript, Markdown* yazmanıza ve ardından değişiklikleri yaptıktan sonra CSS, JavaScript ve HTML'yi otomatik olarak kaydetmenize olanak tanır. Sadece düz CSS yazmak ister misiniz? XML? Haskell? MUSHKodu? Crunch bunu da yapmanızı sağlar. Crunch 2, istediğinizi yapmanızı sağlayan bir düzenleyicidir. Çünkü Crunch seni seviyor.

10 WordPress Özel CSS Eklentisi

WordPress'te CSS'yi özelleştirmek istiyorsanız, WordPress 4.7'den beri özelleştirici altında bulunan birçok ücretsiz eklentiyi veya yerleşik CSS Düzenleme özelliklerini kullanabilirsiniz. Özel CSS'yi kolayca değiştirmenize ve kaydetmenize yardımcı olan ücretsiz 10 Ücretsiz CSS Eklentisi listesi hazırladık.

Ayrıca bu öğreticiyi, Chrome Geliştirici Araçlarını Kullanarak WordPress Temasında CSS'yi Nasıl Düzenleyeceğinizi ve jQuery veya PHP kullanmadan CSS ile WordPress Menülerine Ok Eklemeyi öğrenmek için de okuyabilirsiniz.

15 CSS gradyan oluşturucu

1. colorzilla gradyan düzenleyici
2. cssmatic gradyan düzenleyici
3. kızgın araçlar gradyan oluşturucu
4. degradegenerator.com/
5. css3generator.com/
6. cssportal gradyan oluşturucu
7. uigradients.com: Güzel renk gradyanlarını kullanmaya hazır
8. css3factory doğrusal gradyanlar
9. gradcolor gradyan oluşturucu
10. perbang RGB gradyanı
11. paintbycode gradyan oluşturucu
12. virtuosoft gradyan üreteci
13. westciv radyal gradyanlar
14. westciv doğrusal gradyanlar
15. CSS3 Gradyan Oluşturucu

10 Ücretsiz çevrimiçi CSS editörü

1. CSS Portalından Çevrimiçi CSS Düzenleyici
2. CSS güverte laboratuvarları
3. ScratchPad Gerçek Zamanlı HTML ve CSS Düzenleyici
4. EnjoyCSS'den Çevrimiçi CSS3 Kod Oluşturucu
5. css masası
6. jsfiddle : JavaScript, CSS, HTML veya CoffeeScript'inizi çevrimiçi olarak test edin
7. CSSmate Düzenleyici
8. CSS Güzelleştirme ve Küçült
9. liveweave HTML5, CSS3 ve JavaScript oyun alanı
10. SelfCSS – WYSIWYG CSS Düzenleyici

CSS'yi değiştirmek için 10 Chrome Uzantısı

1. CSS Görüntüleyici
2. stil robotu
3. Kullanıcı CSS'si
4. Canlı CSS Düzenleyici
5. Geliştirme Araçları Otomatik Kaydetme
6. CSS'yi kaydet
7. Duyarlı Web Tasarım Test Cihazı
8. Duyarlı Müfettiş
9. Görüntü Alanı Yeniden Boyutlandırıcı
10. Sekme Yeniden Boyutlandırma – bölünmüş ekran düzenleri

Son sözler

Web tasarımcıları ve geliştiricileri için bu CSS Araçları listesi bu kadar. Stilleri kolayca özelleştirmek ve değişikliklerinizi kaydetmek için bu ücretsiz CSS araçlarını kullanabilirsiniz. Chrome uzantıları, CSS düzenlemelerinizi krom geliştirici araçlarından ayrılmadan kaydetmek için çok kullanışlıdır.

CSS ön işlemcileri ile CSS'yi verimli bir şekilde yazabilirsiniz. Umarım, bu araçları seveceksiniz. Bu makale, Tema Geliştirme Araçları Serimizin bir parçasıdır. Ücretsiz Kitap indirmek ve WordPress Tema Geliştirme hakkında en son makaleleri ve eğitimleri almak için WordPress Tema Geliştirme Bültenimize katılmayı unutmayın.

Not : Bu makale ilk olarak createwptheme.com'da yayınlanmıştır, burada izin alarak yeniden yayınladık.