Bootswatch ile Klasik Bootstrap'tan Kurtulun

Hiç yorum yok
Daha önceden paylaşmam gerektiğini düşündüğüm ve unuttuğum bir konu geldi aklıma; Bootstrap :)

Şimdide bootstrap ile ilgili bir şey paylaşmayı düşünmüyorum fakat bootstrap dosyalarında değişikliklerle stil değişiklikleri yapılarak oluşturulmuş klasik bootstrap görünümüne renk katmış, çokda güzel yaptıkları bir siteyi paylaşayım sizlerle. 

www.bootswatch.com

bootswatch.com 'a girdiğinizde Yukarıdaki bölümde Themes bölümünden kafanıza uygun olan beğendiğiniz bir temayı bulun. Daha sonra Download bölümünden css ya da less ya da scss dosyalarını indirin. Sonra beğendiğiniz tema ile ilgili olan sayfadan kullanmak istediğiniz içeriğin üstüne gelin ve sağ tarafında kopyalama işaretini gördüğünüzde basın ve yerleştirmek istediğiniz sayfanıza yapştırın gitsin.

Kullanımı bu kadar basit olan bootswatch.com u kesinlikle tavsiye ederim.

Tabikide önce www.getbootstrap.com 'dan bootstrap hakkında geniş ve detaylı bilgiye sahip olmakta fayda var.

Hiç yorum yok :

Yorum Gönder

LESS Kullanımı

Hiç yorum yok
LESS, CSS yazımınızı hızlandıracak, daha basit ve kullanışlı hale getirecek bir araçtır.
LESS ile değişkenler tanımlayabilir, mixinler oluşturabilir, tanımlı fonksiyonları kullanabilir, matematiksel hesaplar yapabiliriz..

Başka Alternatifler Var mı?
Elbette alternatif mevcut. Örneğin LESS yerine SASS kullanmayı seçebilirsiniz. Ancak ben LESS’i tercih ettim. Kullanımı ve kurulumu çok daha kolay zira.
Nasıl Kullanacağız?
Aslında karışık gibi gözüksede LESS çok basittir. Biz herhangi bir kurulum yapmadan JavaScript dosyasını sayfamıza dahil ederek kullanmaya başlayacağız. http://lesscss.org/ adresine girerek js dosyasını indirelim. Ya da direk linki alıp kullanabiliriz size kalmış.
<link rel="stylesheet/less" type="text/css" href="assets/styles/custom.less" />
<script src="assets/scripts/less-1.5.0.min.js" type="text/javascript"></script>
Unutmayın, LESS yazmak için bir derleyiciniz var ise, bu js dosyasına da ihtiyacınız yoktur!
Evet artık LESS ile CSS yazmaya başlayabiliriz! :)

Değişkenlerin Kullanımı

Değişken oluşturmak için @ koyup değişken adını yazıyoruz. Değer atamak için : işaretini kullanıyoruz.
@renk: #333444;
Kullanımı ise örneğin şöyledir;
.test {
    color: @renk;
}
Oluşturduğunuz bu değişkeni istediğiniz herhangi bir yerde başında @ işareti koyarak adıyla kullanabilirsiniz.

Mixin Kullanımı

Mixinler için bir nevi fonksiyon diyebiliriz. Sürekli yazmak zorunda kaldığımız işlemler için bir mixin tanımlayıp bunu o yerlerde basit bir şekilde kullanabiliriz..
Örneğin css3 özelliklerini kullanırken tarayıcı uyumları için -prefix (önekler) kullanıyoruz.. Buda her seferinde o özelliği 3-4 kez tekrar tekrar yazmamız anlamına geliyor. Ancak mixin oluşturursak bir kez mixin’de tanımlıyoruz daha sonra onu kolayca kullanıyoruz.

.display-inlinei7 {
    display: inline-block;
    #display: inline;
    zoom: 1;
}

.test {
   color: red;
   .display-inlinei7;
}
Bu işlemin css çıktısı şöyle olacaktır;
.test {
   color: red;
    display: inline-block;
    #display: inline;
    zoom: 1;
}

Parametreli Mixin Kullanımı

Oluşturduğumuz mixinlere parametrede gönderebiliyoruz.. Örneğin bir mixin oluşturalım;
.absolute (@left, @top: 10px){
    position: absolute;
    top: @top;
    left: @left;
}

.test {
    .absolute(100px, 25px);
}
Burada left ve top adında 2 parametre gönderdik.. Eğer : koyup değer girersek parametre gelmezse atadığımız değeri kullanır mixin..
Bu işlemin css çıktısı şöyle olacaktır;

