En İyi 21 HTML5/CSS3 Izgara Sistemleri ve Çerçeveleri

Sadece birkaç yıl önce geleneksel tasarım yöntemleri, tek başına bir ana sayfa tasarlamanız, tel çerçeveleri ve içerik kutularını bir araya getirmeniz ve ardından en iyisini ummanız gerektiği anlamına geliyordu, ancak yavaş yavaş bu teknik ortadan kalktı ve yeni, daha modern, hızlı web sitesi geliştirme yöntemleri ortaya çıkan. En önemlisi, CSS3, içerik düzenleri oluşturmak için kullanabileceğiniz kullanımı kolay bir ızgara işlevi olan Flex-box'ı tanıttı, ancak yine de bazıları dirençli, diğerleri ise mutlak tasarım hassasiyeti için daha karmaşık yaklaşımlar benimsiyor.

Yeni bir web sitesi açtığınızda, tipik olarak göreceğiniz şey sitenin başlık kısmı, içerik alanı ve bir kenar çubuğudur - bu ana alanlar ayrıca kendi tasarım düzenlerini ve özelliklerini içerir ve tavşan deliği derinleşmeye devam eder. Tüm ortamlarda, cihazlarda ve yazılımlarda iyi görünecek bir ana sayfa (veya başka bir sayfa) düzeni tasarlamanın bir yolunu bulmak çok önemlidir. Bu nedenle, ızgara düzenleri geliştirmek için bir CSS ve HTML çerçeveleri ve sistemleri koleksiyonunu bir araya getirmenin diğer geliştiricilerimiz için yararlı olabileceğini düşündük.

Daha fazla çerçeve mi istiyorsunuz? Diğer özetlerimizi deneyin:

• JavaScript Çerçeveleri
• HTML5 Çerçeveleri
• CSS3 Çerçeveleri
• Node.js Çerçeveleri

Bu tasarımların her duruma uyarlanabildiğini söylemeye gerek yok, bu nedenle tasarım düzeninin kendi içindeki tuhaflıkları ve tuhaflıkları çözmek zorunda kalmanın ve bunun yerine bu ızgara kutularını istediğiniz içerikle doldurmaya odaklanmanın baş ağrısından kurtulabilirsiniz. oraya koymak. Bu ızgara sistemlerinde çok çeşitli ve farklı stiller bulacaksınız, demo sayfalarını ziyaret etmek için biraz zaman ayırın ve belki de aradığınızı yazın, böylece eşleşen çerçeveyi bulmak için daha kolay zamanınız olur. ihtiyaçlarınız için.

Ölü Basit Izgara

Izgaralar asla karmaşık olmamalıdır, gerçek özlerinde yalnızca genel bir tasarımı bir araya getiren HTML öğeleridir ve Vladimir Agafonkin bu konsepti benimseyen geliştiricilerden biridir. Onun grid çerçevesi Dead Simple Grid sadece iki yüz baytlık CSS koduyla geliyor; bu çok küçük bir kod miktarıdır, sayfalarınız orada olduğunu bile fark etmez.. Izgarayı ana içerik alanı ve dilerseniz esnek bir kenar çubuğu olacak şekilde ayırabilirsiniz. Bu tür bir ızgara, minimal tasarımın tercih edildiği bloglara ve genel ana sayfa düzenlerine uyacaktır. Duyarlı tasarım, medya sorguları sayesinde entegre edilmiştir, bu nedenle ızgara, kullanıldığı herhangi bir cihazda kusursuz görünecektir.

saf burbon

Bourbon, SASS ön işlemcisi için çok başarılı bir karışım kütüphanesidir. Bu, elbette, Neat'i zaten Bourbon ve SASS kullananlar için çekici bir seçim haline getirdi. Neat, geliştiricilere, dakikalar içinde kurulumu yeterince hızlı ve kolay, ancak sınırsız değişiklik ve ayarlamaların sorun olmayacağı bir noktaya kadar esnek olan bir akışkan ızgara sistemine erişim sağlar.

grd

