ile

Profesyonel bir görünüm için CSS kütüphanelerini kullanalım

Birçok sitede kullanılan ve birçok ihtiyaca cevap veren CSS kütüphaneleri var. Sitemizle ilgili herşeyi tek tek yazmak yerine daha önceden test edilmiş ve onaylanmış bu kütüphaneleri kullanmak verimliliğimizi artırıyor. Bu CSS kütüphaneleri hem bize kolaylık sağlıyor, hem de profesonel bir görünüm sağlıyor.

Gelelim bu kütüphanelerin çalışma prensiplerine. Bu kütüphaneler genellikle sayfayı artık standart olmuş sayı olan 960 piksel boyuna getiriyor. Peki neden 960? Çünkü istendiği gibi bölünebilen bir sayı da ondan. Genellikle 24 parçaya ayrılan sayfa boyunda istendiği gibi kutu genişlikleri birbirinin üzerine çakışmayacak şekilde ayarlanabiliyor. Yazı tipleri, kutu kenarları ayarlı olduğu ve birçok tarayıcıda da test edildikleri için, sayfamız hangi tarayıcıda nasıl görünecek diye bir derdimiz de kalmıyor. Hatta öyle kütüphaneler var ki, responsive yani iphone için ayrı, android için ayrı, ipad için ayrı arayüz sağlayarak sayfamızın her platformda çalışmasını garanti ediyor.

Ben projelerimde Twitter Bootstrap kullanıyorum. Birçok web uygulamasında tercih edilen bu kütüphane twitterin kendi arayüzünde kullanılan resmi CSS kodu aslında. Twitter geliştiricileri bu kodu açık kaynaklı olarak da kullanıma açmışlar. Bu kütüphaneyi kullanabilmemiz için bir önceki derste anlattığım temel CSS bilgisini de bilmemiz yetiyor.

Şimdi gelelim bu kütüphaneyi nasıl kullanacağımıza. Daha önce dediğimiz gibi CSS biçimlerini style etiketleri içinde kullanbiliyorduk. Ancak birden fazla sayfayı aynı biçimle yönetmek istersek bu yöntem sorun olur. Hem gereksiz kod tekrarı, hem de sunucu alanı kaybı. Üstelik kodda değişiklik yapmak istersek binlerce html dosyasını değiştirmeye çalışmak eziyet olur. Bu yüzden birden fazla dosyadan tek bir css dosyasına ulaşmak istediğimizde head etiketinin içine aynı klasörde oluşturduğumuz css dosyasının adresini şu şekilde yazmamız gerekiyor.

<link rel="stylesheet" href="common.css" type="text/css">

CSS kodumuzu bu şekilde çağırıyoruz. Peki Twitter Bootstrap kütüphanesini kullanmak için ne yapmamız gerekiyor? Adım adım anlatmak gerekirse:

1. Önce http://twitter.github.com/bootstrap/index.htmladresinden kütüphaneyi indirelim.
2. bootstrap.zip dosyasını açalım ve içindeki css, js, ve img dizinlerini  index.html olarak kaydettiğimiz html sayfamızın bulunduğu dizine kopyalayalım.
3. Sitede söylendiği şekilde head etiketinin altına aşağıdaki kodları ekleyelim:

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

4. Daha sonra yine sitede gösterildiği şekilde body etiketinin kapandığı </body> etiketinin hemen üstüne aşağıdaki js çağırma kodlarını ekleyelim:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

Burada dikkati çekmek istediğim bir nokta var. JS kodlarını bu şekilde çağırıyoruz. Yani Script etiketi ve src özelliklerini kullanarak. Ancak bir diğer dikkat etmemiz gerek nokta, js çağıran veya içeren script kodlarını sayfanın sonuna ekliyor oluşumuz. Bu tüm sayfa etiketlerinin yüklendikten sonra javasScript kodunun doğru çalışmasından emin olmamızı sağlıyor. Peki javaScript nedir diye soruyorsanız korkmayın onu da zamanı geldiğinde anlatacağım. Şimdilik bu kadarını bilmemiz yeterli.

