Sass hakkında bu kadar makale yazdıktan sonra bir sayfa oluşturmak gerekti. * SASS ile Dinamik CSS Yazmak\ Sass'a giriş, sass kurulumu, sass derleme * Sass Klasör yapısı\ Sass sonrası klasör yapımız nasıl olmalı. * Sass mı SCSS mi\ Sass ve Scss arasında bir tercih yapılmalı. Sonuçta ikiside Sass * Compass kullanmıyorum \ Ünlü
CSS Dersleri
Sass'ın ve diğer CSS önişlemcilerinin başlangıçtaki sorunlarından biri de Chrome Developer Tools ve Firebug gibi araçlar ile öğeyi incele dediğimizde kaynak dosyadaki yerini değilde üretilen .css dosyasındaki yerini göstermesidir. Buda bizim için büyük bir sorun. Hayatımıza ilk giren Firebug'ın en büyük getirisiydi tarayıcı üzerinden düzenleme ve
CSS Dersleri
Sass ve CSS önişlemcilerin en önemli getirilerinden biri değişkenlerdir. CSS4 ile birlikte geliştirilmekte olan değişken tanımı var ancak biraz daha kullanışlı olsa iyi olurmuş. Tarayıcı desteğini beklemeliyiz kullanmak için. Bir çok programlama dilinden de alışık olduğumuz değişkenleri Sass sayesinde CSS'te de kullanabiliyoruz. Değişkenler, kod içindeki tekrar tekrar yazdığımız
CSS Dersleri
Compass; Sass'ın araç kutusu gibi tanımlayabiliriz. Önek sorununa çözüm oluşturan mixinleri, otomatik sprite yapma imkanı, dikey hizalama kolaylıkları, kolay ızgara sayfa planları sunan bir Sass araç kutusu olarak tanımlanabilir. Ayrıca eklenti desteği yardımı ile daha fazla geliştirilebilen bir araç kutusu. Peki ben niye Compass kullanmıyoum. Compass'ın
CSS Dersleri
Sass ile kod yazmaya başlarken ikileme düşüren bir sorun. Sass mı kullansam SCSS ( Sassy CSS - Sass'lı CSS ) mı kullansam tercihidir. Sass ilk kodlanmaya başladığında Haml ile birlikte çıktığı için söz dizimi benzer şekilde uygulanmış ve uzantıları .sass olarak üretilmeye başlanmış. Sonra Sass 3 ile birlikte SCSS kullanılmaya
CSS Dersleri
Bir önceki yazımda Sass'a giriş yapmıştık. Bu makale de klasör yapımızın Sass sonrası nasıl olması gerektiğini gösterelim. Klasör yapısını baştan ayarlamak her zaman iyidir. Her ne kadar ben burada bir yapı sunsam da klasör yapısı geliştiricinin kendi çalışma şartlarına göre esnetip yenilemesi gerekir. CSS ile kod yazarken dosyaların
CSS Dersleri
Üç adet popüler CSS önişlemcisi var. SASS, LESS ve Stylus. Dinamik CSS yazımı ile ilgili daha önce Stylus ile ilgili bir makale yazmıştım. Stylus yazımda da belirttiğim gibi bunlardan birini tercih etmek yeterli bence. Birbirlerine olan üstünlükleri çok ayırt edici değil. Sass'ın diğerlerine göre ilk olmak ve çok
Nodejs ve npm'i anlattıktan sonra Bower'ı anlatmamak olmaz. Bower için npm'in arayüz geliştiriciler için olanı demek yanlış olmaz herhalde. Javascript'in sunucu tarafına geçmesi ile arayüz geliştiriciler daha çok otomatize olmaya başladı. Birçok projemizde javascript ve css kütüphaneleri ve eklentileri kullanıyoruz. Kullandığımız bu
CSS Dersleri
CSS'in devamlı geliştirilmekte olmasının avantajları ve dezavantajları var. Dezavantajlara flex özelliğinin 3 kere değişmesini gösterebiliriz. Avantajları çok tabi. Bunlardan bir tanesine örnek bu makalenin konusudur. Artalan resimlerinin konumlandırmasında bazı sorunlar vardı. Bu sorunları görerek mevcut tanım geliştirildi. Daha önce anlattığımız artalan tanımına artı özellikler eklendi. {% highlight css %} div
Nodejs
{: .resimler-sagda} Arayüz geliştiricileri olarak yoğun bir şekilde javascript kullanıyoruz. Birçok javascript kütüphanesini kullanıyoruz, peki sunucu taraflı kodlama da javascript kullanılsa nasıl olur? Bu soruya cevap zaten "nodejs var" diyenlere aferin :D Peki ama "Nodejs sunucu taraflı javascript biz arayüz geliştiriyoruz ne işimiz olur?" demeyelim, okumaya devam.
CSS Dersleri
Daha önce denediğimde bazı tarayıcıların sorun çıkardığını hatırlıyorum. Aklımda öyle kalmış. Bundan dolayı bu özelliği bugüne kadar hiç kullanmadım. Bir iş dolayısıyla kullanmam gerektiğinde çalıştığını görünce sevindim. Hatta denedeğim tüm tarayıcılarda (IE8 dahi) çalıştı. 2006'da yazdığım CSS'de Metin(Text) Özellikleri yazısından text-transform'dan bahsetmişim. Kod
Angularjs
Bir önceki makale paylaştığım Angularjs ipucunda kullandığım kodları renklendirmek ve kod bloku olduğunu göstermek için jekyll'de kullandığım kodlar sorun oluşturdu. Kodları göstermek yerine yorumladı. Bunu engellemk için aşağıdaki şekilde yazmam gerekti. Jekyll ve Angularjs kullananların işine yarar. Kaynaklar * http://www.ngroutes.com/questions/AUuADqEOa5vEqxqlK7u2/change-start-and-end-symbol-in-jekyll-to-avoid-angular-conflict.html