.test {
    position: absolute;
    top: 25px;
    left: 100px;
}
Eğlenceli gelmeye başladı değil mi? Emin olun, CSS yazmayı çok daha kolay hale getirdiği gibi aynı zamanda eğlenceli hale de getiriyor :)

İçiçe Kurallar

Bir nesneye css uyguladıktan sonra o nesne içindeki başka bir nesneye css uygulamak için tekrar tekrar alt alta seçmek gerekir. Ya da hover, focus, active gibi işlemler için yeniden tanımlamak gerekir.
Ancak LESS’de içiçe yazım kuralı vardır ve bu benim en sevdiklerim arasındadır :)

Şimdi öncelikle normal bir menü örneğini css ile yapalım..
.menu {
    overflow: hidden;
    border: 1px solid #ddd;
}
.menu ul li {
    float: left;
    border-right: 1px solid #ddd;
}
.menu ul li a {
    display: block;
    padding: 10px;
    color: #111;
}
.menu ul li a:hover {
    background: #eee;
}
Şimdi ise aynı örneği LESS kullanarak yazalım.
@renk: #111;
.menu {
    overflow: hidden;
    border: 1px solid lighten(@renk, 80%);
    ul li {
      float: left;
      border-right: 1px solid lighten(@renk, 80%);
      a {
        display: block;
        padding: 10px;
        color: @renk;
        &:hover {
          background: lighten(@renk, 90%);
        }
      }
    }
}
Gördüğünüz gibi içiçe yazdık ve çok daha kullanışlı oldu. Burada sadece 1 ana renk tanımladık. Daha sonra LESS’in bize sunduğu lighten() fonksiyonu sayesinde açık hallerini elde edebildik.
Ayrıca hover için parent (üst nesneyi) & ile seçtiğimizi unutmayın.

Fonksiyonların Kullanımı

LESS’in sunduğu bir çok fonksiyon var ve çoğu da zamanla aklımızda kalacak ve sıklıkla kullanacağımız fonksiyonlar olacak. http://lesscss.org/#reference
Örnek bir fonksiyon kullanımını görelim.. Gerçi zaten yukarıda lighten() fonksiyonunu kullandık ama olsun!
.test {
   background: fadeout(red, 60%);
}
Burada kırmızı rengin %60 daha şeffaf halini arkaplan rengi olarak kullandık.

İşlemler

Matematiksel işlemler içinde LESS’i kullanabiliriz.. En basit örnekleri;
.test {
    padding: 5px * 2;
}
ya da
.test {
    width: (100% - 6) / 2;
}
 
 
 
Bu yayının komplesi http://www.erbilen.net adresinden alınmıştır. 

Hiç yorum yok :

Yorum Gönder

Less Öğreniyoruz ~ Kullanımı, değişkenler, sağlayıcılar, 1

Hiç yorum yok
Çok fazla alternatifi olmasına rağmen, ve her ne kadar daha geniş kullanım rahatlığı sunan alternatifleri olsa da Web tabanlı projelerinizin geliştirilmesinde önemli ölçüde kullanım rahatlığı ve erişilebilirlik sağlayan Javascript tabanlı bir güzellik olan LESS, bu yazı dizimizin yeni konusu. Bu yazı dizisinden sonra, LESS kullanarak Front End (Ön yüz) geliştirdiğiniz her projenin lezzetine daha başka kıvamda varmış olacaksınız.
Less nedir sorusuna en güzel cevabı ise bir kaç cümlede toplaryacak olursak; LESS, CSS yazımınızı hızlandıran / kolaylaştıran, kendine özgü sistematiği olan, CSS dosyası içerisinde değişkenler barındırabileceğiniz, ön tanımlı fonksiyonları kullanarak hesaplamalar yapabileceğiniz, kendinize özgü fonksiyonlar yaratıp değişkenleriniz ile tümleştirebileceğiniz, hesaplamalarınız için hesap makinesi kullanmak yerine, LESS ile matematiksel 4 işlemi sonuçlandırabileceğiniz harika bir araçtır.
Tabi LESS yerine SASS da kullanabilirsiniz, imla olarak çok benzeseler de yapısal olarak çok fazla ortak yönü olsa da hepsinin birbirinden ayrılan fazlalıkları / birbirine yetemedikleri eksiklikleri söz konusu. LESS tarafına daha fazla hakim olduğumdan öncelikle bir kaç makalede LESS hakkında bilgi paylaşımı yapıp bu esnada geliştirdiğim / geliştireceğim projelerde de SASS kullanarak, SASS hakkındaki birikimlerimi de daha fazla tecrübe ettikten sonra, başka bir yazı dizisinde de aktarmayı hedeflemiyor değilim…

