Hepimiz bir yerlerde başlarız. Yeni bir tasarımcı olarak, tasarımlarımda yapıya daha az bakamazdım. Photoshop'u açıp, havalı görünce düşündüğüm bir şey yapana kadar etrafa pikselleri ittirirdim. Kodlamayı öğrendiğim gibi, süreçim de aynı şekilde gelişiyordu.
Eski günlere çok fazla sevgiyle bakmıyorum. Çalışmam özensiz ve odaklanmamıştı. Net hedeflerim yoktu. Bir başlangıç olarak, tasarım eğitimimin çoğunun Photoshop öğretici sitelerden geldiğini düşünürsek, o kadar da kötü değil, işim korkunç değildi.
Ama sonra ızgara sistemlerini öğrendim. Web tasarımında popüler olarak ne zaman ve nasıl kullanıldığını tam olarak unuttum, ancak aniden, web tasarımla ilgili her siteye girdiğimde, 960.gs ya da başka bir grid sistemi ile ilgili makaleler çıktı. Düzenlerimizde tutarlı bir görsel yapı sağlamanın önemi tüm büyük isimler tarafından vurgulanmış ve bir eğilime dönüşmüştür.
Tıpkı hızlı bir şekilde trend bir endüstri standardı haline geldi ve şimdi çoğumuz bir grid sistemi uygulayıp uygulamayacağımızı iki kez düşünmüyoruz. Tek soru, hangisi? Büyük isimlerden biri veya daha az bilinen bir varyantla mı gideceğiz, hatta kendi başımıza mı yapacağız?
Bu makalede ikinci seçeneğe bir göz atmak istiyorum: yeni ve daha az bilinen ızgara sistemleri. Orada her zaman düzeni çeşitli sorunları çözmek için yeni yollar ile gelen biri var ve ben mümkün olduğunca çok sayıda yaklaşımlar aşina olmak önemlidir, bu yüzden bazı temel ızgara çerçeveleri bakalım.
34Grid eşit sütun dağılımı ile ilgili. Eşit olmayan dağılımları da kabul edebilir, ancak bu şebeke sisteminin temel amacı bu değildir. Sayfalarınızın çoğunu veya tamamını yatay olarak eşit parçalara bölmek isteyenler için bu sizin çerçevenizdir.
Nasıl çalışır
Çerçeve, ihtiyaçlarınıza göre uyarlanabilecek şekilde tasarlanmıştır, böylece sadece indirip gitmezsiniz. Öncelikle projenin ana sayfasında kılavuzunuzu yapılandırmanız gerekir. Hızlı bir form, bir satırda kaç sütunun sığacağını, kenar boşluklarınızın ne kadar büyük olacağını ve görünümünüzün boyutu değiştiğinde sütunlarınıza CSS3 geçişleri uygulanıp uygulanmayacağını belirlemenize olanak tanır.
Kodun kendisi iki CSS dosyasına bölünmüştür: biri temel kodla, diğeri ise ortam sorgularıyla. CSS sınıfları basittir. Bir sütuna '.col_1' uygulanarak satır% 100'e kadar doldurulur. '.col_2',% 50 genişliğe sahip bir sütun oluşturur.
Ayrıca img öğeleri, nesneler ve bazı diğerleri otomatik olarak yeniden boyutlandırılır. Video nesnelere yardımcı olmak için ekstra bir sınıf var. Projenin web sitesi Facebook ve Twitter'ın güzel oynamak için nasıl katılacağı konusunda tavsiyelerde bulunuyor.
Dezavantajları
Sütunları yerleştirmek veya tek bir satırda daha karmaşık sütun düzenlemeleri oluşturmak için herhangi bir yol görünmüyor. Öte yandan, karmaşıklığa ihtiyacınız yoksa ve sadece ihtiyacınız olduğunda ayarlamak için basit bir çerçeve istiyorsanız, 34Grid işi yapacak.
Basit ızgara 1140 piksel genişliğinde maksimuma çıkan duyarlı bir seçenektir. Diğer bir deyişle, tabletler ve telefonlar ile güzel oynamak için tasarlanırken, Simple Grid daha büyük ekranların dışarıda kalmamasını sağlar.
Nasıl çalışır
Adından da anlaşılacağı gibi, bu ızgara sistemi oldukça hafif. Her şey dört kilobayt sıkıştırılmamış CSS dosyasında gelir.
Sınıf isimleri kolayca anlaşılacak şekilde tasarlanmıştır: '.col-2-6' satırı altı sütunlara böler ve sütun genişliğini iki sütun genişliğinde tanımlar. Her sıra, on ikiye kadar bir sütun, '.col-1-1' veya iki, üç, dört, vb. Olarak ikiye ayrılabilir.
Dezavantajları
34Grid gibi, yuvalama sütunları için yapılmış herhangi bir hüküm yok gibi görünüyor. Ayrıca, kenar boşluklarının ilk ve son sütunlar için işleme biçimi, örneğin bir fotoğraf galerisi oluştururken zorluklara neden olabilir.
Bu Düz İngilizce sınıf isimleri ile basit bir ızgara tercih eden herkes içindir. Duyarlı, kolay anlaşılır ve hızlı bir şekilde uygulanır.
Nasıl çalışır
Her zamanki '.container' ve '.grid' öğeleriniz yerleştirildikten sonra, sütunlar eski moda şekilde uygulanır. Bir sütunun genel özelliklerini tanımlamak için bir sınıf ('.unit') kullanılır ve genişliği tanımlamak için başka bir sınıf kullanılır. Satırlar 2-5 sütunlara ayrılabilir ve sınıf isimlerinin hepsi şu gibi bir şeye benzeyebilir: '.one of three, .two-of-three'.
Ayrıca bazı temel yazım tarzları da dahildir.
Dezavantajları
Bir kez daha, bu karmaşık olmayan düzenler için tasarlanmış bir ızgara çerçevesidir, yani iç içe geçmiş sütunlar için bir hüküm yoktur. Ayrıca, 650 piksellik bir görünüm genişliğinde ayarlanmış tek bir kırılma noktası vardır, bu nedenle bazı sütunlarınız zamanından önce oldukça geniş olabilir.
Matt (AKA Nimet ) biraz benim gibi. Tasarımı seviyor, ama matematiği de pek sevmiyor. Sonuç olarak, onun Oransal Izgaralar bağlı olarak mümkün olduğunca çok sayıda hesaplamalar yapmak mümkün görünüyor box-sizing özelliği. Sonuç, uyumlu düzen için tabanlarınızı örten eksiksiz, ancak oldukça hafif, ızgara sistemidir.
Nasıl çalışır
Bu sisteme bağlı olduğunu söylediğimde box-sizing Yani, bu sütunlara olukları muhasebeleştirmeden yüzde genişlikleri verilir. Sabit genişlikte oluklar padding ; ve box-sizing sütunların birlikte güzelce oynamasını sağlar.
Oluk genişlikleri ve diğer ölçümler “ems” ile tanımlanır. Bu kılavuzun ismine bağlı olarak, sütun sınıfları orantılıdır (örn. .col-one-third , .col-two-thirds ) ve sütunlar, çok fazla hoşlandığım bir şey olan, az ya da çok sonsuz nesneldir.
Üç farklı kırılma noktasında sütun boyutlarını değiştirmek için sınıflar dahildir. Medya sorguları, standart uygulamalara uygun olarak, “mobil-ilk” tarzda yapılandırılmıştır.
Internet Explorer 8 ve üstü için ayrı bir stil sayfası var. IE8 olarak görmek medya sorgularını desteklemez ve desteklemeden daha eski sürümler box-sizing sabit genişlikte bir düzen ile sağlanır.
Ayrıca, şebeke sisteminin hızlı ve kolay kişiselleştirilmesi için SASS (hem .sass hem de .scss) dosyaları da bulunmaktadır.
Dezavantajları
Çalışmak için daha fazla sütun genişliği olması umrumda değil (beşinci, altıncı, sekizinci). Aksi halde, bu büyük ölçüde hatasız ve çok yönlü bir ızgara sistemidir.
Bu listedeki gelişmiş ızgara sistemlerinden Bir% en basit olanıdır, ancak hiçbir şekilde eksik değildir. Ana sayfa herhangi bir gösterge ise, daha büyük ekranlar ve büyük UI öğeleri barındırmak için tasarlanmıştır.
Ad, ızgara ve sütun genişliğinin,% 100 yerine her zaman% 99'a eşit olacak şekilde hesaplandığından gelir. Bu, tarayıcıların sık sık yapmak zorunda kaldığı daha karmaşık tekrar eden ondalık sayılar ve sayı yuvarlama ihtiyacını ortadan kaldırır.
Nasıl çalışır
Kılavuzun kendisi klasik oniki sütunlara ayrılmıştır. Sınıflar basit ( .onerow , .col1 , .col6 ), ve ben, çoğunlukla, sadece, her sütun için bir sınıf kullanmanı istiyorum.
Varsayılan olarak iki kesme noktası dahil edilir: 768 piksel ve 1024 piksel. Eğer dürüst olursam, ilk önce biraz… büyük görünüyor… ama eğer ihtiyacınız varsa her zaman başka bir kırılma noktası ekleyebilirsiniz. İki masaüstü mizanpajı örneği de sağlanmıştır: 1000 piksel ve 1200 piksel.
Projeler ana sayfasında, düzenlerinizin bu ızgara sistemi ile alay edilmesi için uygun Photoshop eylem dosyalarını ve PSD'leri indirebilirsiniz.
Dezavantajları
Benim iki büyük problemim normal olanlardır. İlk: yuvalama sütunları yok. Yuvalama sütunları iyi insanlar! İkincisi: Her satırdaki son sütunun .last sınıf uygulandı.
Kenar boşluklarında pikselleri gizlemeyen çapraz tarayıcı CSS ızgara çerçevesi! Bu sloganı Flurid, ve belgelere hızlı bir bakış size şunu söyleyecektir: Flurid'in yaratıcısı, düzeninizin bozulmasını istemiyor. Hiç.
İşte, alt piksel yuvarlama çalışmalarından dolayı, bir tarayıcı zaman zaman “vidalamak” ve satırdaki son sütunu gitmemesi gereken bir yere koyacaktır. Flurid kararlılık için oluşturulmuştur, böylece düzeniniz her zaman çalışır, hatta IE'nin eski sürümlerinde de çalışır. (Uyumluluk IE5 + olarak listelenmiştir.)
Nasıl çalışır
Flurid, ihtiyacınız olan tüm özelliklere sahiptir: normal sütunlar, karışık sütunlar, iç içe geçmiş sütunlar ve kaydırılmış sütunlar. Olası sütun genişliklerinin ve sınıflarının listesi geniş ve orana dayalıdır, bu yüzden onlara aşina olmak için zaman ayırmak isteyeceksiniz.
Bazı makul tüm belgeler, GitHub ve ekstra özellikler ekleyen bir jQuery eklentisi aracılığıyla sağlanır. Evet, eşit yükseklik sütunları sağlayan kendi jQuery eklentisiyle birlikte gelir ve stil zevkiniz için sütunlarınıza alternatif sınıflar koyabilir.
Dezavantajları
Bu sinir bozucu .last tekrar sınıf. Yine de, belgelere göre, bu kez bunun için iyi bir neden var.