Anasayfa » Web Tasarımı » Foundation 5 ile Süper Hızlı Web Siteleri Oluşturun [A Guide]

    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:

    1. tam kod
    2. sadece gerekli kodla daha hafif bir versiyon
    3. İhtiyacınız olanı değil neyi özelleştirebileceğiniz özel bir sürüm
    4. 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:

     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;  

    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:

    4.4 Biraz Daha Fazla İçerik Ekleme

    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 Gönderi Başlığı

    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).

     .satır .row.latest-post kenar boşluğu: alt: 1.5em;  .latest-post h4 margin-top: 0; yazı tipi boyutu: 1.125em; 

    Prototipimiz artık şuna benziyor:

    4.5 Sayfalandırma Ekleme

    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:

    5. Kenar Çubuğunu Doldurma

    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