Grd, esnek ve modern duyarlı düzenler oluşturmak için arka uç aracı olarak Flexbox'ı kullanan bir CSS ızgara sistemidir. Canlı Demoyu kullanarak, Grd'nin belirli bir tasarım öğesini mevcut iş akışınıza entegre etme sorununuzu çözüp çözemeyeceğini görmek için ayarlar ve farklı tasarım özelleştirmeleriyle oynayabilirsiniz. Bir dizi ayardan başka bir şey kullanmadan üstbilgi, altbilgi ve genel içerik alanları oluşturmayı kolay bulduk.

YAPI

Yine Flexbox'ı temel alan yapı, bölümleri ve düzen parametrelerini tanımlamak için bildirimsel sözdizimi kalıplarını (Angular.js'dekilere benzer) kullanır. Bazı geliştiriciler, sayfanın son işaretlemesinin doğrulanamadığından şikayet ettiler, ancak fikir, Yapı'yı kullanarak, sınıflar ve tanımlama adları gibi geleneksel CSS nitelikleriyle uğraşmayan bildirimsel bir ızgara oluşturabilmenizdir.

960 Izgara Sistemi

Yüz binlerce web sitesi, tasarım düzenini güçlendirmek için Nathan Smith'in 960 Izgara Sistemini kullandı. Çalışkan web geliştiricilerinin iş akışını kolaylaştırmak için etkili bir araçtır. Geliştiriciler, iki farklı sütun düzeni (sırasıyla 12 ve 16) seçeneğiyle, her türlü dinamik ve statik girişi destekleyecek bir ana sayfayı hızlı bir şekilde önyükleyebilir. Daha fazla sütun eklemek mümkündür, ancak kullanımı daha net anlamak için belgelerle çalışmanız gerekir.

anlamsız

Anlamsız, tam uyumlu tasarım yetenekleri sağlayan 960 ızgarasının takip eden versiyonudur. Benzersiz çekme sınıfları aracılığıyla geliştiriciler, ürettikleri sayfanın düzenini yeniden düzenleyebilir; bu, herhangi bir zamanda en önemli içeriği tanıtmaya ve sergilemeye yardımcı olabilir; bu, arama motorlarının her içerik öğesinin amacını daha iyi anlamasına yardımcı olmak için bilinen bir stratejidir. Unsemantic ayrıca Medya Sorgularının gururlu bir kullanıcısıdır, bu nedenle yerleşik ön uç geliştiricilerin bu ızgara çerçevesini kendi ihtiyaçları için özelleştirmek için zor bir zamanı olmaz.

Basit Izgara

Bu nedenle Basit Izgara adı, sadelik ve kullanım kolaylığı arayan herkes içindir. Düzen, duyarlı, akıllı telefonlar, tabletler ve masaüstü bilgisayarlar ile uyumludur. Başka bir deyişle, projenizin performansı hiç şüphesiz birinci sınıf olacaktır. Büyük ekranlar ve daha yüksek çözünürlüklerle de tamamen uyumludur. Ayrıca Simple Grid, herhangi bir ek varlık içermeyen yalnızca bir ızgaradır ve bu da onu çok hafif kılar. Kullanışlı on iki sütunlu yapı ile tam olarak beğeninize göre düzeni oluşturma özgürlüğüne sahipsiniz. Kusursuz bir şekilde iki, üç, dört veya altı sütuna bölebilirsiniz.

csswizardry-ızgaralar

Csswizardry-grids gibi bir HTML ızgarası ile zamandan ve enerjiden tasarruf edebilirsiniz. Tam olarak kalbinizin içeriği için kullanabileceğiniz sağlam bir araçtır. Çok kullanıcı dostudur ve kolay yapılandırılır, her seviyedeki web geliştiricisinin bundan en iyi şekilde yararlanmasını sağlar. Yukarıdaki ekran görüntüsünde, csswizardry-grids'in desteklediği tüm farklı varyasyonlara göz atabilirsiniz. Bir şeyleri özgürce yeniden düzenleyebilirsiniz, böylece arzularınızı bir tişörtle eşleştirir. Şimdi csswizardry-grids ile işleri sıfırdan yapmaktan kaçınarak aktivitenizi yapın ve sağ ayakla başlayın.

Derin Izgara

