Foundation 5 ile Süper Hızlı Web Siteleri Oluşturun [A Guide]
Bir ön uç çerçevesini kullanmak, web tasarım iş akışınızı birçok yönden geliştirebilir. Yapabilir modern tasarım ilkelerini takip etmenize yardımcı olur mobil-birinci yaklaşım, anlamsal işaretleme ve duyarlı tasarım gibi. Yapabilirsin kullanıma hazır birçok CSS ve JavaScript öğesinden yararlanın ve önemli ölçüde gelişim sürecinizi hızlandırın, görsel ve kullanıcı deneyimi tasarımına odaklanmak için daha fazla zaman ayırarak.
Zurb Vakfı 5, piyasadaki en güçlü ön çerçevelerden biridir. Mantıksal olarak inşa edilmiş, kullanımı kolay ve tamamen ücretsizdir. Bir kullanmanıza olanak sağlar esnek CSS ızgarası o temiz, kullanıcı dostu bir düzen oluşturulmasını kolaylaştırır. Foundation çerçevesi ayrıca yoğun bir şekilde test edilir, bu nedenle tarayıcılar arası ve cihazlar arası uyumlulukla ilgilenir.
Bu derste size göstereceğim Zurb Foundation 5 ile süper hızlı bir web sitesi nasıl inşa edebilirsiniz. Demo sayfasındaki son sonuçlara göz atabilirsiniz..
Web sitesinin düzenini oluşturacağım, ince tasarım öğelerini ekleme görevi sizi bekliyor. Bu eğitimde birlikte oluşturacağımız web sitesi, modern UX tasarımcısının hayalini gerçekleştirecek: duyarlı, mobil, ilk, kullanıcı dostu ve anlamsal.
Bu kılavuzun uzunluğu nedeniyle, hızlıca istediğiniz bölüme ulaşmak için kısayollar:
- Foundation 5 yüklüyor
- Izgarayı Anlamak
- Büyük-N, Orta-N ve Küçük-N Sınıflarını Ne Zaman Kullanmalı?
- Üst Menü Çubuğunu Ekleme
- Ana Kısmı Doldurma
- Popüler Yazılar İçin Panel Ekleme
- Popüler Panele 3 Gönderi Eklemek
- CSS'yi Hazırlamak
- Biraz Daha Fazla İçerik Ekleme
- Sayfalandırma Ekleme
- Kenar Çubuğunu Doldurma
- Bülten Formu
- Flex Video
- Kenar Çubuğu Menüsü
- Sonuç
1. Temel İndirme 5
Foundation 5'i 4 farklı formda indirebilirsiniz:
- tam kod
- sadece gerekli kodla daha hafif bir versiyon
- İhtiyacınız olanı değil neyi özelleştirebileceğiniz özel bir sürüm
- Değişkenlerinizi ve karışımlarınızı SCSS'de ayarlamak istiyorsanız, bir Sass sürümü.
Bu eğitici yazıda Vanilla CSS kodunu tamamlayacağım, ancak sitenizi modernize etmek ve yalnızca gerçekten ihtiyacınız olanı kullanmak isterseniz elbette diğer sürümleri de seçebilirsiniz..
Zip dosyasını indirip açtıktan sonra, tarayıcınızda index.html dosyasını açın; şunun gibi bir şey göreceksiniz:
Evet, devs, dizin dosyasına kullanışlı bağlantılar içeriyordu. Bunu bu şekilde bırakıp prototipiniz için home.html veya benzeri bir adla yeni bir dosya oluşturabilirsiniz, ancak istediğiniz zaman Hazırlık Dokümanlarına kolayca erişebileceğiniz için gerçekten saklamanız gerekmez..
İndex.html dosyasını en sevdiğiniz kod düzenleyicide açın ve içindeki her şeyi sil bölüm, ancak kapanıştan önce Eklenen stil kuralları app.css prototipimizi güzelleştirmek için dosyalarımız: Vakıf 5 göreceli birimler kullandığından, kullanmamız gerek “em”-s veya “rem”-piksel yerine s kurallara uymak için. (CSS birimleri hakkında bilgi edinebilirsiniz: Pikseller vs ems vs burada%.) Foundation 5'in CSS kurallarını geçersiz kılmak zorunda olduğum yeri belirlemek için Firefox'un Firebug uzantısını kullandım. İsterseniz, diğer web geliştirme tarayıcı uzantılarını kullanabilirsiniz.. Burada bu kısa CSS pasajında, son kuralda (.row .row.popular-main) yalnızca Foundation'ın varsayılan CSS'sini geçersiz kılmak zorunda kaldık. İşte demo site şimdi nasıl görünüyor: Daha önce olduğu gibi aynı kuralları kullanarak, sayfanın ana bölümüne biraz daha içerik ekleyeceğiz. Şimdi ekleyeceğimiz içerik, Son Gönderiler küçük resimlerle. Foundation 5, bu Adımda yararlanacağımız hazır hazırlanmış küçük resimlere sahip. Vakıf Küçük resimleri bir önceden oluşturulmuş CSS sınıfı “inci” Küçük kod olarak görüntülemek istediğimiz resimlere aşağıdaki kod parçasında görebileceğiniz şekilde eklememiz gerekir.. Her Son Gönderi için, Popüler Panelin altına yeni bir satır ekleyerek özel CSS sınıfı denir “Son sonrası”. Tablet ve masaüstü boyutunda, Foundation'ın soldaki küçük resim sınıfını kullanarak küçük bir küçük resim ve sağdaki başlık ve kısa bir açıklama göstereceğiz. Cep telefonunda, başlık ve açıklama küçük resmin altına gider. Şimdi kullandım “orta-3 sütun” ve “orta-9 sütun” Ekranı 1: 3, görüntü için% 25 ve orta boyuttan metin için% 75 ayırmalarını sağlayan sınıflar. Aşağıdaki kod parçasını Popüler Panel'in altına üç kez (üç Son Mesaj için) yerleştirin. Burada yalnızca bir Son Gönderi satırının kodunu ekliyorum, çünkü hepsi aynı HTML işaretlemesini kullanıyor, yalnızca içerik farklı. Son Mesajın İçeriği… Adım 4.3'te oluşturulan özel CSS dosyamız, app.css ayrıca demonun görünümünü düzenli tutmak için bazı yeni stil kuralları alır.. Not: Kendi CSS’nizi Temel’e eklemek isterseniz, varsayılan kuralları geçersiz kılmanız gereken bir web geliştirme aracıyla kontrol etmeyi asla unutmayın. Aşağıdaki CSS kod parçacığında, ilk kuralda (.row .row.latest-post) geçersiz kılmamız gerekir. İkinci kuralda sadece kendi kişisel seçicimizi kullanmamız yeterli (.latest-post h4). Prototipimiz artık şuna benziyor: Bu adımda Son Mesajların altına harika bir sayfa ekleyeceğiz. Foundation 5, kullanıma hazır pagination sınıflarıyla bize yardım eli veriyor. Bu adımda bulabileceğiniz aynı kodu kullanıyoruz. “ileri” Sayfalama Belgelerinin içindeki bölüm. Yeni eklenen Sayfalandırma bölümüne sahip olan Son Mesajlar: Artık demo sitemizin ana içeriğiyle hazır olduğumuz için, sağ kenar çubuğunu doldurmanın zamanı geldi. Sağ kenar çubuğu, mobil ve tablet boyutlarında ana içeriğin altına kayar. Tüm kod parçacıklarını bu bölümün içine Sol kenar çubuğunda, takma adın altında bir Bülten Kayıt Formu (1), En Son Video (2) ve akordeon tarzı Kenar Çubuğu Menüsü bulunur “Yemek Kitabımız” (3). Bu adımın sonunda şöyle görünecek olan demomuza hazır olacağız: Foundation 5’te bir form oluşturmak için başka hiçbir şey yapmanıza gerek kalmaz HTML etiketi. Aşağıdaki kod pasajına bakarsanız, formu 3 ızgara için farklı CSS seçicileri koyacağımız bir sıraya koyduğumuzu göreceksiniz: “küçük-12”, “orta-9”, ve “Büyük-12”. Bu çözümü seçtik, çünkü% 100 genişliğindeki bir Bülten Formu mobil boyutta harika görünüyor, ancak tablet boyutunda oldukça garip çok geniş. Neyse ki Vakfı 5 kullanmamıza izin veriyor “Eksik Satırlar”: sadece eklemek zorundayız “son” eksik sütunun CSS sınıfı tanımına sınıf. Yani burada ne olacak: mobil boyutta, kenar çubuğu ana içeriğin altında tüm ekranı kaplayan bir Bülten Kayıt Formu ile görüntülenecek. Orta boyutta kenar çubuğu ana içeriğin altında kalacaktır, ancak Bülten Formu ekranın% 75'ini kapsayacak ve kalan% 25'i boş kalacaktır. Masaüstü boyutunda, kenar çubuğu ana içeriğin hemen yanında olacak ve Bülten Formu, kenar çubuğunun tüm genişliğini yeniden kapsayacak. Eksik Satırlar hakkında daha fazla bilgi edinmek için Izgara Dokümanlarına bakın.. Şimdi içine bir göz atın başlık kenar boşluğu: 2em; .popular-ilave h4 font-size: 1.125em; kenar boşluğu: 0.4em; .row .row.popular-main kenar boşluğu: 1.5em;
4.4 Biraz Daha Fazla İçerik Ekleme
Son Gönderi Başlığı
.satır .row.latest-post kenar boşluğu: alt: 1.5em; .latest-post h4 margin-top: 0; yazı tipi boyutu: 1.125em;
4.5 Sayfalandırma Ekleme
5. Kenar Çubuğunu Doldurma
5.1 Bülten Formu
Haber bültenimize kaydolun
Temel Formlar, Önek Etiketi, Önek Yarıçapı Etiketi, Posta Ek Düğmesi ve Posta Ek Etiketi gibi birçok başka düzen seçeneğine sahiptir. Buradaki Postfix Button seçeneğini daha kullanıcı dostu olarak seçtik: kullanıcılar bunu tıklayıp formu bir kerede gönderebilir.
Formun içine, ekranı 2: 1'e ayıran iç içe geçmiş yeni bir satır ekleyeceğiz. Metin girişi 8 sütun alır ve postfix düğmesi 4 olur. Bu düzeni mobil ekranda bile yapmak istediğimiz gibi, “küçük 8 sütun” ve “küçük-4 sütun” Buradaki CSS seçicileri, Küçük Izgara bu işaretlemeyi uygulamak istediğimiz en küçük boyuttur..
Yukarıdaki HTML kodunda başka bir yeni şey görebilirsiniz. “satır çöküşü” sınıf. Bu, Foundation 5'in yerleşik stilidir. Varsayılan olarak iki bitişik sütun arasında bir boşluk vardır, ancak eklersek “çöküş” Sınıfımıza sıra, oluk kaybolacak. Bunu yapıyoruz çünkü düğmenin aralarında boşluk kalmadan metin girişinin hemen yanında olmasını istiyoruz..
Şimdi bu kod parçacığını ekleme
5.2 Flex Video
Bülten Bölümünün altında, kenar çubuğumuza bir Günlük Video Tarifini ekleyeceğiz. Vakıf 5 bize yardımcı oluyor gömülü videoları duyarlı hale getirin ve onları otomatik olarak ölçeklendirmeye zorlayın Flex Video özelliği ile.
Flex Videos yerleşik kullanır “esnek-Video” CSS sınıfı Daily Video Recipe kenar çubuğu bölümü için yeni bir satır oluştururuz ve içine geniş bir sütun yerleştiririz. “küçük 12 orta 9 büyük 12 sütun” Aynı nedenden ötürü CSS seçicileri, önceki adımdaki Orta Izgara'da tamamlanmamış bir satır kullandık.
Bülten Bölümünün altına yapıştırmanız gereken kod İşte. Youtube, Vimeo vb. Herhangi bir videoyu kullanabilirsiniz..
Günlük Video Tarif
5.3 Kenar Çubuğu Menüsü
Kenar Çubuğu Menüsü için Temel 5'in Akordeon özelliğini kullanacağız. Akordeonlar, içeriği genişleten ve daraltan mantıksal bölümlere dağıtan web öğeleridir..
Demo sitemizde bu mantıksal bölümler 3 farklı yemek grubudur (Ana Yemekler, Garnitürler, Tatlılar) ve her grup gibi daha küçük gruplar içerir. “kümes hayvanları”, “domuz”, “Sığır eti”, “Vejetaryen”.
Tüm kenar çubuğu Akordeonunu, önceki 5.1 ve 5.2 Adımlardaki gibi aynı mantıkla geniş bir sütuna yerleştiririz. İçine akordeon gibi uygun CSS sınıfları ile sıralanmamış bir liste koyarız. “akordeon” ve “akordeon-navigasyon”.
Temel Akordeonlar JavaScript ile çalıştığından, davranışını önceden oluşturulmuş JavaScript değişkenleri yardımıyla özelleştirebilirsiniz. Bunu yapmak için “İsteğe bağlı JavaScript Yapılandırması” Akordeon Dokümanları. Aşağıdaki kod parçacığı, index.html dosyasının içindeki Flex Video bölümünün altına gelir.
Sonuç
Şimdi demo sitemizle hazır olduğumuza göre, Foundation 5 ile başka neler başarabileceğinizi görelim. Bu demoda kullandığımız unsurlar Foundation çerçevesinin özelliklerinden sadece küçük bir set. Özelleştirilebilir Simge Çubukları, Ekmek Kırıntıları, Işık Kutuları, Aralık Sürgüleri, Form Doğrulama ve diğerleri gibi tasarımınızda kullanabileceğiniz birçok şey var. Dokümanlar oldukça iyi yazılmış ve birçok kod örneği ile geliştiricilere yardımcı oluyor.
Sass'ı biliyorsanız, Dokümanlar'daki her bölüm kendi karışımlarınızı nasıl oluşturabileceğinizi ve sitenizi özelleştirmek için hangi Sass değişkenlerini kullanabileceğinizi açıkladığından daha fazla seçeneğiniz vardır. Web sayfanızı tasarlamaya başlamadan önce, oluşturmanız gereken tüm tarayıcılarda çalıştığından emin olmak için Foundation çerçevesinin uyumluluğunu kontrol etmeyi unutmayın..
- Demoyu Gör
- Kaynak İndir