Bütün bunları yaptıktan sonra sayfamızın kodlarının nasıl göründüğüne bir göz atalım:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Kızılyıldız İstanbul, Sirkeci'de faaliyet göstermekte olan tasarıma önem veren yenilikçi matbaa şirketi. Başlıca ürünlerimiz: Davetiye, Ajanda, Poster ve El ilanı"/>
    <meta name="keywords" content="kızılyıldız, kızıl, yıldız, matbaa, baskı, ajanda, davetiye, poster, ilan, istanbul, sirkeci"/>
    <title>Kızılyıldız Matbaacılık A.Ş.</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="sayfa">
        <header>
            <div id="logo">
                <img src="logo.jpg" alt="Logo" />
            </div>
            <hgroup>
                <h1>Kızılyıldız</h1>
                <h2> Matbaacılık A.Ş.</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="urunler.html">Ürünlerimiz</a></li>
                    <li><a href="haberler.html">Duyurular</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                    <li><a href="iletisim.html">İletişim</a></li>
                </ul>
            </nav>
        </header>
        <aside>
            <div id="iletisimTel">
                <div id="tel">Tel: +90 212 444 19 17</div>
                <div id="fax">Fax: +90 212 444 19 05</div>
            </div>
        </aside>
        <section id="icerik">
            <div id="mesaj">
                <h1><strong>İstanbul'daki en hızlı, en kaliteli ve en uygun fiyatlı matbaayı mı arıyorsunuz?</strong></h1>
                <a href="urunler.html">Ürünlerimizi inceleyin</a>
            </div>
            <div id="bilgiler">
                <article id="neyapiyoruz">
                    <h3>Ne yapıyoruz?</h3>
                    <p>İstanbul'dasınız, davetiye, broşür, poster veya el ilanı'na ihtiyacınız var. Hem de 3 günde. Fiyatı da biraz uygun olsun ama sonuçlar temiz mi olsun? O zaman doğru yere geldiniz.</p>
                </article>   
                <article id="neredeyiz">
                    <h3>Neredeyiz?</h3>
                    <p>İstanbul'un tarihi merkezi Sirkeci'deyiz. Ama mesafeler sorun değil. Siz bize gelemezseniz, biz size geliriz. Siparişim ayağıma gelsin diyorsanız, o da olur. </p>
                </article>  
                <article id="farkımız">
                    <h3>Bizim farkımız</h3>
                    <p>Kesin kalite garantisine ihtiyacınız varsa, ücretsiz motorsikletli kuryeyle baskı işlerim gönderilsin diyorsanız, fiyatlar uygun olsun ama fazla da gecikmesin 3 gün içinde elimde olsun istiyorsanız, aradığınız yer burası. </p>
                </article>  
            </div>
        </section>
        <footer>
            <nav>
                <ul>
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                </ul>
            </nav>
            <div id="iletişim">
                <div id="adres">
                    Adres:
                    Kızılyıldız Matbaacılık A.Ş.
                    Denizler Mah.
                    Eren Sok. No:68
                    Sireci, Fatih 34110
                    İstanbul TÜRKİYE
                </div>
                <div id="telefon">
                    Tel: +90 212 444 19 17
                    Fax: +90 212 444 19 05
                </div>
            </div>
            <div id="copyright">Her Hakkı Saklıdır. 2012 Kızılyıldız Matbaacılık A.Ş.</div>
        </footer>
    </div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Sayfamızın son görüntüsü de şu şekilde:

Gördüğümüz gibi fontlar, bağlantılar daha bir güzel ve modern görünüyor. Bu da Twitter Bootstrap kütüphanesi sayesinde oldu.

Eğer Google Chrome veya Firefox kullanıyorsanız, herhangi bir yazının üzerine sağ tıkladığınızda öğeyi incele bağlantısına tıklarsanız, geliştirici araçlarına ulaşırsınız. Bu aracı kullanmayı web geliştirme öğrenmek isteyen birinin kesinlikle bilmesi gerekiyor. Görsel öğrenin arkasındaki kodu alenen görebilmemizi sağlıyor.

İşte bunu açtığımızda Twitter Bootstrap’ın yaptığı işleri görebiliriz. Burada da h1, h2 ve diğer etiketleri düzenleyen css kodlarını görüyoruz.

Şimdi siz de css dizini içindeki bootstrap.css dosyasını açın, kurcalayın ve nasıl çalıştığını görün. Bir sonraki yazıda kütüphaneyi kullanarak sayfamızı tamamlayacağız.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum