HTML'nizi Nasıl Kickstart
Tüm geliştiricilerin öncelikli hedefi, özellikle hızlı önyükleme olmak üzere daha hızlı bir gelişmedir. Son birkaç yılda, prototiplerimizi birkaç dakika içinde almayı amaçlayan düzinelerce çerçeve var.
Ne yazık ki, bu çerçevelerin çoğu, proje gereklilikleri geliştikçe hızla yenilenir ve yenilenmesi veya değiştirilmesi gerekir.
Daha eski çözümlerin karşılaştığı sorunları çözen yeni bir çerçeve arıyorsanız, iş akışınızı hala en üst düzeye çıkarırken, yine de çok fazla yanlış olmaz. HTML Kickstart.
Izgara
Izgara, herhangi bir çerçevenin en önemli yönlerinden biridir, özellikle esnek bir ızgara, bir sitenin ne kadar duyarlı olabileceğini belirler.
HTML Kickstart, esnek bir ızgara veya standart (esnek olmayan) bir ızgara seçeneği sunar. Ancak, mobil cihazların artan hakimiyeti göz önüne alındığında bunu kullanmanız net değildir.
İki eşit büyüklükteki sütunlarla esnek bir ızgara oluşturmak için şunları kullanırız:
Content HereContent HereGörebildiğiniz gibi, tek yaptığımız üç taneye basit dersler eklemek. Esnek olmayan ızgarayı tercih ederseniz, yapmanız gereken tek şey esnek sınıf ismini dış div'den çıkarmak.
(Esnek kılavuzun tüm ekranın genişliğine kadar uzayacağını, esnek olmayan ızgara maksimum 1024 piksel genişliğe sahip olduğunu unutmayın.)
Yukarıdaki temel sınıflara ek olarak, kullanabileceğimiz bir dizi yardım sınıfı vardır, örneğin:
- Masaüstünde ve masaüstünde , bu sınıfların bir masaüstü bilgisayarda görünmesini isteyip istemediğinize karar verebilirsiniz.
- Aynı konsepti göster-tablet ve sakla tableti burada, ancak tablet cihazları için geçerlidir.
- Bir kez daha show-phone ve hide-phone , bu sınıflar akıllı telefonlar için görünürlük, bu kez dikte dikmek.
Örneğin, iki sütun ızgaramızı akıllı telefonlarda saklamak istiyorsak, aşağıdaki gibi kod kullanırız:
Navigasyon
HTML Kickstart bize üç menü seçeneği sunuyor: dikey sol, dikey sağ ve yatay.
En çok isteyeceğiniz sürüm, yatay menüdür. Kodlamak için sıralı olmayan listelere ihtiyacımız var:
Dikey bir sol menü istiyorsanız, açılış çubuğuna dikey olarak ekleyin ve dikey bir sağ menü istiyorsanız, aşağıdaki gibi dikey olarak ekleyin:
Gerçekten HTML Kickstart ile duyarlı menüler kodlamak için bu kadar basit.
Varsayılan stilleri
HTML Kickstart size kapalı bazı büyük temel stilleri verir. Açıkçası projeniz için onları hassaslaştırmak isteyeceksiniz, ancak hızlı prototipleme için, bunlar fazlasıyla yeterli.
Tipografi söz konusu olduğunda HTML KickStart kullanır Steve Matteson ‘ler Arimo varsayılan olarak yazı tipi. Tam tipte tip ayarlarını görebilirsiniz. İşte.
Düğme stilleri her zaman her çerçevede çok dikkat çekicidir ve HTML Kickstart tüm şekil ve boyutlarda düğmeleriyle birlikte gelir. Bunun için sınıfları kullanmanıza bile gerek yok, sadece bir düğme etiketi oluşturun ve stiller otomatik olarak uygulanacaktır.
Bir bağlantı etiketine uygulanacak düğme stillerini tercih ederseniz, bunun için düğme sınıfını eklemeniz yeterlidir:
Uygulayabileceğimiz bir dizi farklı stil var:
Son olarak, yatay menüye benzer bir sözdizimi olan bir düğme çubuğu oluşturma seçeneğimiz de var:
Görüntüler
HTML Kickstart, sizin için galeriler ve resimler için pop-up'lar oluşturarak UX'in geliştirilmesine yardımcı olur. Yeni bir pencere açmaktan çok daha iyi bir çözüm.
Tam işlevsel JavaScript tabanlı bir pop-up galeri oluşturmak için tek ihtiyacımız olan aşağıdaki kod:
Uygulaması basit ve tek bir JavaScript dizisine ihtiyacınız yoktu.
Görüntüler ayrıca resim yazısı gibi bazı harika yardımcı sınıflara da sahiptir . Bir resme uygulanan bu sınıf, resmin başlığını stillenmiş bir altyazı olarak gösterir:
Ayrıca, görüntüleri sağa ve sola kaydırmak için kullanabileceğimiz hizalama ve hizalama sol sınıflarımız da var. (HTML Kickstart, küçük bir kenar boşluğu ekleyecektir, böylece görüntüler metne aykırı değildir.)
Ve tabii ki, HTML Kickstart da bize basit slayt gösterileri sunuyor. Kullanır BXSlider Bunu işlemek için kaydırıcı.
Basit bir sürgü için kod böyle bir şeye benzeyecektir:
A Content Slider
This slider handles HTML content as well as images.
Kaydırıcı, mobil cihazlar için dokunmatik özelliklidir ve bir kez daha, tek bir JavaScript satırına ihtiyacınız yoktur.
Formlar
Seni tanıtmak istediğim son şey formlar. Formlar, herhangi bir çerçeve için hayati öneme sahiptir, çünkü bir web sayfasında şekillendirilecek en zor şeylerden birisidir.
HTML Kickstart, formlar söz konusu olduğunda sadeliğini korur ve aşağıdaki gibi bir dikey form oluşturulabilir:
Gördüğünüz gibi, bu form için hiç bir dersi kullanmak zorunda kaldım. Tüm yaptığım, form öğelerinin satır içi olarak işlem görmemesi için sınıfın en üstünü dikey olarak eklemektir.
En sevdiğim HTML Kickstart bölümlerinden biri, formlarla kullanılan basit hata bildirimleridir:
Sonuç
HTML Kickstart ile gelen tonlarca seçenek var, biz sadece yüzeyi çizdik; çok sayıda simge, araç ipucu ve hatta sekme var.
HTML Kickstart'ın gerçek gücü, kodunun basitliğidir. Yabancı sınıfların ve sınıfların yokluğu, onu harika bir zaman tasarrufu yapar, daha az kod ise daha az hata anlamına gelir. Kendi HTML'nizi sıfırdan kodlamaya başlamak istiyorsanız ya da bir tasarım HTML'sini hızla prototiplemek için basit bir çerçeve arıyorsanız Kickstart mükemmel bir seçenektir.
HTML Kickstart kullandınız mı? Farklı bir çerçeve tercih ediyor musunuz? Yorumlarda bize bildirin.