Kullanıcıdan bilgi aldığımız girdi alanlarının (input) kullanımını kolaylaştırmak ux (kullanıcı deneyimi) açısından önemli. Bunun için ilk olarak placeholder (yer tutucu)’ları HTML’e ekledik. Sonra bunları stilize ettik. Konuyla alakalı “CSS ile HTML5 Yer Tutucu’ya(placeholder) Stil Vermek” yazıma bakabilirsiniz. Daha sonra kullanıcının içeriği girdiğinde yertutucunun kaybolması bir eksiklik olarak görüldü ve kullanıcı bir içerik girdiğinde yertutucunun üstüne doğru kaymasını sağlayan uygulamalar yapmaya başladık. Bu işleri javascript yardımıyla yaparken şimdi daha doğrusu 2-3 senedir bunu CSS ile yapıyoruz.

Bu yazımda sizelere CSS ile bunu nasıl yaptığımızı anlatacağım.

<form>
  <div class="input-satiri">
    <input name="ad" placeholder="İsminizi girin">
    <label>İsim</label>
  </div>
</form>

Bir girdi alanı ve sonrasına bir label ekliyoruz. İlk durumda yertutucu placeholder="İsminizi girin" ile bilgilendirici mesajı gösteriyoruz.

Kullanıcı girdi alanına bir şeyler girdiğinde yertutucu kayboluyor onun yerine label içindeki bilgilendirme metnini gösteriyoruz. :placeholder-shown placeholder görüntülendiğinde durumunu yaklamamızı sağlar. Bize placeholder’ın gizlendiği hali lazım. Onun için de :not(:placeholder-shown) sözde sınıfı işimizi görecek.

Tarayıcı desteği konusunda da çok iyi.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas

CSS grid yazılarımızın 6. sında sizlere explicit (belirlenmiş), implicit(belirlenmemiş) tanımlarını, grid-auto-columns, grid-template-rows ve grid-auto-flow özelliklerini anlatacağım.

display:grid tanımı yapılan kapsayıcı elemanın altındaki tüm birincil ögeler grid ögesi olur. Bu ögelerin grid-template-columns, grid-template-rows ve grid-template-areas tanımları yardımıyla konumu ve boyutu belirlenir. Bu konumu ve boyutu belirlenmiş grid ögelerine explicit (belirlenmiş) grid ögeleri, bunların dışındaki ögelere implicit (belirlenmemiş) grid ögeleri denir.

Belirlenmiş (explicit) ögelerin alanların tanımları bellidir. Peki geri kalan Belirlenmemiş (implicit) ögeler ne olacak. Bu ögeler için de grid-auto-columns ve grid-auto-rows tanımları devreye giriyor. Açıkta öge kalmasın :)

İçeriği dinamik olarak oluşan yapılarda genelde yeni gelen ögeler belirlenmemiş (implicit) öge olarak oluşur. grid-auto-columns ve grid-auto-rows tanımları bu sorunları gidermek bire bir özelliklerdir..

grid-auto-columns ve grid-auto-rows

Yapısı : grid-auto-column: <iz-listesi|> |minmax(<iz-listesi>,<iz-listesi>)
Aldığı Değerler : <iz-listesi> |minmax(<iz-listesi>,<iz-listesi>)
Başlangıç değeri: auto
Uygulanabilen elementler: Kapsayıcı ızgaralara
Kalıtsallık: Yok

<grid-listesi> seti boşluklarla ayrılarak tekrar edebilir değerlerden oluşur.

.grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

enter image description here

Yukarıdaki grid için 4 kolon ve 2 satır tanımlanmıştır. 3. satırdaki ögeler için ise grid-auto-rows: 200px; tanımı yapılmıştır.

Firefox geliştirici aracında explicit ve implicit ayrımını göstermektedir. Explicit grid öge alanı tam kenar çizgisiyle gösterilirken implicit alanlar kesik çizgi olarak gösterilir.

enter image description here

grid-template-x (grid-template-columns, grid-template-rows ve grid-template-areas) ve grid-auto-x (grid-auto-columns ve grid-auto-rows) tanımlarının şöyle bir farkı vardır. grid-template-x tanımları tanımladığı grid ögelerinin hem konumunu hemde boyutunu belirlerken grid-auto-x özellikleri sadece boyutunu belirler.

Bu özellikleri niçin kullandığımızı düşününce bu farklılık daha anlaşılır olur. grid-template-x özellikleri explicit grid ögeleri oluşturmak için tanımlanırken, grid-auto tanımı ise tanımlanmış implicit (belirlenmemiş) grid ögelerinin boyutunu belirler. Birisi sıfırdan tanımlarken birisi tanımlanmış ögenin boyutunu belirler.

grid-auto-flow

Yapısı : grid-auto-flow: [ row | column ] ‖ dense
Aldığı Değerler : [ row | column ] ‖ dense
Başlangıç değeri: row
Uygulanabilen elementler: Kapsayıcı ızgaralara
Kalıtsallık: Yok

