REACT SAMPLES
React Typography Samples
Bu bölümde React projelerinde Typography’nin nasıl kullanılacağı ile ilgili örnekleri ekliyor olacağım.
Typography ile ilgili örneklere başlamadan önce aşağıdaki blog yazılarına bir göz atmanızı öneririm.
- Kuş Bakışı CSS (4ncü bölüm Metinler üzerinde CSS işlemleri)
- Fontları React Projesine Nasıl Dahil Ederiz ?
- React Örnek Proje Mimarisi — 12 (Title, Text, Paragraph, Link, List)
1. Responsive Typography
Responsive Tipografi, herhangi bir web sitesindeki yazı tasarımıdır. Web sitesi içeriğinin
- herhangi bir tablet,
- dizüstü bilgisayar,
- masaüstü ve
- mobil cihazın
boyutuna uyarlanmasını sağlar. Bu sayede yazı her zaman okunabilir olabilir. Responsive Tipografi uygulamak için Media Query, Viewport Calculation ve Fluid Calc seçeneklerinden biri kullanılabilirsiniz
2. CSS Units
CSS Birimlerinin işleyiş mekanizmasını sağlar. Kutu genişliği ve yüksekliği piksel (px) cinsinden gösterilir. HTML öğesinin (rem) yazı tipi boyutu artırılabilir veya azaltılabilir ve öğenin (buradaki kutu) yazı tipi boyutu artırılabilir veya azaltılabilir.
3. Custom Typography
Custom Typography içerisinde kendi özel tanımladığımız font tipleri bulunuyor , bunlar Headline, Title, Body ve Other grupları altında tutuyoruz.
4. Balancer
Bu örnekte Markdown içerisinde kullandığım metnin farklı boyutlardaki ekranlarda daha iyi görüntülenebilmesi için React Wrap Balancer kütüphanesinden faydalanarak bir örnek gerçekleştirdim.
Balancer Kullanmadığım durumlarda metinlerin gelişi güzel bir şekilde sondan kesildiğini görebilirsiniz.
Bunun yerine Balancer aktif hale getirdiğim durumda ise metinlerin daha dengeli bir şekilde alt satırlara bölündüğünü görebilirsiniz.
5. Typography Ellipses And Tooltip
Bu örnekte belli bir alana sığmayan metinlerin ellipses yani 3 nokta ve tooltip ile gösterilmesini sağlayan bir örnek geliştirdim. 2nci modda sadece Ellipses, 3ncü modda ise Tooltip ve Ellipses bir arada gösteriliyor.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
