Turkuaz CSS

Merhaba !

Web geliştirme ile ilgileniyorsanız framework'leri mutlaka duymuş yada kullanmışsınızdır. Artık günümüzde responsive olmayan bir tasarım üretmek söz konusu değil. Her seferinde sıfırdan kodlama yapmak yerine, bazı konularda framework'lerden yardım almak işimizi kolaylaştıracak ve bize zaman kazandıracaktır.

Bu makale, Turkuaz Css hakkında detaylı giriş bilgisini aktarmak amacıyla hazırlanmıştır.

Turkuaz Css nedir?

Turkuaz Css, daha hızlı ve kolay web sayfaları geliştirmek için tasarlanan güçlü bir Framework'tür. Daha az div yapısı ile rakiplerine göre daha şık tasarımlar ortaya çıkarmayı hedeflemektedir. Özelleştirilebilir kod düzeni, çeşitli örnekleri ve 150'den fazla renk seçeneği ile kolayca web sayfaları tasarlamanıza olanak sağlar.

Dil desteği

Turkuaz Css ile kodlama yaparken İngilizce bilmek, İngilizce dokümanları çeviri yapmak yada başkalarından yardım almak zorunda değilsiniz. Türkçe sınıf isimlendirmeleriyle birlikte, İngilizce olarakta kod yazmanıza da olanak sağlar. Her iki dille de aynı çıktıları alabilir ve istediğiniz dil ile kodlamaya başlayabilirsiniz. Her iki dilde de aynı bileşenler ve örneklendirmeler site üzerinde gösterilmiştir.

Grid yapısı ve tarayıcı uyumluluğu

Üzerinde çalıştığınız her web projesinin duyarlı olması ve tüm tarayıcılarda düzgün çalışması gerekir. Projenizde kod tekrarını önlemek, web sitenizin çeşitli ekran boyutlarına uyum sağlaması, tarayıcı uyumluluğu, sayfalar arasında tasarım ve kod tutarlılığı sağlamalısınız. Turkuaz Css ile tüm tarayıcılara uyumlu kodlar yazabilirsiniz. Ayrıca, flexbox uyumlu grid sistemi sayesinde flex'in sağladığı avantajlardan faydalanabilirsiniz.

Turkuaz Css ile projeye başlamak

Turkuaz Css ile projenize başlamak için öncelikle ana sayfası üzerinden gerekli dosyaları indirmek gereklidir (İndir).

İndirilen zip dosyası içerisinde css, javascript, yazı fontu ve basit bir html dosyası ile birlikte gelecektir. Başlamak yeterince kolaydır. Dokümantasyon sayfasından onlarca çeşit bileşenden ihtiyacınız olanı kullanabilirsiniz.

Ayrıca Turkuaz Css, GitHub üzerinden açık kaynak olarak çeşitli temalar üretip, bunları ücretsiz olarak kullanıma sunacaktır (takipte kalın).

Turkuaz Css içerisinde birçok bileşeni barındırır. Bazı bileşenler için 4 farklı boyut tanımlanmıştır. Örnek olarak, bir buton oluşturmak için a tag'ına buton sınıfını eklemek yeterlidir. Boyutunu düzenlemek için sınıfına kucuk, orta yada buyuk sınıflarından birisini ekleyebiliriz.

Turkuaz Css, herhangi bir ikon kütüphanesi ile uyum içerisinde çalışır; istenilen ikon, butonların içerisinde kullanılabilir.

<a class="buton kucuk">kucuk</a>
<a class="buton">normal</a>
<a class="buton orta">orta</a>
<a class="buton buyuk">buyuk</a>

Yaklaşık 150'den fazla renk ile hem arka plan rengi, hemde yazı rengi üzerinde değişiklikler yapabiliriz. Bunun için renkler sayfasından beğendiğiniz rengi sınıfa eklemeniz gerekmekte; örnek olarak mavinin 8. tonunu butonda kullanmak için aşağıdaki kod yeterlidir.

<a class="buton mavi8">Buton</a>

Örneğin şık bir menü oluşturmak için nav tag'ına menu sınıfını vermek ve içerisine a tag'ları ile linkleri oluşturmak yeterlidir. Menüyü istenildiği gibi renklendirebilirsiniz. Menüyü ekranın sol yada sağından gelmesini isterseniz, yapmanız gereken tek şey menu sınıfı yerine mobil yazmanız. Bir tetikleyici ile mobil menünüz kullanıma hazır hale gelecektir (Detaylı bilgi için tıklayın.).

<nav class="menu">
	<a>Anasayfa</a>
	<a>Hakkında</a>
	<a>İletişim</a>
</nav>

Henüz ilk sürümün (v1.0.0) test aşamasında olan Turkuaz Css, hataların tespit edilip düzelmesinin ardından kullanıma sunulacaktır. Test aşamasından sonra ücretsiz olarak kullanıma sunulacak temalar hazırlanmaya başlanacaktır. Bu temalar statik, wordpress uyumlu ve çeşitli php framework'leri ile kullanıma hazır hale getirilecektir (Bu konuda destek olmak isterseniz iletişime geçebilirsiniz). Ayrıca sizlerde tema hazırlayıp gönderirseniz site üzerinden bunları isim belirterek paylaşabilirim.

Bunlara ek olarak çok şık tasarlanmış menü, modal, akordiyon menü, tab menü ve birçok bileşen için turkuazcss.com sitesini ziyaret edebilirsiniz. Ayrıca github üzerinden star'layarak destek olabilirsiniz.