CSS için İşinize Yarayacak Araçlar
Bu yazımda sizlere başlangıç düzeyinde CSS bilgisine sahip kullanıcılara stil yapılarını daha güzel hale getirmek işinize yarayacağını düşündüğüm araçlardan bahsetmek istedim. Bu araçlar veya diğer adıyla uygulamaların tamamı ücretsiz ve oldukça basit bir kullanıma sahiptir. Her hangi bir zorluk yaşamadan CSS uygulamalarında kullanabilirsiniz diye düşünüyorum.
StyleStats: Web sayfanız yada sitenize ait CSS istatistiğ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.
Extractcss : Mevcut HTML dökümanında 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.
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.
CSS Beautifier : İsimi ile de ipucu verdiği gibi CSS kodlarınızı güzelleştirmeye, düzenli bir hale getirmeye yarıyor. Bazen acele ile 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.
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.
Procssor : 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.
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.
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.
Gridpak : Responsive altyapısı oluşturmamıza yarar.Bu uygulama grid tekniğine dayanmaktadır.Kolay bir şekilde istenilen kolon sayısından sitenizin altyapısını oluşturabilirsiniz. Grid tekniği hakkında bilgi almak isterseniz yazıma göz atabilirsiniz.
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.
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.
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.
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.
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.
Iconizr, svg çizimlerini CSS ikon haline getirmek için kullanabileceğiniz basit bir uygulama.
