Construct your CSS!
Başlıktan anlaşıldığı üzere CSS inşa edeceğiz! Hem de çok basit bir şekilde. Christian Montoya isimli developer CSS şablonunuzu çıkarmanız için çok kullanışlı bir araç geliştirmiş. Bu araç; bir kaç tıklamayla ve klavyeden basacağınız bir kaç harfle satır ve sütun ekleyerek bir site şablonu çıkarmanıza yardımcı oluyor.
Kullanım:
* Sayfa oluşturmak için http://www.constructyourcss.com/ adresine giriyorsunuz.
* İhtiyacınız kadar satır oluşturmak için “Add container” butonuna tıklıyorsunuz. Örneğin web siteniz Header, Content ve Footer bölümlerinden oluşsun. 3 kere tıklamanız yeterli.
* Header satırına sadece banner koymak istiyorsunuz. Bu satıra gitmek için klavyeden üst o tuşuna babilir ya da o sütunun üstüne tıklayabilirsiniz. Satırda default olarak gelen sütunu uzatmak için “k” harfine basılı tutun. İstediğiniz kadar o sütunu genişletin.
* Content kısmında ContenLeft ve ContentRight alanları belirlemek istiyorsunuz. İki defa “a” harfine basarak iki sütun oluşturun. Soldaki sütunu menü alanı oluşturacak kadar “k” harfine basara k uzatın. Yanındaki sütuna geçin içerik alanı oluşturacak kadar “k” harfine basın. Fazla uzun gelirse “j” harfine basarak sütunu daraltın:) Şimdi karışıklığı önlemek için menü alanının üstüne tıklayarak “s” harfine basıp “LeftContent” idsini verin. Sonra içerik alanının üstüne gelip aynı işlemi “RightContent” için uygulayın. İçerik alanında yazı nasıl görünür diye merak ederseniz de alanın üstündeyken “c” harfine basın. Tek paragraflık bir lorem ipsumla alanın dolduğunu göreceksiniz. “Yok, bu yazı görünmesin” derseniz de “v” harfine basmanız yeterlidir.
* Aynı işlemleri ihtiyacınıza göre footer kısmına da uygulayabilirsiniz.
* Yaptığınız işlemlerin sonucunu üstteki menüden “NEW!Preview” a tıklayarak görebilirsiniz.
* Tüm işlemleriniz bittiğinde “Construct it!” linkine tıklayıp fırından yeni çıkmış CSS kodlarınızı tertemiz bir şekilde el edebilirsiniz. Şablonunuzu basitçe elde ettikten sonra biçimlendirmek sizin bilginize kalmış.
* Tüm kısayolların listesi ise aşağıdaki gibi.
- Yukarı ok — Önceki satırı seç
- Aşağı ok — Sonraki satırı seç
- Sol ok — Önceki sütunu seç
- Sağ ok— Sonraki sütunu seç
- J — Seçili sütunun boyunu kısalt
- K — Seçili sütunun boyunu uzat
- L — Float:left tanımalamsı yap
- Q — Yeni satır ekle
- W — Seçili satıra ID tanımlaması yap
- E — Satırı sil
- R — Seçili sütundan ID tanımlamasını kaldır
- A — Yeni sütun ekle
- S — Seçili sütuna ID tanımlaması yap
- D — Seçili satırı sil
- Z — <hr> ekle ve ya kaldır
- C — Seçili sütunu lorem ipsum metniyle doldur
- V —Metni sil
“Öğretici videosu olsa da izlesem” diyorsanız da buyrun buradan tıklayın!
