Material Design CSS Sistemleri
Google Material Design tanımını yaptığından beri android sistemlerinde kullanılmaya başlayan bu tasarım sitelere ve web uygulamalarına da dağıldı. Bu yazıda sizlerle tasarım konusunda CSS Framework oluşturmuş sistemlerden bahsedeceğim. Bu tasarım sadeliğin yanında gerçekten güzel uygulamaların oluşmasını da sağlamakta. Tasarımsal açıdan üç boyutlu dizayn olarak tanımlanan material design ışık, gölge ve materyal düzeninden yola çıkılarak geliştirildi (Google’ın dediği bu).
Material Design CSS Sistemleri
Google bu tasarımla birlikte sadece Android işletim sisteminde değil, Web Sitelerinde ve diğer ürün tasarımlarında da benzerliği ortaya koymaya çalışıyor. Görünen o ki şu ana kadar onu da başardı. Keza bir önceki yazımda Google Chrome material tasarıma geçmekte olduğuna dair bir yazı yazmıştım. Bu da yakın süreçte tamamlanınca Google ürünlerinin tamamında aynı düzeni ve aynı tasarımı görmüş olacağız. Bu da firma için bence iyi bir durum, insanların ürünü kullanırken yadırgama ve ön yargısı değişmiş olacak.
Google Material Design
Google Ana Hatlarıyla material tasarımı burada anlatıyor. Bilgilenmek istiyorsanız burayı bir ziyaret edin.
Gelelim CSS Sistemlere.
Material UI
React ile birlikte geliştirilmiş, Material Tasarım üzerine odaklanmış bir CSS Sistemi. Oldukça kullanışlı olduğunu gördüğüm bir sistem. Ücretsiz ve github üzerinde bulabileceğiniz Material UI React ile Material Tasarımın birleştirildiğinde ne kadar da tatlı olabileceğini gözler önüne seriyor.
Materialize
Materialize CSS sistemi ise Google Material Tasarımı üzerine geliştirilmiş bir web ui olarak tanımlanabilir. Asyalı üniversite öğrencileri tarafından geliştirilmiş bu sistemde Google tasarımına sadık kalınmış. Oldukça hızlı olduğunu gördüğüm sistemi sitenize entegre etmek oldukça kolay. Bu sistemi de yine github üzerinde bulabilirsiniz. Ayrıca Showcase alanında bu sistemi kullanan sitelere de göz atabilirsiniz.
Material Design Lite
Bunu en sona bırakmamın sebebi Google tarafından geliştirilmiş olması. Material tasarımı github üzerinde css sisteme dönüştürme fikri, hele de Google içinden geliyorsa en mantıklısı olacaktır. Şu an yeni sürüme geçişle birlikte Github sayfasındaki içerikler birazcık eski kalmış olsa da son güncelleme ile kendini bulacağını düşündüğüm sistem. Material Tasarımı en doğru uygulayabileceğiniz yöntemleri de bu sayfada bulabilirsiniz.
BONUS : Material Simgeler
Google tarafından geliştirilen Material Simge paketi web için font halinde de mevcut. Açık kaynaklı ve Google tarafından sürekli güncellenen içeriğe sahip. 900 civarında simgenin bulunduğu bu paketi kullanmak çok kolay.
Şu şekilde sitenizin head kısmına yerleştirin.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Sonra da kullanmak istediğiniz simgeyi aşağıdaki şekilde çağırın.
<i class="material-icons">face</i>Umarım hepiniz için yararlı bir yazı olmuştur.
