Bir kaç hafta önce ünlü Vakıf çerçevesi dördüncü versiyonunu yayınladı. Vakfınızı hiç duymamışsanız, bu duyarlı çerçeveyi kullanarak size yol göstereceğiz.

Vakfın 3. versiyonu SASS - daha verimli CSS'nin yazılmasında yardımcı olan bir CSS ön-işlemci kullanılarak sıfırdan oluşturulduğundan bu yeni versiyon da mobil cihazlara uygun ve birçok özellik sunuyor. diğer çerçevelerden alın.

Vakfımıza dalalım ve neden bu kadar popüler olduğunu görelim…

Izgara

Vakıf, herhangi bir boyut ekranına uyum sağlayacak 12 sütunlu bir ızgara kullanır, eğer zaten kullanılmış ızgaralarınız varsa, bu size çok aşina olmalıdır. Vakıftaki tüm divlar, kutu boyutlandırmayı kullanır: kenarlık ve dolgu, öğenin genişliğini ve yüksekliğini etkilemez, böylece matematik bizim için biraz daha kolaylaşır. Ancak Foundation ızgarasıyla ilgili şaşırtıcı olan şey, 2 ızgara, ekranın genişliğinin 768 pikselden büyük olması ve daha basit bir şekilde kontrol edebileceğiniz daha küçük bir ızgara olması. Bu amaçla, Vakıf, küçük # ve büyük # sınıflarını şöyle kullanır:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Bu kodda, tarayıcı, 768 pikselden daha geniş olduğunda, aynı genişlikteki 3 divanın bulunduğu bir satır oluşturduk, ancak daha küçük olduğunda, divlarda bu küçük sınıf tarafından görebileceğiniz gibi, sonuncusu yarım Diğer ikisi ise% 25'ini kaplarken, bu, web sitemizin tüm ekranlarda nasıl görüneceğine dair muazzam bir kontrol sağlar.

Vakıf aynı zamanda bir sütunu dengelemenize izin verir. Yani, sadece 3 sütun genişliğinde 2 sütun içeren bir satırınız olabilir, ancak sağa doğru kayan ikincisini dengeleyebilir ve büyük harfleri kullanırız. offset sınıfı veya küçük ofset sınıfı:

3, offset 6

Blok ızgara

Blok ızgara sadece güzel bir ekstradır, ızgara içindeki bir listenin içeriğini bölmeniz için bir yoldur, web sitenizin bu belirli bölümünü istediğiniz zaman ne kadar büyük olursa olsun eşit aralıklı kalmak istediğiniz için yararlıdır tarayıcı. Bu tip bir ızgara, küçük-blok-grid ve büyük-blok-grid sınıflarını kullanır, eğer sadece birincisini ayarlarsanız, grid, viewport ne olursa olsun istenen boşluğu tutacaktır, ancak sadece büyük blokları kullanırsanız- kılavuz sınıfı, 768 pikselin kesme noktasına ulaştığında, ızgara öğeleri birbirinin üzerine yığılır, bu nedenle her iki sınıfı da kullanarak daha fazla denetim yapabilirsiniz.

Bunu kullanarak, boyuttan bağımsız olarak görüntüler eşit aralıklı olacaktır. Görüntüleme noktası 768 pikselden daha büyük olduğunda, yalnızca bir satır kalır ve bundan daha küçük olduğunda, her biri 2 resim olacak şekilde iki satır kaplar.

Ana navigasyon

Şimdi Vakıf'taki ızgarayı ve tüm ortamlarda size nasıl kontrol sağladığımızı anladığımızda, neredeyse her zaman sitelerimizde kullanacağımız bir şeyden bahsedeceğiz: bir üst navigasyon çubuğu. Ve tabi ki bu navigasyon, bu çerçeveyi kullanan çok az çalışma ile esnek de olabilir. Temelini kullanarak basit bir duyarlı navigasyon oluşturmak için şunları kullanın:

