Materyalize - Materyal Tasarımı CSS Çerçevesi
Google'ın Malzeme Tasarımı Web’de ve ayrıca mobil uygulamalarda iyi çalışması amaçlanmaktadır. Geliştiriciler arasında popülerlik kazanıyor ve siz de benimsemek istiyorsanız, sitenize Malzeme Tasarımı uygulamanın birçok yolu var. Polimer veya Açısal kullanabilirsiniz veya Materialize kullanabilirsiniz.
Maddileştirmek bir Sass destekli Materyal Tasarımı ilkelerine dayanan CSS çerçevesi daha iyi gelişme için. Kolay kullanım için varsayılan stil taşır ve ayrıntılı dokümantasyona sahiptir..
İçinde birçok yararlı bileşen bulabilirsiniz: iletişim, modal, tarih seçici, malzeme düğmeleri, paralaks, kartlar ve daha fazlası. Ayrıca, aşağı açılan, menüde kaydırılan ve sekmeler gibi seçim yapabileceğiniz birçok gezinme seçeneğine sahiptir. Materyalize ayrıca bir kullanır 12 ızgaralı sistem 3 varsayılan ekran boyutu ortam sorgusu ile: maksimum 600 piksellik bir genişlik bir mobil cihazdır, 992px tablet cihazdır ve 992px'ten daha fazla bir masaüstü cihaz olarak kabul edilir..
Başlamak
Materialize'e başlamanın iki yolu vardır: standart CSS veya şımarıklık. Her iki kaynak da buradan indirilebilir. Aşağıdaki komutu kullanarak bunları bower ile de alabilirsiniz:
bower malzemeleştirmek yüklemek
Kaynakları aldıktan sonra bunları proje dosyanızda doğru bir şekilde bağladığınızdan veya Sass sürümünü kullanıyorsanız kaynağı derlediğinizden emin olun..
Özellikler
Bu bölümde, tekliflere uygun hale getirecek bazı özellikleri açıklayacağım.
1. Sass Karışımları
Bu çerçeve, belirli CSS özelliklerini yazdığınızda tüm tarayıcı öneklerini otomatik olarak ekleyen Sass Mixins'i taşır. Sağlanması gereken harika bir özellik tüm tarayıcılarda uyumluluk, mümkün olduğu kadar az telaş ile ve kodla.
Aşağıdaki animasyon özelliklerine bir göz atın:
-webkit animasyonu: 0,5 sn; -moz-animasyon: 0.5s; -o-animasyon: 0.5s; -ms-animasyonu: 0,5 sn; animasyon: 0,5 sn;
Bu kod satırları, şöyle bir satır Sass karışımı ile yeniden yazılabilir:
@include animasyonu (.5s);
Hakkında 19 ana karışım mevcut. Listenin tamamını görmek için, listedeki Sass kategorisine gidin. Katmalar çıkıntı.
2. Akış Metni
Diğer ön uç çerçeveler sabit metin kullanırken, Materialise gerçekten duyarlı bir metin uygular. Metin boyutu ve satır yüksekliği de okunabilirliği korumak için duyarlı bir şekilde ölçeklenir. Küçük ekranlara gelince, satır yüksekliği daha büyük ölçeklendirilir.
Akış Metnini kullanmak için, Akış metin İstediğiniz metni sınıf. Örneğin:
Bu Akış Metnidir.
Akış Metni bölümünde demoyu buradan izleyin.
3. Dalgalar ile dalgalanma etkisi
Materyal Tasarımı ayrıca interaktif geribildirim ile geliyor, dikkate değer bir örnek dalgalanma etkisidir. Materyalize'de bu etki denir. Dalgalar. Temel olarak, kullanıcılar bir düğmeye, karta veya başka bir öğeye tıkladığında veya dokunduğunda / dokunduğunda, efekt görünür. Dalgalar ekleyerek kolayca oluşturulabilir dalgalar etkisi elementlerin üzerine sınıf.
Bu pasajı size dalgaların etkisini verir.
Gönder
Dalgalar varsayılan olarak gri renktedir. Ancak, koyu renkli bir arka plana sahip olduğunuz bir durumda, rengi değiştirmek isteyebilirsiniz. Farklı bir renk eklemek için, sadece ekleyin waves- (renkli) öğeye. "(Color)" yerine bir rengin adını yazın.
Gönder
7 renk arasından seçim yapabilirsiniz: Işık, kırmızı, sarı, turuncu, mor, yeşil ve yeşil. Bu renkler ihtiyaçlarınızı karşılamıyorsa, kendi renklerinizi her zaman oluşturabilir veya özelleştirebilirsiniz.
4. Gölge
Elementler arasındaki ilişkileri sağlamak için Materyal Tasarımı, yüzeylerde yükseklik kullanılmasını önerir. Materyalize, bu prensibi ile sunar. Z-depth- (sayı) sınıf. Gölge sayısını, (sayıyı) 1'den 5'e değiştirerek belirleyebilirsiniz:
Gölge derinliği 3
Tüm gölge derinlikleri aşağıdaki resimle gösterilmiştir.
5. Düğmeler ve Simgeler
Malzeme Tasarımında üç ana düğme tipi vardır: yükseltilmiş düğme, fab (kayan eylem düğmesi) ve düz düğme.
(1) Yükseltilmiş düğme
Yükseltilmiş düğme varsayılan düğmedir. Bu düğmeyi oluşturmak için btn Elementlerinize sınıf. Tıklatıldığında veya basıldığında dalga efekti vermek istiyorsanız, bununla devam edin:
Buton
Alternatif olarak, düğmeye metnin solunda veya sağında bir simge de verebilirsiniz. Simge için, özel eklemeniz gerekecek simge sınıfı adı ve konumu ile etiketleyin. Örneğin:
İndir
Yukarıdaki kod parçasında mdi-file-file-indir indirme simgesi sınıfı. Hakkında 740 farklı simge kullanabilirsiniz. Onları görmek için Simgeler sekmesinde Sass sayfasına gidin..
(2) Yüzer Düğme
Ekleyerek kayan bir düğme oluşturulabilir btn kayan sınıf ve istediğiniz simge. Örneğin:
Malzeme Tasarımında, düz düğme iletişim kutusunda sıklıkla kullanılır. Oluşturmak için, sadece ekleyin btn düz Elemanınıza göre:
düşüş
Ek olarak, düğmeler ile engelli sınıf ve daha büyük kullanılarak yapılan btn-large sınıf.
6. Izgara
Materyalize standart kullanır 12 sütunlu duyarlı ızgara sistemi. Duyarlılık üç bölüme ayrılmıştır: mobil cihazlar için küçük (ler), orta (m) tablet için ve büyük (l) masaüstü için.
Sütun oluşturmak için, boyutu belirtmek için s, m veya l tuşunu kullanın, ardından ızgara numarasını izleyin. Örneğin, mobil cihaz için yarım boyutlu bir düzen oluşturmak istediğinizde s6 senin düzenine sınıf. s6 kısaltması küçük-6 bu, küçük cihazda 6 sütun anlamına gelir.
Ayrıca şunu da eklemelisiniz: col Oluşturduğunuz mizanpajdaki sınıf kürek çekmek sınıf. Bu, düzenin doğru şekilde sütunlara yerleştirilebilmesi için. İşte bir örnek:
Burada 12 sütun veya tam genişliğe sahibim4 sütun (üçte biri) burada4 sütun (üçte biri) burada4 sütun (üçte biri) burada
İşte sonuçlar:
Varsayılan olarak, col s12 sabit boyuttadır ve temel olarak aynı olan tüm ekran boyutları için optimize edilmiştir. col s12 m12 l12. Ancak, farklı cihazlar için sütunların boyutunu belirlemek istiyorsanız. Yapmanız gereken tek şey, bunun gibi ek boyutları listelemek:
Genişliğimde her zaman her yerde 12 sütun varMobilde 12, tablette 6 ve masaüstünde 9 tane sütunum var
İşte bunun gibi görünüyor:
Bunlar Materialize’in sadece birkaç özelliği. Diğer özellikleri hakkında daha fazla bilgi edinmek için dokümantasyon sayfasına gidin..
