[ad_1]
Bir süredir Basamaklı Stil Sayfaları (CSS) ile çalışıyorsanız, işi halleden daha basit CSS çerçevelerine yönelik eğilimi fark etmişsinizdir. Bu makale daha güçlü örneklerden birini tanıtıyor. Saf CSS minimal, hafif ve kapsamlı bir yaklaşımla kendi yönünü CSS geliştirmeye koyan modüler, duyarlı bir çerçevedir. TailWind CSS ile birlikte Pure, web sayfalarını nasıl şekillendirdiğimize dair ilginç bir yeniden düşünme sunar. 22.000’den fazla yıldızla da popüler GitHub bu yazı itibariyle.
Mobil öncelikli CSS geliştirme
Başlangıçta Pure, mobil öncelikli olduğunu ve sıkıştırıldığında paketin tamamı için 3,7 KB gibi küçük bir dosya boyutunda teslim edildiğini açıkça ortaya koyuyor. Çerçevenin düz ve genişletilebilir olması amaçlanmıştır, gerektiğinde kullanabileceğiniz ve genişletebileceğiniz basit bir üst düzey araç yelpazesi sunar. Üstüne inşa edilmiştir normalize.csstarayıcılar arası pürüzlerin düzeltilmesine yardımcı olur.
Pure’u kullanmak basittir: HTML sayfasına kendiniz dahil edebilir veya bir içerik dağıtım ağından kullanabilirsiniz.
Çerçeve birkaç modülden oluşur:
Bunların her birine sırayla bakacağız.
temel modül
Bahsettiğim gibi, Pure bunun üzerine inşa ediyor normalize.css. Bu temel modüle birkaç kullanışlı özellik ekler.
bu hidden öznitelik, gizli stili uygulamak için kullanılır ( !important çerçeve tarafından uygulanan değiştirici), Liste 1’de gösterildiği gibi.
Liste 1. ‘Gizli’ özellik
<input type="text" name="token" hidden>
bu .pure-img sınıf hızlı bir şekilde yapmak için kullanılır duyarlı resim.
ızgara düzeni
Izgara düzeni, Pure’un duyarlı düzeninin kalbidir. Beğenmek Önyükleme‘in temel fikri olan ancak esaslara indirgenen Pure’un düzen sınıfları, çok az sözdizimi ile çok şey yapmanızı sağlar. Liste 2’de temel bir düzeni görebilir ve canlı olarak görüntüleyebilirsiniz. burada.
Liste 2. Saf CSS’de basit bir ızgara düzeni tasarlama
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="
<link rel="stylesheet" href=" />
<link rel="stylesheet" href="
<style>
sector { min-height: 150px; min-width: 199px; }
sector:nth-of-type(1) { background: IndianRed; }
sector:nth-of-type(2) { background: Moccasin; }
sector:nth-of-type(3n) { background: thistle; }
sector:nth-of-type(4) { background: seagreen; }
sector:nth-of-type(5) { background: DarkSlateBlue; }
sector:nth-of-type(7) { background: darkviolet; }
</style>
</head>
<body>
<div class="pure-g">
<sector class="pure-u-1-2 pure-u-md-1-3">Mt. Everest</sector>
<sector class="pure-u-1-2 pure-u-md-1-3">K2</sector>
<sector class="pure-u-1 pure-u-md-1-3">Kangchenjunga</sector>
<sector class="pure-u-1 pure-u-md-1-2">Lhotse</sector>
<sector class="pure-u-1 pure-u-md-1-2">Makalu</sector>
<sector class="pure-u-1 pure-u-md-1-2">Cho Oyu</sector>
<sector class="pure-u-1 pure-u-md-1-2">Dhaulagiri I</sector>
</div>
</body>
</html>
Izgaranın farklı kısımlarını renklendirmek için basit stiller ile birlikte, Liste 2’deki işaretleme ve CSS, orta ve daha büyük ekranlar için iki sütun üzerine yığılmış üç sütun ve daha küçük olan her şey için tek bir sütun üzerine yığılmış iki sütun içeren bir ızgara oluşturur. canlı olarak izleyebilirsiniz burada. Tarayıcı pencerenizi yeniden boyutlandırırsanız, düzenin farklı düzenlere kaydığını görürsünüz. Şekil 1, iki düzeni göstermektedir: yukarıdaki daha büyük ekran düzeni ve aşağıdaki daha küçük ekran boyutu.
IDGŞekil 1. Duyarlı bir ızgara düzeninin iki görünümü
Duyarlı bir düzen elde etmenin ilk adımı, pure-g konteyner üzerinde sınıf. Ardından, sütunlarınızı şununla tanımlayın: pure-u-* notasyon, şöyle:
pure-u-<DISPLAY-SIZE>-<COLUMN-SIZE>.
bu <DISPLAY-SIZE> bölümü, cihazın ekran boyutunu tanımlamanıza olanak tanır. <COLUMN-SIZE> geçerlidir. Görüntüleme boyutunu ayarlamazsanız, sütun boyutu varsayılandır ve en küçük cihazlardan yukarıya doğru uygulanır. Bu bir olarak bilinir mobil öncelikli duyarlı düzen.
Bunu eylemde görebilirsiniz pure-u-1 ve pure-u-1-2 Liste 2’deki sektörlerdeki sınıflar. Orta büyüklükteki cihazlarda ve daha büyük cihazlarda düzeni tanımlamak için düzen, pure-u-md-1-3 ve pure-u-md-1-2 sınıflar.
Bölümün kullanılabilir alanın ne kadarını kaplayacağını tanımlamak için sütun boyutlarını kullanabilirsiniz. rakam 1 %100 anlamına gelir ve sonraki her sayı bir kesri tanımlar: 1-2 bir yarısıdır, 1-3 üçte biri, vb. Örneğin, Liste 2’deki düzende, sınıf pure-u-md-1-3 şunu bildirir: ekran boyutu orta olduğunda, bu segment mevcut genişliğin üçte birini kaplar.
Piksel genişlikleriyle birlikte cihaz boyutları kümesini şurada bulabilirsiniz: Saf CSS duyarlı ızgaralar belgeleri. Pure, hem 24. tabanlı bir ızgara hem de 5. tabanlı bir ızgara sunar.
Formlar
Pure, formları hızlı bir şekilde şekillendirmek için birkaç sınıf içerir. Form desteği aşağıdaki kategorilere ayrılır:
- Varsayılan: Yatay form
- Yığılmış: Dikey form
- Hizalı: Yan yana etiketli dikey form
- Çok sütunlu (saf ızgaralarla): Duyarlı form
- Gruplandırılmış girişler: Bölümlü form
- Giriş boyutlandırma: Giriş boyutu kontrolü
- Gerekli girişler: Gerekli alanlar için stil oluşturma
- Devre dışı girişler: Devre dışı bırakılmış alan stilleri
- Salt okunur girişler: Salt okunur stil
- Yuvarlatılmış girişler: Yuvarlak alanlar
- Onay kutuları ve radyolar: Geleneksel olarak titiz giriş stili
Liste 3, yığılmış (dikey) bir formun bir örneğidir.
Liste 3. Saf CSS’de yığılmış bir forma stil verme
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email" id="stacked-email" placeholder="Email" />
<span class="pure-form-message">This is a required field.</span>
<label for="stacked-password">Password</label>
<input type="password" id="stacked-password" placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember" class="pure-checkbox">
<input type="checkbox" id="stacked-remember" /> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
dikkat edin pure-form ve pure-form-stacked formun kendisinde sınıflar.
Düğmeler
Pure, varsayılan, devre dışı ve etkin düğmelere stil vermenin basit yollarını sunar. Bu bileşenleri ayrıca kapsamlı stiller ile özelleştirebilirsiniz. Pure dokümantasyonundan alınan Liste 4, düğmelerin köşelerinin ve renklerinin nasıl değiştirileceğine dair bir örnek verir.
Liste 4. Özelleştirilmiş düğmeler
<div>
<style scoped="">
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: green;
}
.button-error {
Background: maroon;
}
.button-warning {
background: orange;
}
.button-secondary {
background: lightblue;
}
</style>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>
Buradaki ana fikir, tabana eklenen stiller oluşturmaktır. pure-button stil. Bunlar, varsayılan stilleri geçersiz kılmak, renkler ve yuvarlatılmış köşeler sağlamak için kullanılır. Örneğin, button-success sınıf tanımlar color, border-radius, text-shadowve bir background yeşilin rengi.
Tablolar
Pure, temel tablo stillerini destekler. Bunları kullanmak için, sadece pure-table tablonun kendisine sınıf. Pure ayrıca kenarlıklarınızın ve satır gölgelemenizin masada nasıl görüneceği konusunda birkaç seçeneğe sahiptir.
Menüler
Pure, kutudan çıktığı gibi güzel bir menü stili seti içerir:
- Dikey menü
- yatay menü
- Seçilmiş ve devre dışı bırakılmış öğeler
- açılır menüler
- Alt menüleri olan dikey menü
- Kaydırılabilir yatay menü
- Kaydırılabilir dikey menü
- Gizleyen duyarlı menüler
Bunların hepsi beklediğiniz gibi performans gösteriyor. Örnekler bulabilirsiniz burada. Özellikle, duyarlı kenar çubuğu ve dikeyden yataya menüler kullanışlı.
Saf CSS’yi Genişletme
Pure, sağlam çekirdek özelliklerine ek olarak çeşitli şekillerde genişletilebilir.
Pure CSS sınıflarının yanına özel sınıflar eklemek oldukça kolaydır. Bunu Liste 4’te stilize edilmiş düğmelerle küçük bir şekilde gördünüz, ancak site genelinde özelleştirmeler eklemek neredeyse kolay.
Pure’u genişletmek ve mevcut CSS ile entegre etmek için Grunt eklentilerini kullanabilirsiniz. Çerçeve aynı zamanda büyük ölçüde şu şekilde inşa edilmiştir: yeniden çalışma eklentiler, böylece diğer Yeniden İşleme araçlarıyla entegre edebilirsiniz.
Son olarak, Pure’u Bootstrap gibi diğer kitaplıklarla çalışacak şekilde genişletebilirsiniz. Burada gördüğünüz Pure CSS temellerini kullanabilir ve ardından Bootstrap gibi daha kapsamlı bir araçtan ihtiyacınız olanı alabilirsiniz. Bu, ihtiyacınız olan tüm özellikler ve işlevsellik ile size mümkün olan en küçük ayak izini verir.
Telif Hakkı © 2022 IDG Communications, Inc.
[ad_2]
Kaynak : https://www.infoworld.com/article/3666510/intro-to-pure-css-minimal-modular-css-layouts.html#tk.rss_all