960 Izgara Sistemi, 960 piksellik genişliğe dayalı olarak yaygın olarak kullanılan boyutlar sağlayarak web geliştirme iş akışını düzene sokmanın bir yolu olarak Nathan Smith tarafından oluşturuldu.

960.gs (veya herhangi bir CSS çerçevesi) öncelikle hızlı prototipleme, tekrarlı ve sıkıcı görevleri azaltma için geliştirilmiştir, ancak herhangi bir web tasarım projesi için kullanılmak üzere daha uygundur.

Tasarımınızı üzerine inşa etmeniz ve şekillendirmeniz için sitenize yapılandırılmış ve sağlam bir temel sağlayacaktır.

Bu yazıda, 960.gs, spin offs, 960.gs ve temel alternatif WP temaları kullanılarak tasarlanmış sitelerden oluşan bir vitrin, 960 ızgarasını sevmemeniz için olası alternatif çerçeveler bulacaksınız. sistemi.

İndirme paketinin içinde, yazdırılabilir eskiz sayfaları, tasarım düzenleri ve aynı ölçümlere sahip bir CSS dosyası vardır.

İki şablonunuz var: 60 piksel boyutunda bir 12 sütun ızgarası ve 40 piksele bölünmüş 16 sütun ızgarası. Her sütun, sütunlar arasında 20 piksel genişliğinde oluklar oluşturan sol ve sağda 10 piksel kenar boşluğuna sahiptir.

Ana Sayfa 960.gs Ana Sayfası .

İndir: 960.gs dosyasını indir .

Demo: 960.gs Tanıtım Sayfasını Görüntüle .

960.gs Eğiticiler

960 CSS Framework - Temelleri Öğrenin
Bu, başlamanıza, Stefan Vervoort'un divitodesign'dan yazdığı harika bir temel öğreticidir. Çerçeveyi yükleme ile ilgili temel bilgileri alırsınız, böylece 960.gs hızla geliştirmeye başlayabilirsiniz.

960.gs ile çalışmak
960.gs'yi kurmanın temellerini, özellikle de CSS'ye meydan okumak için kullanabileceğiniz bir diğer öğretici.

960 CSS Çerçevesine Bir Ayrıntılı Bakış
960.gs ile biraz zaman geçirme fırsatını yakaladıktan sonra, web projelerinizi geliştirirken potansiyel olarak ne kadar zaman tasarruf edebileceğinizi görünce çok şaşıracaksınız.


Izgara 960 CSS Çerçevesiyle Prototipleme
Bu makale, tüm prototip sürecini kapsamakta, Grid 960'ın temellerini açıklamakta, bir tasarımın ızgarasını planlamakta ve prototipi kodlamaktadır. Bu kadar çabuk.


WP_Query ve 960 CSS Framework ile Bir Gazete Teması Oluşturun
Bu eğitici, WP_Query'nin ana sütununuzdaki tüm ana blog yazılarına sahip olan 3 sütunlu bir gazete teması oluşturmak için nasıl kullanılacağını ve seçili bir kategoriden gelen yayınların bir tarafını nasıl kullanacağınızı öğretecektir. 960 CSS çerçevesini, mizanpajın teması ve geri kalanı için kullanarak, bunun verimliliğinizi büyük ölçüde nasıl hızlandıracağını gösterdiniz.


960 Izgarada Taze Bir Blog Teması Tasarlayın
Bu eğitici, 960 çerçevesinde kullanılmak üzere tasarlanmış bir blog temasını Photoshop'ta hazırlamanızı öğretir. Bu eğitim, web tasarım teorisi için Photoshop tekniğinden daha fazla tasarlandı, ancak tasarım teorisi ve uygulaması üzerine oldukça fazla zaman harcıyor.

960 Spin Offs

Tipogridphy - Tipografik ve Izgara Düzeni CSS Çerçevesi

Tipogridphy, web tasarımcılarının ve ön uç geliştiricilerin yazım kurallarını kolayca yazabilmelerini sağlayan bir CSS çerçevesidir. Çok yönlü ve çekici olan grid düzenleri oluşturmanıza izin verir, sıkı xHTML ve CSS'yi doğrular. Ayrıca, 'dikey ritim oluşturma' olarak bilinen bir yazım yöntemini kullanır, bu sayede tüm bitişik satırlar, satır sonları ve yeni paragraflar dikkate alınmaksızın yatay olarak sıralanır.
Demo: Typogridphy Demosu


Overture - Akışkan 960 Izgara Sistemi 1.0

