267 İnternet Teknolojileri
Web Developer & Design, SEO, Mobile, E-Commerce Software and Social Media

267.marpad

Az kod çok iş! Marpad'in altyapısının anahtar parçaları hakkında daha fazla bilgi edinin. Kolay, hızlı, kullanışlı, RESPONSIVE web uygulamaları geliştirin.

Genel Bakış

MarPad CSS'te kullandığımız margin ve padding özelliklerini kullanımını kolaylaştıran, CSS yazmaya gerek kalmadan HTML üzerinde sadece "class" kullanarak (varsayılan) "150px"'e kadar atama yapabileceğiniz bir yardımcı sınıftır.
bir HTML elementine aynı anda sağdan, soldan, yukardan, aşağıdan tekil veya çoğul margin veya padding özelliği atayabilirsiniz. Üstelik Marpad RESPONSIVE!

Başlayalım

<div class="m-10">
   <h4>Basit Kullanım, Yaşasın Marpad!</h4>
</div>
m-10 Class'ı {margin : 10px;} tüm çözünürlük ve cihazlar için CSS kodu demektir.

Mobile Uyumlu

Marpad'in kilit yönleri için isteğe bağlı mobil dostu stiller ekledik. Marpad projesini en başından itibaren mobil uyumlu olacak şekilde oluşturduk.
Ayrı çözünürlükler için stil eklemek yerine, Marpad çekirdeğinin içinde hepsini barındırır. Ayrıca, Bootstrap gibi mobil önceliklidir!

Marpad koduna, md, sm, xs medya stilleri ekleyerek kullanabilirsiniz.
md (medium) = tablet cihazları hariç ve üstü için
sm (small) = tablet cihazları ve üstü için
xs (xsmall) = sadece mobil cihazlar için

Detaylı Kullanım

Responsive Çözünürlükleri

Daha hızlı ve mobil uyumlu projeler geliştirme için ; margin ve padding gerektiren elementlerinize, farklı cihaz tanımlamaları için aşağıdaki medya stilleri gibi yararlı class'lar ekleyin.

  Ekstra küçük cihazlar
Mobil (<768px)		 Küçük cihazlar
Tablet (≥768px)		 Normal cihazlar
Masaüstü (≥992px)
.m-xs-20  
.m-sm-20    
.m-md-20  
.m-20       
<div class="p-80 p-xs-15 px">
    <b class="m-15 my">Canlı Marpad Demo!</b>
</div>
Canlı Marpad Demo!

Uygulamalar

HTML Elementlerine CLASS ekleyerek margin ve padding kullanımı.

Kolay Kullanım

<div class="p-10 m-5">Marpad!</div>
CSS Anlamı 
div {
   padding:10px;
   margin:5px;
}

Koordinatlar

(x,y) koordinatları kullanımı. Anlamı, x = [sol ve sağ], y = [üst ve alt]
Bu kullanımda yeni class aralığı ekleyin. mx, my, px, py

<div class="p-10 px m-5 my">Marpad!</div>
CSS Anlamı 
div {
   padding:0 10px;
   margin:5px 0;
}

Tekil Yönelmeler

(m)argin veya (p)adding için tek yöne değer vererek kullanım. (t)op, (r)ight, (b)ottom, (l)eft

.mt margin-top
.mr margin-right
.mb margin-bottom
.ml margin-left
  margin
.pt padding-top
.pr padding-right
.pb padding-bottom
.pl padding-left
  padding 
<div class="p-10 pl m-5 mb">Marpad!</div>
CSS Anlamı 
div {
   padding:0;
   padding-left:10px;

   margin:0;
   margin-bottom:5px;
}

Resposive Uygulamalar

Aşağıda, Sadece -xs- aralık class'ı ekleyerek kullanılmıştır.

Mobil cihazlarda 15px margin-bottom alt boşluk alacaktır. 
<b class="m-xs-15 mb">Canlı Marpad Demo!</b>
<b>Marpad Is Responsive!</b>
Canlı Marpad Demo! Marpad Responsive!

Aşağıda -sm- ve -xs- aynı anda kullanılmıştır.

Mobil hariç, Tüm cihazlar için 80px padding-left and padding-right sağ ve soldan aynı anda padding alacaktır. Mobil çözünürlükte ise padding 80px den 15px'e düşecektir. 
<div class="p-sm-80 p-xs-15 px">
    <b class="m-15 my">Canlı Marpad Demo!</b>
</div>
Canlı Marpad Demo!

Aşağıda -md-, -sm-, -xs- çözünürlükleri aynı anda kullanılmıştır.

Masaüstü (Tablet hariç ve üstü) için -md- 150px padding-left and padding-right sağ ve soldan boşluk alacak, -sm- tablet çözünürlüğünde 80px düşecek ve -xs- mobil cihazlarda 15px olacaktır. 
<div class="p-md-150 p-sm-80 p-xs-15 px">
    <b class="m-15 my">Canlı Marpad Demo!</b>
</div>
Canlı Marpad Demo!

Aşağıda margin auto ve padding inherit özelliklerine değinilmiştir.

Mobil hariç, tüm cihazlarda margin-left and margin-right sağ ve soldan auto özelliği alacaktır. padding için ise bu tanımlama p-auto, p-xs-auto vb. kullanımla inherit değerini alacaktır. 
<b class="m-sm-auto">Canlı Marpad Demo!</b>
<!--<b class="m-auto">Tüm çözünürlükler için ayrı bir örnek.</b>-->
Canlı Marpad Demo!

Marpad İndirmeleri

Marpad CSS

Medya sorguları içeren derlenmiş ve küçültülmüş CSS dosyası. Hiçbir doküman veya orjinal kaynak dosyası dahil edilmemiştir.

Marpad İndir

Marpad.js

Geliştirilebilir, Sıkıştırılmamış, açık kaynaklı javascript kütüphanesi. Hiçbir doküman veya orjinal kaynak dosyası dahil edilmemiştir.

Marpad.js İndir
 

License FAQs

Marpad is released under the 267 license and is copyright 2016 267 IT. Boiled down to smaller chunks, it can be described with the following conditions.

Açıklama ve Notlar

Marpad Açık kaynaklı opensource CSS kodundan oluşur.
Marpad az yer kaplayarak hızlı çözümler sunmak için tasarlanmıştır. Bu yüzden değer tanımlamalarına sınırlama getirilmiştir. Değersel olarak 0 dan (varsayılan) 150px'e kadar desteklemektedir.
Kullanırken 0, 1, 2...18, 19, 20'den sonra 5 ve katları şeklinde tanımlanabilir. Aynı zamanda bu aralığı değiştirebilirsiniz Marpad.js.
marpad.css v0.9.0 | 267 Lisans | 267.com.tr/Marpad