Bu özellik tanımlanmış ögelerin dışındakilerin nasıl davranacağını belirlememizi sağlar.

Aldığı değerler ve anlamları:

row Bu değer başlangıç değeridir. Otomatik yerleştirme algoritması her grid ögesinin satırlara yerleştirecektir ve yeni eklenen grid ögeleri içinde yeni satırlar açacaktır.

column: Otomatik yerleştirme algoritması her grid ögesini kolonlara yerleştirecektir ve yeni eklenen grid ögeleri içinde yeni kolonlar açacaktır.

dense Bu tanım grid ögelerinin akışının içindeki davranışına karar verdiğimiz bir özelliktir.

Grid ögeleri normalde sırayla yerleştirilir. Boyutu sığmayan ögeler bir alt satıra itilir.

Örnekle bu konuyu daha iyi anlayacağız. Rachel Andrew’in örneği üzerinden gidersek.

enter image description here

Striped Balloon içeriği daha geniş olduğu için üst satırdan aşağı atılmıştır. Bundan dolayı üst satır boş kalmıştır. Kırmızıyla işaretlenen yer.

enter image description here

Fortnum & Mason içeriği daha küçük olduğu için yukarıdaki boşluğa sığdırılır. Galeri sayfaları için çok güzel bir özellik.

Galeriye örnek: https://codepen.io/FilipVitas/pen/pQBYQd

Kalın sağlıcakla.

Kaynaklar

React ile kod yazmaya başladıktan sonra kullandığım editörde bazı eklemeler yaptım. Ben editör olarak Sublime Text kullanıyorum ve sizlere Sublime Text’te neler yaptığımı anlatacağım. Diğer editörler de benzer yoları izleyerek daha kullanışlı bir ortam oluşturabiliriz.

Renklendirme ve otomatik tamamlama

React ile yazdığımız kodları daha göze hoş ve renklendirilmiş olarak görmek ve otomatik tamamlama için ilk olarak Babel paketini yükledim. Bir kaç yerde sorun yaşadım ve çözümünü bulamadım. Bu eklentinin geliştiricisi uzun süredir geliştirmeyi durdurduğu için Js Custom paketini yükledim. Şu ana kadar bir sorununu görmedim. Öneririm.

React otomatik tamamlama için TypeScript React‘ı da öneriyorlar ama ben denemediğim için bu konuda birşey söyleyemiyeceğim. ES6 ototmaitk tamamlama paketi yeterli bence.

ESLint

Bir teknolojiye yeni girdiğinizde hata yapma oranınız daha fazla oluyor. Bu hataları her defasında tarayıcı konsolunda görmek zaman kaybına neden oluyor.

Bu sorunun çözümü: Linter kullanmak.

Sublime Text’te hata yakalama işini yapmak için ilk olarak Sublime Linter’ı kurmak gerekiyor. Daha önce bu konuyu yazmıştım. Sublime Text linting Daha sonra ESlint paketini kurup ayarlarını yapmak gerekiyor.

npm install babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y  eslint-plugin-react

Sonra uygulamanın an kalsöründe .eslintrc.json oluşturup, başlangıç olarak aşağıdaki bir içerik yazabilirsiniz.

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"]
}

Bir porojede birden fazla kişi çalışıyorsa bu hata düzeltme işini bu koda her giren kişinin yapması lazım. Eğer git kullanırsanız bu kolay. git ile gönderilen her kod öncesinde eslint kurallarını işletip hataları gösteren ve kodun yukarıya çıkmasını engelleyen bir yapı kurmak basit.

git precommit diye adlandırılan kodu yukarı gönderme öncesine aşağıdaki kodu eklemek yeterli.

  1. Projenizin olduğu yerde .git kalsörü olacaktır.
  2. .git/hooks kalsörüne geçin. pre-commit.sample adında bir dosya göreceksiniz.
  3. Bu dosyanın ismini pre-commit olarak değiştirin.
  4. İçindeki örnek kodları silin.
  5. https://gist.github.com/linhmtran168/2286aeafe747e78f53bf adresteki kodu içine kopyalayın.
  6. Son olarak chmod +x .git/hooks/pre-commit çalıştırın.
  7. Süper!

Hızlı yazım kolaylığı için snippet

Babel Snippets ve React ES6 Snippets paketlerini kurarak devamlı kullanılan react yapılarını kısayollar yardımıyla kullanabilirisiniz.

Kurulu bir projede çok ihtiyaç duymuyoruz ancak yeni proje oluştururken güzel işlevi var. connected komponenet, class yapısını üç karakter ile yazmak hız kazandırıyor.

Bunun dışında otomatik düzeltme için Prettier kullananlar da var ama ben henüz kurup denemedim.

VSCode kullananlar için https://flaviocopes.com/vscode-react-setup/ bu yazıyı öneririm.

Sağlıcakla kalın.

Kaynaklar