CSS Gurusu Olmak için 15 Uygulama

CSS nedir, ne için kullanılır kısımlarını bitirdiyseniz sizi biraz daha derine alalım.Yazının başlığında  da belirtiğim gibi CSS de biraz daha ileri gitmek için faydalı olacağını düşündüğüm, 15 web uygulaması ve araçlarını bu yazımda paylaşıyorum.Ama yanlış anlaşılma olmasın, yazı CSS ileri düzey konuları anlatmak için yazılmadı.Başlangıç düzeyinde CSS bilgisine sahip kullanıcılara stil yapılarını daha güzel hale getirmek için yol göstermektedir.

Eğer bir sorun olmaz ise kısa biraz zaman için  CSS ile ilgili -sadece CSS değil- kapsamlı bir ders hazırlamayı düşünüyorum.CSS dersini parça parça yazı serileri şeklinde değilde daha çok 1 veya 2 yazı içerisinde bitirmeyi planlıyorum.Çünkü seri şekilde yazılar genelde bir kaç dersten sonra devam etmiyor.Neyse bu başka bir konu, Şimdi uygulama araçlarımız  nelermiş onlara bakalım:

1 – StyleStats

StyleStats, web sayfaınız yada sitenize ait CSS istatisliğini çıkarmaya yarayan oldukça güzel bir uygulamadır.Bir bakıma sitenizin CSS röntgenini çekiyor.Kaç tane id kullanılmış,kaç tane still dosyası var, boyutları nedir,kullanılan fontlar,boyutları gibi kapsamlı bir CSS analizi yapıyor.

 

2 – ExtractCSS

Extractcss, mevcut HTML dökümanın da bulunan class,id ve HTML elemanlarında bulunan iç still özelliklerini çözümlemeye yarayan bir uygulamadır.Özellikle kapsamlı bir web sitesi yaparken HTML kısmında çok fazla class ve id lere yer veririz.Daha sonra CSS tarafına  geçtiğimiz de bunları hatırlayamayabiliriz.Bu gibi durumlar için işinize oldukça yarayacaktır.HTML kısmında kullanılan ne kadar class,id varsa ortaya çıkarıyor.

 

3 – CSS Compressor

CSS Compressor, kod sıkıştırma işlemi yapan basit ama etkili bir uygulamadır.CSS kodlarınızı sıkıştırarak daha küçük boyutlu CSS dosyası oluşturabilir ve bu şekilde site hızınızı artırabilirsiniz.Uygulama 4 farklı moda göre sıkıştırma işlemi gerçekleştirebiliyor.Basit bir CSS kodunuzu yapıştırıp, bu modlar arasındaki farkı anlayabilirsiniz.

 

4 – CSS BEAUTIFIER

CSS BEAUTIFIER, isimi ile de ipucu verdiği gibi CSS kodlarınızı güzelleştirmeye -düzenli bir hale getirmeye- yarıyor. Bazen alel acele kodları dağınık yazdığınız olmuştur.Yada 3. kişilerden aldığınız kodlar minify edilmişir -tek satırda yazılmıştır-.Bu uygulama ile kodları belirli bir düzene çok kolay bir şekilde getirebilirsiniz.

 

5 – CSScomb

CSScomb, CSS kodlarınızı belirli bir düzene göre sıralamaya yarıyor.Bu uygulama tam olarak karışık kodlarınızı düzleştirmeye yarayan bir tarak görevi yapıyor.

 

6 – ProCSSor

Procssor, yukarıdaki diğer iki uygulama gibi CSS kodlarınızı belirli parametrelere göre düzenlemeye yarayan daha kapsamlı bir uygulamadır.Uygulama içerisinde belirlenen alana kodlarınızı yapıştırabilir, ya da dışarıdan URl şeklinde veya CSS dosyasınızı upload ederek kullanabilirsiniz.

 

7 – CSS Shorthand Generator

CSS Shorthand Generator, CSS özelliklerini tek bir özellik içerisinde yazmanızı sağlıyor.CSS de birbiri ile alakalı bazı özellikler tek bir özellik altında yazılabiliyor.Mesela font-family,font-size,font-weight özellikleri font özelliğinin içerisinde tek satırda yazılabiliyor aynı şekilde , margin-bottom/top,margin-left/right özellikleri margin içerisinde tek seferde yazılabiliyor.

 

8 – RQRWD

RQRWD, web sitelerini responsive yapmak için px yerine %(yüzde) ölçü birimi kullanılır.Responsive yaklaşımı çok da eski bir anlayış olmadığından çoğu web tasarımcı px yerine % kullanırken zorlanıyor.Bu uygulama ile basit bir şekilde px yaptığınız yerleri % olarak çevirebilirsiniz.Responsive tasarım nedir yazıma göz atabilirsiniz.

 

9 – GRIDPAK

Gridpak, responsive altyapısı oluşturmamıza yarar.Bu uygulama grid tekniğine dayanmaktadır.Kolay bir şekilde istenilen kolon sayısıdan sitenizin altyapısını oluşturabilirsiniz.Grid tekniği hakkında bilgi almak isterseniz yazıma göz atabilirsiniz.

 

10 – PX-EM

PX-EM, CSS de boyutları ayarlamak için kullanılan px ölçü birimini em ölçü birimine dönüştürmeyen yarayan basit güzel bir uygulamadır.Px yerine em kullanılmak istendiğin de çoğu web tasarımcının kafası karışıyor.Bu uygulama çok kolay bir şekilde iki birimi birbirine dönüştürebiliyor.Neden px yerine em kullanıyoruz veya kullanmalıyız merak ediyorsanız yazımı okuyabilirsiniz.

 

11 – Fibonacci

Fibonacci, CSS’in flex özelliğini kolay bir şekilde uygulayıp esnek yapılı sayfalar oluşturmak için kullanabileceğiniz oldukça kullanışlı bir uygulamadır.CSS flex hakkında kapsamlı bir yazı yazmıştım, isterseniz göz atabilirsiniz.

 

12 – Flexplorer

Flexplorer, CSS flex özelliğini kolay anlamanız için geliştirilmiş çok faydalı bir uygulamadır.Flex özelliğine ait bütün parametreleri bu uygulama ile rahatça deneyip anlayabilirsiniz.

 

13 – Flat UI Color Picker

Flat UI Color Picker, son bir kaç yılda web tasarımda moda olan flat tasarım için kullanabileceğiniz renk seçeneklerini tutan güzel bir arşiv.Beğendiğiniz rengin HEX,RGB veya adını kopyalayıp CSS de rahatlıkla kullanabilirsiniz.

 

14 – Create CSS

Create CSS3, CSS3 ile birlikte gelen özellikleri nasıl kullanacağınızı bilmiyorsanız bu uygulama işinize oldukça yarayacak.Kullanmak istediğiniz özelliği seçin, uygulama sizin yerinize kodları oluştursun.

 

15 – Iconizr

Iconizr, svg çizimlerini CSS ikon haline getirmek için kullanabileceğiniz basit bir uygulama.

Yazı Hakkında

Bu yazı başlangıç düzeyinde CSS bilginize katkı sağlayacak ve yardımcı olacak uygulama ve araçları tanıtmak için yazıldı.Bu uygulamaların tamamı ücretsiz ve oldukça basit bir kullanıma sahip.Hiç bir zorluk çekmeden CSS uygulamaları kullanabilirsiniz.

Bunları da beğenebilirsin