LESS Kullanımı

Aslında çok fazla süslü cümlelerle hayranlıklarını anlatan insanlar olduğumuzdan LESS biraz karmakarışık gibi görünebilir ancak imlasını kavradığımız zaman muazzam kolay ve kullanılır olduğunu farkedeceksiniz.
İşin özünde server tabanına herhangi bir kurulum / eklenti / derleme gerekmeden LESS kullanılacak sayfaya bir javascript dosyası ekleyerek, LESS tabanı ile çalışmalarınızı haekete geçirebilirsiniz. Dikkat etmeniz gereken nokta burada less uzantılı stil dosyanızın less derlemesine yarayan javascript dosyasından önce sayfaya dahil edilmiş olması.
Kaynak Kodu
<link rel="stylesheet/less" href="assets/main.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
Dikkat ederseniz, stil dosyanızın rel etiketine, /less eki gelerek, .less uzantılı stil dosyanızı bu şekilde ssayfanıza dahil edebilirsiniz. Ardından Cloudflare aracılığı ile CDN LESS javascript dosyasınıda sayfanıza ekleyebilirsiniz. Tabi CDN kullanmak istemezseniz, bunu kendi klasörleriniz içinde barındırabilirsiniz.
Ekstra olarak bir javascript dosyası veya plugini kullanmak durumunda değilsiniz. Tamamen bu şekilde LESS javascript ek kütüphanesini sayfanıza dahil etmeniz kafi olacaktır.
LESS ile oluşturduğunuz stil dosyanızı daha sonra yardımcı araçlar veya online araçlar sayesinde compile (css e çevirmek) ederek less js dosyasını sistemden kaldırıp, normal .css uzantılı dosyanızı sisteme dahil ederek kullanabilirsiniz.İşte üstte de ifade ettiğim gibi, LESS yordamı ile kolaylıkla CSS yazıp projelerinizi geliştirme aşamasında hız kazanabilirsiniz.Ve dahasında LESS ile CSS yazmaya başlayabilirsiniz.
Her ne kadar ” Craig David – Less is more “ dese de, belki daha fazla satır kod yazmış olursunuz ama, kendi şarkısında da ifade ettiği gibi, LESS aslında fazlası manasını taşır ;) Buyrun örnek değişken mantığı ve kullanımını görelim… Parça için ise, youtube sayfasından şu linke göz atabilirsiniz.

LESS Değişkenleri

Değişkenler, diğer dillerde olduğu gibi başında değişken olduğunu niteleyen bir harfle kullanılıp alacağı değeri : işareti ile ayırarak yazılıyor LESS içinde.
Kaynak Kodu
// Bileşenler
@link-renk:        #428bca; // açık deniz mavi rengi
@link-renk-hover:  darken(@link-color, 10%);
 
// Kullanımı
a,
.link {
  color: @link-renk;
}
a:hover {
  color: @link-renk-hover;
}
.widget {
  color: #fff;
  background: @link-renk;
}
Üstteki örnek değişkenlerde, link ve link-hover şeklinde iki farklı değer kullandık. Tüm stil kalıbımız içerisinde, kullanmak istediğimiz her yerde eğer belirlediğimiz rengi o alanda kullanmak istiyorsak, vermiş olduğumuz link-renk değişkenini @ işareti ile birlikte kullanacağız.
Değişken eklemeleri / fazla değerler ile değişken kullanımları
Bir değişken için çoklu değerler de sağlamanız olası. Çoklu değerler vermek için ise, şu şekilde bir örnek kullanım olanağınız var.
Kaynak Kodu
// Değişken
@secici_degiskeni: solbar;
 
// Usage
.@{secici_degiskeni} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
Url yerine de bir değişken atayarak kullanım örneği de resmi siteden alınan şu örnekle ifade edilebilir;
Kaynak Kodu
// Değişken
@klasoryolu: "../img";
 
// Kullanım
body {
  color: #444;
  background: url("@{klasoryolu}/menu.png");
}
Import içinde değişken kullanımı ise şu şekilde;
Kaynak Kodu
// Değişken
@themes: "../../src/themes";
 