Kaynak Izgarasının size sunduğu özgürlük çok daha öteye gidiyor. Bu esnek ve genişletilebilir ızgara sistemini hem sabit hem de akışkan yerleşimler için kullanabilirsiniz. Sonuç, tüm modern cihazlarda sorunsuz bir şekilde kutudan çıkarılacaktır. Sütunları beğeninize göre değiştirerek, kaldırarak veya ekleyerek tam istediğiniz yapıyı oluşturabilirsiniz. Kaynak Izgara ile nelerin mümkün olduğunu görmek için önce birkaç örneği kontrol edebilirsiniz. Ayrıca, sütunları hesaplarken negatif kenar boşlukları ile Profound Grid, ekran boyutu ve web tarayıcısından bağımsız olarak akışkan düzenlerinin aynı görünmesini garanti eder.

kalbur

Bir şebeke sistemi kullanmanın faydaları muazzamdır, çünkü sadece zamandan tasarruf etmekle kalmaz, aynı zamanda teknikler hakkında endişelenmenize de gerek kalmaz. Örneğin, Griddle, popüler cihazlar ve web tarayıcıları ile tam uyumluluk sağlar. Yani uygulamanızın performansı her zaman birinci sınıf olacaktır. Griddle ile orantılı ve iç içe ızgaralardan ortalanmış ve hibrit birimlere kadar her şeyi gerçekleştirebilirsiniz. İkincisine gelince, bazı özelleştirmelerle sabit ve akışkan birimleri tek bir etkileyici yapıda birleştirebilirsiniz. Ünitelerin yatay merkezlenmesi üzerinde kontrole sahipsiniz ve hatta dikey hizalamayı değiştirebilirsiniz.

CSS Akıllı Şebeke

CSS Smart Grid, farklı cihazlarla uyumluluğu sağlamak için en son trendleri ve düzenlemeleri takip eder. Kısacası, araç hafif, duyarlı ve ilk olarak onunla epik şeyler inşa etmeniz için mobildir. İster bir akıllı telefon ister büyük bir masaüstü ekranı kullanın, CSS Smart Grid, düzenin her ikisinde de sorunsuz çalışmasını sağlar. Bilgin olsun, birisi internette gezinmek için özellikli bir telefon kullansa bile, CSS Akıllı Şebekeye dayalı projeniz tek sütun görünümüyle aynı şekilde çalışacaktır. Resmi web sitesinde ayrıca hızlı bir şekilde nasıl yapacağınıza da sahipsiniz, böylece aracı kullanırken herhangi bir sorunla karşılaşmazsınız.

ızgara

Gridlex, mükemmel tasarımı ve kullanım kolaylığı nedeniyle öne çıkıyor. Bu Flexbox tabanlı ızgara çerçevesinin sadeliği şaşırtıcı, vizyon basittir - sütunlarınızı ızgaranızın içine sarın ve gerekirse nihai tasarımınızın karşı konulmaz görünmesini sağlamak için herhangi bir ek ayarlama yapın. Sadece Gridlex kullanan web sitelerinin demolarına bakarak, bunun en üst düzey ızgara sistemi olduğu ve kendi projeleriniz ve iş akışınız için yapabileceklerinden dolayı hayal kırıklığına uğramayacaksınız.

Duyarlı Izgara Sistemi

Duyarlı Grid Sisteminin yapacak çok şeyi var, mükemmel alan adı, net bir vizyon ve duyarlı ızgara tasarımını bir esinti yapmak için gerekli araçlar! Grid Generator, kullanmak istediğiniz sütun sayısını ve aralarında görmek istediğiniz marjı belirleyebileceğiniz basit bir form girişi sağlar. bir sonraki duyarlı ızgara düzeniniz. Yazar Graham, tüm zor işleri sizin için yapmaktan mutluluk duyar, dilerseniz sayfanın alt kısmından kendisi ile iletişime geçebilirsiniz.

ızgara

Geliştiriciler, Gridly'yi günümüzün en modern tarayıcılarını desteklemek için minimal bir ızgara düzeni sistemi olarak kurdular. Hafif yapısı, geliştiricilerin çok fazla güçlük çekmeden bir ızgara/sütun düzenini kurmak ve çalıştırmak için kolay bir zaman geçirmelerine yardımcı olur. Genel olarak, bu kitaplığın saçma sapan minimal boyutu, gelecek projeler için daha fazlasını istemenize neden olacak.

formtaşı

