ile

Tasarımı HTML5 ve CSS3′e dökmek (3) – Klasör yapısı, CSS Framework Seçimi

Tasarımcı arkadaşları psd kesmeleri için zorlayıp imajları, logoları, ikonları ve faviconları aldıktan sonra kullanmamız gereken css frameworküne karar vermemiz gerekiyor.

CSS çerçeveleri genellikle 960px genişliğinde ve bizim için ortalanmış ve sayfa bileşenleri için önceden 12’ye bölünmüş genişlikleri kullanabilmemizi sağlayan class’ları verirler. Ayrıca barındırdıkları @media-query’ler sayesinde (responsive) “tepkileşimli” yani gösterildikleri ekrana, cihaza, cihazın yatay/dikeyliğine göre bozulmadan görüntülenmelerini sağlayan hazır css sınıflarıdırlar.

960_grid_12_col_1

Ayrıca yazıların boşlukların her tarayıcıda aynı görünmelerini sağlayan reset.css sınıflarını da barındırırlar. Diyelim ki ben bütün css sınıflarını genişliklerini kendim ayarlamak istiyorum ve kesinlikle tasarımıma sınıfın müdahelesini istemiyorum diyorsanız o zaman, sadece reset.css ve modernizr.js, yani html5 taglerinin, html5 desteklemeyen tarayıcılarda görünmesini sağlayan html5boilerplate öneririm.

http://html5boilerplate.com/

Screen Shot 2014-03-06 at 21.18.04

İnternette kullanılan bir numaralı CSS Framework’ü kullanmak istiyorum, zerre tasarım yapmak istemiyorum diyen insanlar ne kullanır derseniz, evet insanlar Twitter Bootstrap 3 kullanıyorlar.

imgres

Fakat twitter bootstrap’in şöyle bir dezavantajı var. Tasarımı öldürüyor. Ben açıkçası base veya temaya oturtulmuş bootstrap kullanan bir site gördüğümde tasarıma önem verilmediğini düşünüyorum. Evet daha önceki HTML yazılarında twitter bootsrap 2 yi ben de kullandım ama Bootstrap artık o kadar yayıldı ki, siteniz kullanıcının aklında kalmıyor, herhangi 6000 siteden bir tanesi haline geliyor. Kaynak: http://css.dzone.com/articles/please-stop-using-twitter O yüzden ben artık bootstrap kesinlikle tavsiye etmiyorum.

Peki çözüm nedir? Hayır bu etkileşim işiyle uğraşmamı kolaylaştıracak gelişmiş ancak tasarımıma da müdahele etmeyecek, tasarım css’lerini ezmeyecek bir framework’e ihtiyacım var diyorsanız, foundation öneriyorum.

Screen-Shot-2013-03-21-at-12.22.52-PM

Öncelikle http://foundation.zurb.com adresinden foundation’u indirelim. Şimdilik “download” butonundan sonra, “download everything” butonunu seçelim

Foundation arşivini indirip, içine bir göz atalım.

Screen Shot 2014-03-06 at 21.32.26

Önceki yazıda indirdiğimiz font dosyalarını, fonts adı altında bir klasör oluşturup içine atalım. Daha sonra stylesheet.css’i de CSS klasörünün içine atalım. Bu dosyadaki “url(‘dosyaadi’)” şeklinde olan satırları da “url(‘../fonts/dosyaadi’)” şekline getirelim.

Gördüğümüz gibi arşivimizde karmaşık dosyalar vs. yok. index.html dosyasının içinde de foundation sınıfı ile yapabileceğimiz örnekler gösterilmiş. bu dosya şimdilik bi kenarda dursun. dosyanın adını example.html olarak değiştirelim. Siz kendiniz dosyanın içeriğine bakarak inceleyebilirsiniz, ancak burada foundation detaylarına girmeyeceğim.

Şimdi anasayfa tasarımı ile 12 sütun mantığını nasıl oturtabiliriz, bir bakalım:

grid

