Üstüste çok fazla site arayüzü kodladıysanız artık bilirsiniz ki bazı tanımlamaları tekrar tekrar kullanmanız gerekir. Örnek verecek olursam float, clearfix, bazı margin-padding değerleri sıkça kullandığımız özelliklerden. Bu durumda aynı tanımlamaları yeniden yaparak zaman kaybetmek yerine bunların hepsini önceden tanımlayıp tüm projelerimizde kullanabilir hale getirebiliriz.

CSS Frameworkler (İskelet/ Yapı/ Şablon)

Bu ihtiyacımızı gidermesi için hazırlanmış çok güzel iskeletler var. Bunlardan en çok kullanılanlara Blueprint, 960 Grid System, Yahoo, Emastic, Elastic örneklerini verebiliriz.

Ancak tüm bu iskeletlerin hepsi kullanacağınızdan fazla sayıda -aşağıdaki gibi- sütun genişliği, padding, margin vb tanımlaması yapar. (Bkz grid.css )

.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
...


.prepend-1 { padding-left: 40px;}
.prepend-2 { padding-left: 80px;}
.prepend-3 { padding-left: 120px;}
...


.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }


Kurumsal sitelerin ihtiyacı genelde iki ya da üç sutunlu ve sabit genişlikli yapılar oluyor. Bu yüzden kullanmayacağım tanımlamaların sitede bulunması gereksiz hale geliyor.

Ben de bu iskeletlerin mantıksal yapısını inceleyerek, edindiğim deneyimle ve ihtiyaçlarım doğrultusunda kendi css iskeletimi oluşturdum. Oluşturduğum yapı 3 temel stil dosyasından oluşuyor. Internet Explorer için hack yapmam gereken durumlar içinse ayrıca bir ie.css oluşturuyorum.

1. reset.css

Tüm tarayıcılar için etiketleri sıfırlamaya yarıyor.  Ben Meyer‘inkini kullanıyorum. Başka nasıl reset’ler var diye merak ederseniz de “reset css” yazıp aratabilirsiniz.
Bu dosya hiç bir projede değişmiyor.

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, samp,
small, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

:focus {
outline: 0;
}
body {
line-height: 1;
color: #000;
background: #fff;
}
ol, ul {
list-style: none;
}

table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

2. default.css

Tipografik tanımlamaları(header, text, link) ve sıkça kullandığım(float, clearfix, margin, padding) class’ları burada tutuyorum.
Bu dosyada projeye göre renklerin ve font boyutlarının değiştirilmesi gerekiyor.

/*  Crema Iletisim Hizmetleri ve Tasarim Tic. LTD. STI // http://www.crema.com.tr  */

body {font:normal 12px/16px Arial, Helvetica, sans-serif; color:#555} /*Göreceli font tanımlaması yapmak için: font-size:75%*/
h1,h2,h3,h4,h5,h6 {font-weight: bold; line-height:normal; color:#f00;}
h1 {font-size: 24px; margin-bottom:20px} /* font-size: 2em;  margin-bottom:1.8em vb*/
h2 {font-size: 20px; margin-bottom:16px}
h3 {font-size: 16px; margin-bottom:12px}
h4 {font-size: 12px}
h5 {font-size: 10px}
h6 {font-size: 8px}
a {text-decoration:none; font-weight: bold; font-size: inherit; line-height:normal; color:#03f; cursor:pointer}
a:link, a:visited {text-decoration:none}
a:hover, a:active {text-decoration:underline}

/* Ortak siniflar */
.float-left {float:left}
.float-right {float:right}
.clear {clear:both}
.text-left {text-align:left}
.text-right {text-align:right}
.text-center {text-align:center}
.dis-block {display:block}
.pos-rel {position:relative}
.pad-10 {padding:10px}
.mar-10 {margin:10px}
.w100 {width:100%}
.w100p {width:100px}

/*Yatay liste*/
.horizontal li {list-style-type:none; float:left; display:inline} /* List elemanını yatay kullandığım zaman gerekli*/

/*Dikey liste*/
.vertical li {list-style-type:none} /* List elemanını dikey ve bulletsız kullandığım zaman gerekli*/

/*clearfix*/
.clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0}
.clearfix {display: inline-block}
html[xmlns] .clearfix {display: block}
* html .clearfix {height: 1%}

3. layout.css

Kodlayacağım sitenin sütun yapısını(genişliği, sabit mi akışkan genişlikli mi?), oluşan temel parçaları (header, container, footer vb ) , alt parçaları (nav, sidebar vb) bu dökümanda tanımlıyorum.

Bu dosyada projeye göre sütun genişliklerini değiştirmem gerekiyor.

Genelde iki sütunlu bir yapı kullandığımız için aşağıdaki görselde belirtilen adlara göre tanımlama yapıyorum.

/*  Crema Iletisim Hizmetleri ve Tasarim Tic. LTD. STI // http://www.crema.com.tr  */

#wrapper{ }

/* header */
#header{ }
	#logo{}
	#icon-menu{}
	#icon-menu li{}
	#icon-menu li a{}

/* navigation */
#nav{ }
#nav ul{ }
#nav ul li{ }
#nav ul li a{ }
#nav ul li a:hover{ }

/* container */
#container{ }
	/* content */
	#content{}
	#content p{}
	#content a{}
	#content a:hover{}
	/* sidebar */
	#sidebar{}
	#sidebar ul{ }
	#sidebar ul{ }
	#sidebar ul li{  }
	#sidebar ul li a{ }
	#sidebar ul li a:hover{ }	

/* footer */
#footer{ }

Kaynak dosyasını indirin

Yazar Hakkında:  Merhaba Ben Gözde Berberoğlu. Crema'da user interface developer olarak çalışıyorum. Club Crema'da (X) HTML- CSS, SEO, web standartları hakkında deneyimlerimi ve bilgilerimi paylaşmaya çalışacağım. Beni aynı zamanda kişisel blogumdan ve Friendfeed'den de takip edebilirsiniz. Kod adı: gozde.css :)