Formstone tek başına yönetilen bir ızgara sistemi değildir, aslında son derece özelleştirilebilir bileşenlere ve günlük olarak karşılaştığınız geleneksel bir web sayfasını oluşturan web öğelerine ihtiyaç duyan ön uç geliştiriciler için bir kitaplıktır. Modüler, duyarlı ve otomatik bir kitaplık olan Formstone, yalnızca büyük bir web sitesi projesini ölçeklendirmek amacıyla değil, aynı zamanda ızgara düzeninin kendisinin kullanımı için de kullanılabilir.

Önyükleme

Bootstrap, diğer her şeyin üzerine kurulduğu ızgara sistemi olmasaydı bugün nerede olurdu? Bootstrap 4'ün gelmesini hala sabırsızlıkla bekliyoruz, ancak bu arada.. kendisini bu yüzyılın en önde gelen ön uç çerçevelerinden biri olarak kurmayı başaran bir çerçeveye evet demekten kendinizi alamazsınız. Milyonlarca web sitesi Bootstrap'ın özellikleri tarafından desteklenmektedir, ancak Bootstrap'ın çekirdeğine entegre edilen ızgara çerçevesi olmasaydı bunların hiçbiri mümkün olmazdı.

temel

Foundation, duyarlı tasarımı destekleyen başka bir başarılı ön uç kitaplığıdır, en son sürüm (Foundation 6), geliştiricilerin müşterilerine inanılmaz derecede çok yönlü tasarımlar sunmalarına yardımcı olabilecek daha da modern özellikleri ve öğeleri masaya yatırır. Foundation tarafından sağlanan kullanımı kolay şablonlar, size tüm bu ızgara geliştirmelerinden biraz dinlenme ve bunun yerine neyin önemli olduğuna, yani bu ızgaranın içine koyacağınız şeylere odaklanma şansı verir.

iskelet

İskelet, sizi daha fazlasını istemekten vazgeçirecek güzel ve doğal bir tasarıma sahiptir. Yaratıcılar, Skeleton'ın küçük projeler için en iyi seçim olduğu fikrini oluşturdu. Ayrıca, tam teşekküllü bir çerçeve kullanmanın uygun olmayacağını düşündüğünüz projelerde kullanabilirsiniz. Skeleton, bir web sitesi prototipini hazır ve çalışır hale getirmek için ihtiyaç duyacağınız temel bilgileri size sağlar; ızgara düzeni, başlıklar ve bölümler için tipografi seçenekleri, tüm form ihtiyaçlarınız için düğme öğeleri ve aslında kendinizinkini kodlamak için zamandan tasarruf edebilmeniz için özel formlar, güzel bir liste, tablo ve kod sözdizimi eki ve bir ortam çerçeveyi sorgular, böylece tasarımlarınız tamamen duyarlı hale gelir!

Duyarlı Izgara Sistemi 2

Duyarlı Izgara Sistemi (sürüm 2), boyut olarak çok küçük, ancak stil açısından oldukça etkili olan, mobil öncelikli bir ızgara sistemidir. Bir dizi sütun düzeni (24, 16, 12) arasından seçim yapabilirsiniz. Ayrıca sütunlar arasındaki kenar boşluklarını ve dolguları özelleştirebilir ve mükemmel bir tasarım düzeni oluşturmak için çoklu dolguları kullanabilirsiniz.

Bir Sonraki Projeniz için Duyarlı Izgara Sistemi

Bir Sonraki Projeniz için Duyarlı Izgara Sistemi, 960 ızgara sistemi ile aynı sınıfları kullanır. Önce mobil ziyaretçilere hizmet etmek için oluşturulmuştur ve başlık yönetimi için bir standart sağlar. Geliştiriciler, tüm modern tarayıcıları test edecek, böylece emin ellerdesiniz. Bunu, duyarlı web tasarımı oluşturmanıza yardımcı olacak bir temel ızgara sistemi olarak kullanabilirsiniz. Bu, popüler ızgara sistemi üzerinde mevcut yeterliliğinizi koruyacaktır.

HTML5 Genel Bilgi

HTML5 Boilerplate, ön uç geliştiriciler için sağlam bir standart çerçeve çerçevesidir (şablon). Bootstrap veya Foundation gibi daha büyük çerçevelerle uğraşmadan projelerini başlatmak isteyen geliştiriciler içindir.