Stephen Bau tarafından geliştirildi Design7 , yaygın olarak kullanılan HTML öğelerinin bir kütüphanesi oluşturdu, bunları CSS ile tipografi ve düzen için birleştirdi ve popüler JavaScript kitaplıklarından (temel olarak MooTools) bazı temel efektleri ekledi. İndirmeden sonra üç şablon arasından seçim yapabilirsiniz: 960 px sabit genişlik , 12 sütunlu sıvı genişliği veya 16 sütunlu sıvı genişliği . Bu şablonlar harika, buna inandığınız ayrıntıları görmelisiniz.
Demo: Overture Demo .

Vitrin

Aşağıdaki tüm güzel siteler 960 ızgara sistemi kullanılarak oluşturulmuştur:

WordPress Temaları

Gerçek 960.gs gibi, bu WP temaları neredeyse hiç kullanılmamış ve çok basit bir işlevsellik ile, ancak 960.gs kullanılarak inşa edildi. Herhangi bir WP geliştiricisi için çok kullanışlıdır.


5 Yıl WordPress Teması
960.gs kullanılarak oluşturulan temel bir WP teması.


960bc WordPress Teması
960bc teması, klasik ızgara tabanlı bir düzen içinde çalışmak isteyen WordPress geliştiricileri için minimum stil ve 960 ızgara sistemine (yalnızca 12 sütun) dayanan görüntü içermeyen boş bir tuvaldir.

Olası Alternatifler

Bir CSS Çerçevesi seçmek zor olabilir, 960.gs sizin için uygun değilse, belki de aşağıdaki bazı çerçeveleri deneyebilirsiniz.

Blueprint: Bir CSS Çerçevesi
Blueprint, CSS geliştirme sürenizi kısaltmayı amaçlayan bir CSS çerçevesidir. Kullanımı kolay bir ızgara, hassas tipografi ve hatta baskı için bir stil sayfası ile projenizi en üst seviyeye çıkarmak için sağlam bir CSS temeli sağlar. YUI çerçevesinden çok daha az şişirilmiş ve muhtemelen kullanım kolaylığı açısından 960.gs ile eşit.

CSS-Demirbaş
Blueprint'in yazarlarından birinden. Herhangi bir projeye başlamak için çıplak temelleri sağlayan soyulmuş bir çerçeve oluşturdu. Bu çerçeve hafiftir ve semantik olmayan isimlendirme kuralları önermemeye çalışmaktadır.

Elements - Yeryüzü CSS Çerçevesine Aşağı
Tasarımcıların CSS'yi daha hızlı ve daha verimli yazmasına yardımcı olmak için tasarlandı. Öğeler sadece bir çerçeve olmanın ötesine geçer, kendi proje iş akışıdır. Projenizi tamamlamak için ihtiyacınız olan her şeye sahiptir.

WYMstyle - CSS çerçevesi - Genel Bakış
Bu projenin amacı, web sitelerinin hızlı tasarımı için kullanılabilecek bir dizi iyi test edilmiş modüler CSS dosyası sağlamaktır.

Yine Diğer Bir Çok Noktalı Düzeni | YAML
“Yine başka bir çok kanallı düzen” (YAML), modern ve esnek süzülmüş düzenler oluşturmak için bir (X) HTML / CSS çerçevesidir. Yapı, programlamasında son derece çok yönlü ve son kullanıcılar için kesinlikle erişilebilir.

CleverCSS
CleverCSS, Python'dan esinlenerek CSS için temiz ve yapılandırılmış bir tarzda bir stil sayfası oluşturmak için kullanılabilecek küçük bir işaretleme dilidir. Birçok yönden CSS2'den daha temiz ve daha güçlüdür.

sparkl CSS Framework
Sparkl, web standartlarına uyan kurşun geçirmez web siteleri oluşturmayı kolaylaştıran, kullanımı kolay bir web geliştirme çerçevesi olan POSH biçimlendirmesini, Kurşun geçirmez CSS'yi ve Göze Çarpan JavaScript'i birleştirir. İhtiyacınız olanı kullanmanıza ve neyi yapmadığınızı bırakmanıza izin veren modüler bir çerçeve kullanır.

JQuery UI CSS Çerçevesi
Sorgu UI, özel jQuery widget'ları oluşturmak için tasarlanmış güçlü bir CSS Framework içerir. Çerçeve, geniş bir ortak kullanıcı arabirimi gereksinimlerini kapsayan sınıfları içerir ve jQuery UI ThemeRoller kullanılarak değiştirilebilir. Kullanıcı Arabirimi bileşenlerinizi jQuery UI CSS Framework'ü kullanarak oluşturarak, paylaşılan biçimlendirme kurallarını kabul edecek ve eklenti topluluğu genelinde kod entegrasyonu kolaylığını artıracaksınız.


Paul Andrew tarafından sadece WDD için yazılmış Speckyboy.com

Web siteleriniz için 960gs kullanıyor musunuz? Ana avantajlar nelerdir? Sizden duymak isteriz…