Hangisi Benim İçin Doğru? 22 Duyarlı CSS Çerçevesi ve Isıtıcısı Açıklaması
CSS çerçeveleri yıllardır var, ancak duyarlı tasarım uygulamalarının gelmesi eski favorilerimizin çoğunu işe yaramaz hale getirdi. Neyse ki, gerçekten yetenekli birçok geliştirici, yeni nesil CSS çerçeveleri ve kazan plakaları ile boşluğu doldurmak için atladı.
Etrafta yüzen bir sürü şey zaten var. Herkesin bir listesi vardır, ancak hiç kimse sizi her bir çerçevenin ve ortak plakanın diğerinden nasıl farklı olduğunu göstermez, böylece bilinçli bir karar verebilirsiniz. Bugün hedefimiz bu. Bu 22 duyarlı CSS çerçevesinin ve kazan plakasının her birini neyin benzersiz kıldığına bir göz atarken takip edin.
Gumby
Gumby çerçevesi, yıllar önce dişlerimizi kestiğimiz 960 ızgarayı alır ve duyarlı bir dokunuşla web tasarımının modern çağına getirir. Ayrıca formlar, düğmeler, geçişler, açılır listeler, sekmeler ve daha fazlası için önceden oluşturulmuş stiller vardır.
Anlamsal Izgara Sistemi
Izgara sistemlerinden ve bunların şişirilmiş, semantik olmayan işaretlemesinden nefret ediyorsanız, bu sizin için. Anlamsal Izgara Sistemi, oluk ve sütun genişliği gibi şeyler için özelleştirilebilir değişkenler oluşturmak üzere CSS ön işlemcilerinin (LESS, Sass ve Stylus) gücünü kullanır. Tek yapmanız gereken, CSS'nizde önceden oluşturulmuş birkaç mixin kullanmaktır, ekstra işaretleme gerekmez!
ızgarasız
Gridless, cihazın genişliğine uyum sağlamak için mobil ilk duyarlı web tasarımını kullanan güçlü bir kaynak plakasıdır. Ayrıca CSS normalizasyonu, IE hata düzeltmeleri ve tipografi stilleri gibi harika özelliklerle doludur.
Çerçevesiz
Çerçevesiz sınıflandırılması zordur, çünkü teknik olarak duyarlı tasarıma yaklaşmak için indirebileceğiniz gerçek bir dosya grubundan daha önerilen bir yöntemdir. Üç adım vardır: Birincisi, düzenli bir sabit genişlikli ızgara yapın, daha sonra sonsuz tekrarlayın ve görüntü alanında ortalayarak bitirin.
Site özellikle Çerçevesiz bir çerçeve olmadığını ve hiçbir dosya indirmek olmadığını söylüyor, ancak bu iddiaya rağmen aslında başlamanıza yardımcı olacak bazı temel şablonlar var.
Oransal Izgaralar
Orantılı ızgaralar, duyarlı CSS mizanpajını denerken ortaya çıkan bazı büyük sorunların üstesinden gelir; ızgaraları yerleştirme ve çok farklı görünüm pencerelerinde yüzde tabanlı değerlerle güreşme.
Oransal Izgaralar, sıvı sütunlarıyla karıştırılmış sabit oluklara (ems / rems) izin veren bir çözüm oluşturmak için CSS kutu boyutlandırma kullanır. Sütunlar arasındaki mesafe, temel yazı tipi boyutuna göre her kırılma noktasında eşit kalacaktır. Sütunlar, örneğin yarısı, üçte biri, üçte ikisi oranında orantılı olarak tanımlanır ve iç içe yerleştirildiklerinde bile istediğiniz kadar kolayca yeniden kullanılabilir.
Goldilocks Yaklaşımı
Goldilocks Yaklaşımı, duyarlı tasarımların belirli cihazların desteğine yaslanma eğilimini azaltmayı amaçlamaktadır. Bunun yerine, herhangi bir cihaza bağlı olmayan evrensel bir tasarım için çekim yapar.
Goldilocks Yaklaşımı, tasarımlarınızın çözünürlükten bağımsız olmasını sağlayan üç durumu dikkate almak için ems, maksimum genişlik, medya sorguları ve kalıp çevirilerinin bir kombinasyonunu kullanır.
Twitter Önyükleme
Twitter Bootstrap giriş gerektirmez. Web üzerindeki en büyük, en kötü CSS kazan plakalarından biridir ve tüm dünyadaki geliştiricilerin sayısız profesyonel ve kişisel sitesi için başlangıç noktasıdır.
Twitter Bootstrap, formlar, düğmeler, gezinme menüleri ve daha fazlası gibi tonlarca yıldız tarzına ek olarak duyarlı bir ızgara sistemi içerir. Tam tanıtımımıza buradan göz atın.
ZURB Vakfı
İki proje birbirine benzediğinden Foundation Twitter Bootstrap için en önemli rakip. Bootstrap gibi, Foundation size duyarlı bir ızgara ve çeşitli stilli UI öğeleri sunar.
Foundation 3 kısa bir süre önce piyasaya sürüldü, bu nedenle projeye bir süredir bakmadıysanız, durma ve kontrol etme zamanı. Her yerde bulabileceğiniz en yararlı ve kapsamlı çerçevelerden birini eller aşağı.
iskelet
Skeleton, bir görünüm elde etmek için en erken duyarlı kazan plakalarından biriydi ve hala en iyilerinden biri. Kavram olarak, biraz Vakıf gibi biraz daha hafif hissediyor (tip, düğmeler ve formlar dahil olan tek UI öğeleri).
Bu aracın, duyarlı bir tasarımın dakikalar içinde düz bir şekilde çalışmasını ve çalıştırılmasını ne kadar kolay hale getirdiğini görmek için İskelet eğiticimize göz atın.
Amazium
Amazium yukarıdaki Gumby'ye çok benziyor, çünkü eski 960 ızgara tekniklerinin üzerine inşa edilmiş duyarlı bir ızgara. Son zamanlarda, çerçeve 1.200 piksele kadar uzanacak şekilde güncellenmiş olsa da, büyük ekranlardan yararlanabilirsiniz. Retina ekranlar için destek bile içerir!
Altın Şebeke Sistemi
Golden Grid System kendisini “katlanır ızgara” olarak adlandırıyor; bu, medya sorgularının, orijinal on altı sütun düzenini görünüm penceresi daraldıkça sekiz ve sonra dört sütuna daraltmak için kullanıldığını söylemenin gerçekten süslü bir yoludur.
Şimdiye kadar gördüğümüz diğer bazı ızgaralar gibi, Golden Grid System de ems tabanlı oluklar kullanır, böylece oluklar her zaman içerikle orantılı kalır.
1140px CSS Izgara Sistemi
Bu, fantezi bir şey olmadan oldukça standart bir ızgara sistemidir. Yüzdeye dayalı olukları kullanan ve 1.280 ve 1.140 piksel monitörlerde harika çalışan 12 sütunlu bir sıvı ızgarası ile başlar. Görünüm küçüldükçe, içeriği yeniden akıtmak için birkaç basit medya sorgusu kullanılır.
StackLayout
StackLayout isyancılar içindir, denediğiniz diğer çerçevelerden çok farklı olacaktır. Aslında, tipik CSS mizanpaj çerçevelerinden hoşlanmadığı ortaya çıktı.
Buradaki temel prensip, StackLayout'un benzersiz bir düzen sisteminin temel taşı olarak satır içi bloğu kullanmasıdır. Sistem biraz tuhaf ama yine de oldukça etkileyici. Buraya bir izlenecek yol bakın.
SimpleGrid
SimpleGrid, benim gibi bu şeylerle oynamayı seviyorsanız keyif alacağınız başka bir benzersiz düzen sistemidir. Buradaki ızgara dört farklı ekran aralığına dayanıyor: 720 pikselden daha geniş ekranlar, 720 pikselden daha büyük ekranlar, 985 pikselden daha büyük ekranlar ve 1235 pikselden daha büyük ekranlar.
Sistemi uygulamak için hem dört hem de altı sütun düzeninden “slot” sınıflarını kullanırsınız. Kulağa karmaşık geliyor ama aslında ismine sadık ve uygulanması oldukça basit.
Akışkan Taban Çizgisi Izgarası
Akışkan Taban Çizgisi Izgarası, bir taban çizgisi ızgarasına yapışan güçlü tipografiye büyük önem verilerek oluşturulmuştur. Ayrıca, izlenecek bir standart değil, yardımcı bir başlangıç noktası olması amaçlanan üç sütunlu katlanır bir ızgara içerir.
Columnal
Columnal, diğer çeşitli çerçevelerden en iyi unsurları ödünç alan bir tür hibrit ızgara sistemidir. 1140px CSS Izgara Sisteminin elastik DNA'sına da sahip. Oldukça standart şeyler ama diğerleri iyi bir uyum gibi görünmüyorsa, deneyebilirsiniz.
Inuit.css
Inuit.css, aslında genişletilebilirlik göz önünde bulundurularak oluşturulmuş harika bir çerçevedir. Kendi duyarlı ızgarayı oluşturmak için özel ızgara oluşturucuyu kullanın, ardından çerçeveyi faydalı şekillerde genişletmek için bazı igloos (eklentiler) indirin.
320 ve Üstü
320 ve Yukarı web tasarımı vızıltı kelimeler (iyi bir şekilde) bir koleksiyon gibidir. Bootstrap görsel stilleri, Font Awesome simgeleri, Modernizr, Selectivizr, LESS ve Sass ile birlikte “önce mobil” anlayışını kullanan duyarlı bir düzen sistemi içerir. Bu hoşunuza gideceğini düşündüğüm etkileyici küçük bir araç.
Susy: Pusula için duyarlı ızgaralar
Bu, benim gibi süper düzenleyiciler için, Sass ve Compass'ın yanı sıra düzen sistemlerini de seviyor. Mix ve değişkenlerin büyüsü ile mizanpajlarınızı birkaç dakika içinde oluşturun.
Compass'ın son zamanlarda şebekeler için yerel desteği tamamen bıraktığı göz önüne alındığında, Susy onları özleyenlere kullanışlı gelmelidir.
Initializr - Duyarlı HTML5 Şablonu
Initializr, HTML5 Boilerplate, Bootstrap veya yeni duyarlı bir boilerplate kullanarak HTML5 projelerinizi hızlı ve kolay bir şekilde başlatmanıza yardımcı olan bir araçtır.
Duyarlı şablonu seçmek yalnızca bir başlangıçtır, buradan Modernizr ve LESS gibi tipik olarak isteyebileceğiniz tüm kaynaklar arasından seçiminizi indirerek özelleştirebilirsiniz.
Yine Başka Bir Mobil Yay
YAMB, duyarlı web projeleriniz için birkaç temel özellik üzerine kurulu mükemmel bir başlangıç noktasıdır: duyarlı bir akışkan ızgarası, küçük ekranlarda otomatik olarak seçili kutulara dönüşen açılır gezinme menüleri ve duyarlı görüntüler / slayt gösterileri.
Web sitesi oldukça çirkin ama araç setinin kendisi oldukça kullanışlı olduğunu düşünüyorum!
Wirefy
Wirefy özellikle hızlı yanıt veren tel kafes deneyleri göz önünde bulundurularak oluşturulmuştur. Bazı Bootstrap benzeri UI öğeleriyle (menüler, formlar, slayt gösterileri, düğmeler, görüntüler vb.) Birlikte on altı sütun 960 ızgarasının değiştirilmiş bir sürümünü kullanır.
Hangisi senin favorin?
Kaçınılmaz olarak, bu tür mesajlar web tasarımı için herhangi bir şablon veya ızgara sistemi kullanma fikrini tüm kredilendirme girişiminde bulunmaya ihtiyaç duyan yorumcular çekecektir. Onlar sadece herkes için değil ve onlara dayanamazsan senin fikrine saygı duyuyorum.
Izgara sistemlerine giriyorsanız, yukarıdaki seçenekler hakkında görüşlerinizi duymak isterim. Hangilerini denediniz ve onlar hakkında ne düşündünüz? Hangisi senin favorin?
