Önceki yazımızda başlamıştık stil sayfalarını kullanarak bir web sitesinin görünümünü tanımlarken yararlı çerçevelerin listesi. Stil sayfaları, bir web sitesinin farklı unsurlarının farklı cihazlarda temsil edilmesi gibi yönleri kontrol etmemize olanak tanır.
Akılda tutulması gereken terimler
esnek kutu: Esnek bir kutu modelidir. tek boyutlu yu tasarımıHizalama yeteneklerini geliştirerek bir arabirimdeki öğeler arasında boşluğu dağıtmaya yardımcı olan bir yöntem.
Tek boyutlu kelimesi, flexbox'ın mizanpajı bir seferde yalnızca bir boyutta - bir satır veya bir sütun olarak ele aldığı gerçeğini vurgulamak için kullanılır.
CSS Izgara Düzeni (CGL): Bu bir Daha iyi kullanıcı arayüzleri oluşturmak için geliştirilmiş iki boyutlu ızgara tabanlı tasarım sistemi.
CGL, bir sayfayı ana alanlara veya bölgelere ayırmanıza olanak tanır ve HTML temel öğelerinden oluşturulan bir denetimin bölümleri arasındaki ilişkiyi boyut, konum ve katmanlar açısından tanımlamayı kolaylaştırır.
Tablolarda olduğu gibi (web tasarımının ilk günlerinde kullanılan yöntem) ızgara düzeni, öğeleri sütunlar ve satırlar halinde hizalamanıza izin verir. Ancak tablolarda olanlardan farklı olarak, CSS ızgarası ile çok daha fazla düzen mümkündür ve daha basit bir şekilde.
Biraz daha CSS çerçevesi
Saf CSS
Saf CSS bir çerçeve Yahoo tarafından 2014 yılında oluşturulan hafif ve duyarlı CSS. Normalize.css ve e kullanılarak oluşturulmuştur.Izgaraları ve menüleri kullanarak duyarlı tasarımlar oluşturmak için kullanışlıdır. Pure, varsayılan olarak duyarlıdır ve Bootstrap'in aksine, sabit düzenler oluşturmanıza izin vermez.
UI Kiti
Önerildi f gibiHızlı ve güçlü web arayüzleri oluşturmak için hafif ve modüler tasarım. Küçük boyutuna rağmen, diğer çerçevelerin hemen hemen tüm özelliklerini sunmayı başarır.
SVG simge seti, birçok bileşeni, duyarlılığı, birleşik stilleri ve özelleştirme seçenekleriyle basit, temiz ve modüler web arayüzleri oluşturabilirsiniz. Ek olarak, basit HTML kullanarak UI kitiyle karmaşık esnek kutu tabanlı mizanpajlar da tasarlayabilirsiniz.
Hardal UI
İdeal yeni başlayanlar için. Bileşenleri modüllere ayrılmıştır; Flexbox temel ızgaraları, düğmeleri, tabloları, formları ve kartları.
CSS'yi somutlaştırın
Bu durumda bir çerçeve paragraf Materyal Tasarım arayüzleri oluşturun Google tarafından geliştirildi
Android için web siteleri veya web uygulamaları tasarlamak isteyen herkes için uygun bir alternatiftir. çünkü kutudan çıkar çıkmaz sınıflar ve bileşenlerle gelir. Başlangıç şablonlarını hızla kullanmaya başlayabilirsiniz.
Materialise CSS, Bootstrap'in 12 sütunlu ızgara biçimini kullanır, böylece hızlı bir şekilde duyarlı sayfa mizanpajları oluşturabilirsiniz.
Arka rüzgar CSS'si
Şimdi konuşuyoruzOldukça özelleştirilebilir bir CSS çerçevesidir. Genel görünümlü bir kullanıcı arayüzü oluşturan Bootstrap'in aksine, Tailwind geliştiricilerin tasarımları özelleştirmesine ve onlara benzersiz bir görünüm vermesine olanak tanır.
Miligram
Bu durumda ayrıca minimalist bir çerçeveye sahibiz.
Sadece 2kb'de (sıkıştırılmış), Miligram sne, eksiksiz bir web geliştirme araçları seti sağlamayı başarır. Kullanıcılar ayrıca CSS3 spesifikasyonu tarafından sunulan tüm özellikleri kullanabilirler.
İskelet
Duyarlı ve minimalist çerçeveler tüm öfke gibi görünüyor. İskelet sadece 400 satır kod içerir.
Her neyse, bize ızgaralar, tipografi, düğmeler, formlar, listeler, tablolar ve kodlar için birçok seçenek sunmayı başarıyor karmaşık web sitelerinin oluşturulması için kullanılabilir.
spektrum
spektrum katkıda bulunabilecek bir çerçevedir zarif tasarlanmış öğeler, güzel tipografi ve önceden oluşturulmuş bileşenlerle daha hızlı ve daha esnek site oluşturma.
CSS pikniği
Bu kütüphane çevrimiçi olarak da kullanılabilen, sıkıştırıldığında 10 kb'ye ulaşmaz. Geliştiricilere ızgaralar, formlar, sekmeler, araç ipuçları ve uyarılar dahil olmak üzere saf CSS ve etkileşimli bileşenler sağlar. Kitaplık, duyarlı bir web sitesi ve güzel web uygulamaları oluşturmanıza yardımcı olur.
baz
iskelet hafif ve minimum kod kullanılarak geliştirilmiştir. Basit tasarımına rağmen çok güçlüdür. Geliştiriciler ve tasarımcılar, web standartlarını ve arama motoru taleplerini karşılayan web siteleri ve web uygulamaları oluşturmak için kullanabilir.