Şimdi tasarımcının gönderdiği, daha önce mantıksal olarak böldüğümüz tasarımı, görsel olarak grid’e yani 12 sütunlu ızgaraya oturtuyoruz. Gördüğümüz gibi tasarımda 8 adet satır var, ve bunların herbirini ayrı ayrı bölmemiz gerekiyor.


<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ARTINTERNATIONAL</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/stylesheet.css" /><!-- CSS dosyamızı buraya ekledik -->
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<header>
<div class="row">
<div id="main-slider" class="large-12 columns"></div>
</div>
<div class="row">
<nav id="summary-nav" class="large-12 columns"></nav>
</div>
<div class="row">
<div class="large-12 columns">
<nav id="summary-nav"></nav>
</div>
</div>
<div class="row">
<div id="main-logo" class="large-2 columns"></div>
<nav id="detail-navigation" class="large-10 columns"></nav>
</div>
</header>

<div class="row">
<div id="main-content" class="large-12 columns"></div>
</div>
<footer>
<div class="row">
<div id="summary-footer" class="large-12 columns"></div>
</div>
<div class="row">
<div id="detail-footer" class="large-12 columns"></div>
</div>
<div class="row">
<div id="copyright" class="large-4 large-centered columns"></div>
</div>
</footer>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Şu anda ilk çerçeve dosyamızı oluşturmuş olduk. Izgara(Grid) ve foundation mantığını sanırım anlamış oldunuz. Bir sonraki yazıda, logo, ikon, favicon gibi elemanları yerleştireceğiz. Bu dosyayı “index.html” olarak klasörümüzün içine kaydedelim.

Burada div tag’lerine genişlik vermek için kullandığımız large-12 veya large-10 gibi sınıflar, 3 ana tipten oluşuyor, large, medium ve small. Örneğin large-4 large-4 large-4 gibi 3 tane blok oluşturduğumuzda, bu blokarın büyük ekranlar için kesinlikle yanyana görüntülenmesini istiyoruz. Ama medium ve small ekran genişlikleri için bunu önemsemiyoruz. Eğer cep telefonu gibi küçük ekranları da illaki bölmemiz gerekiyorsa, herbirinin yanına smal-3 ve medium-3 sınıflarını da eklememiz gerekecekti. Ancak tepkileşimliliği, yani cep telefonunda, ipad’de sitenin bozulmamasını istiyorsak, bu blokların dar ekranlarda alt alta görüntülenmelerine de izin vermemiz gerekiyor.

Foundation ile ilgili daha detaylı bilgiler için:
http://foundation.zurb.com/docs/components/grid.html

Kaynakça:
http://www.sitepoint.com/best-web-designing-frameworks-2014/

Yorumla

Yorum

  1. Senin de yazdığın gibi html5 tüm tarayıcılarda desteklenmiyor; bunun için xhtml yazmaya devam ediyor birçok kişi. “modernizr.js” için ise, sadece “internet explorer” hatalarını önlüyor diye okumuştum. Kafam karıştı. Bu ne kadar doğru? Artık modernizr.js kullanırsak, html5’i tüm tarayıcılar destekler mi?

    Birde başka bir sayfada da böyle bir şey okumuştum; “…Yine bir önceki cümlemde yazdığım üzere kütüphane sadece yeni tagların IE tarafından tanınmasını sağlıyor, işlevsel olarak çalışmalarını sağlamıyor. Örneğin veya taglarının tanınmasını sağlıyor fakat bu tagların video oynatacağı anlamına gelmiyor.” Buna göre modernizr.js’nin tam olarak işe yaradığını söylemek mümkün mü?

    Xhtml’den devam etmek mi mantıklı, yoksa artık modernizr.js ile html5’den devam mı edelim?

    Teşekkürler 🙂

  2. Resimde birşey dikkatimi çekti. iki sütünlu yapıların 3 sütüna sahip olması gerekmiyor mu ? Framework’e yeni yeni ısınıyorum o yüzden sordum. Yani .psd de 3 lü sütun içine alınmış ta öyle değil mi acaba ?