Bu HTML biti, web sitesinin başlığını sola, sonra sağda dört menü öğesine sahip olan basit bir gezinme çubuğu oluşturur. Ayrıca, viewport'un 768 pikselden küçük olması durumunda, bu menünün bu menüyü duyarlı hale getiren bir liste simgesiyle değiştirileceğini unutmayın. Eğer bu kılavuzun, sayfayı aşağı doğru kaydırırken konumunu sabitlemesini istiyorsanız, onu bir sabit sınıfla bir div içine sarmanız gerekir . Navigasyonunuza açılır menüler eklemek için, yalnızca aşağı açılır kutunuzu istediğiniz yere ekleyebilirsiniz.

#">  Alt menü Öğe 1
Alt menü Öğe 1
Alt menü Öğe 3

Ayrıca, bölme yapmak istediğiniz iki liste öğesi arasında bir ayırma sınıfı ile bir liste öğesi yerleştirmeniz gerekecek şekilde küçük gri bir dikey çizgi ekleyerek liste öğenize bir ayırıcı ekleme yeteneği de vardır.

Düğmeler

Önceden tanımlanmış bazı düğmeler olmadan hiçbir çerçeve tamamlanmayacak ve Temel olarak, önceden belirlenmiş olan birden fazla düğme stili vardır, mavi renk kullanan ve daha sonra başarı, uyarı ve ikincil stilleri ekleyen varsayılan değere sahiptir. Yarıçap sınıfını ekleyerek, bu düğmeye biraz sınır yarıçapı verirsiniz ve bu, yuvarlak sınıfı vererek düğmeyi neredeyse tamamen yuvarlak hale getirirsiniz. Düğmeye devre dışı bırakılan sınıfı da ekleyebilirsiniz ve düğmeyi istediğiniz kadar büyük hale getirmek için 4 boyut sınıfı vardır.

Varsayılan DüğmeMinik DüğmeKüçük düğmeBüyük Düğmeİkincil DüğmeBaşarı düğmesiUyarı DüğmesiYarıçap DüğmesiYuvarlak düğmeEngelli Düğme

Basit bir açılır menü oluşturmak için açılır listeyi yalnızca son dersten sonra eklemeniz gerekir.

  h1.subheader 
  h1.  daha küçük 
  Liste öğesi 
  Liste öğesi 
  Bağlantı 1
Bağlantı 2

Gördüğünüz gibi, tipografi söz konusu olduğunda, Vakıf bize bazı temel yardımlar ve tüm ihtiyaçlarımızı karşılamak için bazı ek sınıflar sağlıyor.

Diğer bileşenler

Vakıf çerçevesinin bu şekilde gösterilmesi iştahınızı daha fazla öğrenmeye ve Vakıf ile çalışmaya başlayacaksa, belgelere bir göz atmalısınız, çünkü Kuruluş ayrıca aşağıdaki gibi ek CSS bileşenleri sunmaktadır:

• Uyarı Kutuları
• Paneller
• Fiyatlandırma Tabloları
• İlerleme Barları
• Tablolar
• Minyatür
• Flex Video

Ve ayrıca bazı yardımcı JavaScript gibi:

• takas
• Yıkılmak
• Joyride
• Macellan
• yörünge
• Ortaya çıkartmak
• Bölüm
• Araç ipuçları

Gördüğünüz gibi, keşfedilecek bir çok Vakıf var ve CSS ve JavaScript özelliklerinin tümüne bakmanızı şiddetle tavsiye ediyorum.

Sonuç

Vakfın web sitenizin yapısı üzerinde çok daha fazla kontrole sahip olduğunuzdan daha hızlı ve daha duyarlı web siteleri oluşturmaya nasıl yardımcı olabileceğini görmek için bu makalede yeterince yer kaplıyoruz. web sitenizi oluşturmak için. Umarım bu makale, bir sonraki projeniz için Vakıf'ı öğrenmek ve kullanmak için size bir fırsat verdi.

Bir proje için Vakıf kullandınız mı? En kullanışlı olan hangi özellikleri buldunuz? Yorumlarda bize bildirin.