// Kullanım
@import "@{themes}/stil.less";
Aynı zamanda işi biraz daha fantezileştirmek isteyenleriniz de olabilir bunun için seçici ayarları kısmında da değişken kullanabilirsiniz.
Kaynak Kodu
@deger1: color;
@deger2: width;
@genislik: 300px;
 
.bilesen {
  @{deger1}: #0ee;
  background-@{deger1}: #999;
  #{deger2}: @{genislik}
}

Sağlayıcılar (Extend)

Aslında uygun kelimeyi seçemedim Türkçe karşılık olarak. En sağlıklısının extend karşılığı olarak sağlayıcı olduğuna kanaat verdim diyebilirim. Aslında diğer manası ile uzatmak anlamı da yakışır bu duruma. Örneklerden yola çıkarak kullanımı keşfettiğinizde zaten sizde aynı kanıya varacaksınız eminim.
Farklı seçiciler (sınıflar) içinde kullanılabilecek aynı zamanda da aynı sınıfa ait olacak seçiciler için extend kullanımı yapabilirsiniz.
Kaynak Kodu
.menu ul {
  &:extend(.icsecici);
  background: blue;
}
Bu örnekteki kullanımın çıktısında, menu sınıfı içinde aynı zamanda herhangi bir yerde kullanılan, .icsecici sınıfının özelliklerini de .menu sınıfı içinde kullanmış eşitlemiş olacaksınız. Çıktı alttaki gibi olacaktır.
Kaynak Kodu
.menu ul {
  background: blue;
}
.icsecici,
.menu ul {
  color: red;
}
Aslında, çoklu seçicileri, tek tek yazmak yerine, virgül ile aynı özellikteki seçicileri bu şekilde birleştirebiliyorduk, işte bu durumu extend özelliği bizler için gerçekleştirmiş oluyor. Aynı stil kalıbındaki eşleşen diğer değerleri de extend ile kombine edip toplamış oluyoruz kısaca.
LESS ‘in özelliklerini kullanarak yazdığınız iç içe seçiciler içinde kullanımı gayet kolay…
Kaynak Kodu
.sinif {
  tr { // iç içe yazılmış hedef seçici
    color: blue;
  }
}
.sinif2:extend(.sinif tr) {} // eşleşen değer toplamı
Tamamını etkilemek ve tamamı olarak aynı sınıfları kombine etmek isterseniz, extend all parametresini kullanmalısınız.
Kaynak Kodu
.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}
 
.toplanmislar:extend(.test all) {}
Aynı zamanda, extend’i Pseudo Class’lar içinde kullanabilirsiniz. (nth-child,hover,active,focus,placeholder gibi..)
Sağlayıcı olan extend’lerin mixinler ve fonksiyonlar ile de mükemmel bir ilişkisi var. Dizi yazısının diğer parçalarında, sistematiği ifade eden yazılardan sonra açıkçası bu konuya binayen örnekleri, de çoğaltacağız elbet. Ancak konuya hakim olanlar için less resmi sitesinden çokça örnek irdeleyebilirsiniz.
Resmi site adresi için buradan devam edebilirsiniz. Sonraki LESS Öğreniyorum serisinde görüşmek üzere.



Bu yayının komplesi http://www.fatihtoprak.com adresinden alınmıştır.

Hiç yorum yok :

Yorum Gönder

Bir bisiklet alacağım, acaba ne almalıyım?

Hiç yorum yok
Evet bende bir bisiklet almaya karar verdim artık. Size hangi tür nasıl hangi marka bir bisiklet alacağınız konusunda çok yardımcı olamayacağım fakat. Bende ilk kendime bu soruyu sorduğumda zaten bu konular hakkında paylaşım yapmış ve çok da güzel pek de güzel tavsiyeler vermiş olanları okuyarak kafamdaki sorulara cevaplar bulabildim. Ben sizi bu arkadaşlara yönlendireyim. Umarım sizede faydası olur.

Bu blok çok faydalı oldu benim açımdan. Kesinlikle göz gezdirmenizi tavsiye ederim.
http://bisikletimiz.blogspot.com.tr/

Bu linkte yukarıda bloğum başlıkla uyumlu hali ;
http://bisikletimiz.blogspot.com.tr/2012/07/bir-bisiklet-alacagm-acaba-ne-almalym.html

Bu konuyu ekşi sözlüktende bakmadan geçmeyin derim;

https://eksisozluk.com/bisiklet-alacaklara-tavsiyeler--2652633

Hiç yorum yok :

Yorum Gönder