Tasarımlarda Standart Sistem Fontunu Kullanmak

Kodladığımız tasarımlarda farklı işletim sistemlerinde farklı font görüntüleri alıyoruz. Çünkü ne olursa olsun hepsinin kendine göre kriterleri var ve aynı sonucu göstermiyor. Ancak sistemlerin kendi standart fontları yeterince tutarlı öyle değil mi? O halde bootstrap 4’ün yaptığı gibi bizde hangi işletim sisteminden girildiyse o işletim sistemine ait standart fontu gösterebiliriz.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bunu kullandıktan sonra farklı işletim sistemlerinden deneyerek sonuca ulaşabilirsiniz.

OS X El Capitan Sass Kurulum Hatası ve Çözümü

Yakın zamanda mac’de işletim sistemimi güncelledim.
Ancak daha sonra sass’ı kullanamaz oldum.
Kurulum yaparken ise şöyle bir hata alıyordum;

ERROR:  While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

Daha sonra biraz araştırınca benim gibi bir çok kişi el capitan’da sorun yaşamış.
Şöyle bir issue‘ya denk geldim ve çözümünü burada buldum. Sorun yaşayanlar için çözüm;

sudo gem install sass

yerine

sudo gem install -n /usr/local/bin sass

şeklinde kurulum yapmak.

Sorun yaşanlar olursa diye blog’da bulundurmak istedim bu konuyu 🙂
Bol kodlamalı günler.

Responsive Tablo Yapımı

Başlık biraz aldatıcı olabilir ama teknik olarak responsive tablo yapımı evet 🙂
Uzun bir tablonuzu tablet ya da telefon boyutlarında nasıl düzgün şekilde gösterebileceğinizden kısaca bahsettim.

Video

Demo

http://www.erbilen.net/demo/responsive-tablo/

Not: Telefon ve tabletlerde gerçek boyutta gözükmesi için aşağıdaki meta etiketini eklemeyi unutmayın!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Css’de geniş yazıyı üç nokta ile sınırlandırmak

Bazı durumlarda gelen verinin uzunluğu bilinmediği için css ile belli bir genişlik verip taşan kısımları üç nokta koyarak kısaltmamız gerekiyor. Bu gibi durumlar için css’de text-oveflow özelliğini kullanıyoruz. ellipsis değeri bize bu görevi sağlıyor. Ancak taşanların gizlenmesi için ve yazının hiçbir zaman 2. satıra inmemesi için oveflow ve white-spcae özellikleri de bize lazım. Örnek vermek gerekirse;
Okumaya devam et “Css’de geniş yazıyı üç nokta ile sınırlandırmak”