前面花了幾章篇幅討論Susy該怎麼用，
這次我們就直接進入實作吧，
首先我先找了個free的template：http://www.html5mania.com/dopetrope-free-html5-responsive-site-template/
考慮時間性與爆肝的程度，
預訂排版版型濃縮如下：
這裡分享的內容就是個人的經驗法則了，
畢竟susy只是個框架，該如何運用它還是得靠實務上的判斷：
觀察美術所提供的版型螢幕解析度
此版型的PC版是1200px，
我就會抓個人的Grid的習慣，
和美術討論是否能進行微調，
像以常見的grid的話
所以PC版本就變成為1200px/16(網頁預設字體大小) = 75em，
間距(gutter)我習慣設定為1em，就從12~16欄看是否有差不多的版型，
最後總得下面數值：
$total-columns: 15
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
.container
+container
編譯出的CSS
.container {
max-width: 74em;
padding-left: 1em;
padding-right: 1em;
margin-left: auto;
margin-right: auto;
}
設定好後，
再思考該怎麼設定@media query，
如果你不曉得該怎麼設定media query，
像在瀏覽英文網頁文章時，
網頁設計師會建議一行以45~75個字為主，
太多或太短都會造成閱讀上的不便，
所以這裡我就先設定一些比較熱門的螢幕解析度區間後，
再依照實際排版狀況來進行微調，
所以預設的螢幕解析度區間設定如下：
$total-columns: 5
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
$pad : 768px 12
$pc : 960px 15
.container
+container
+at-breakpoint($pad)
+container
+at-breakpoint($pc)
+container
//編譯出來的CSS
.container {
max-width: 24em;
_width: 24em;
...
｝
@media (min-width: 768px) {
.container {
max-width: 59em;
padding-left: 1em;
padding-right: 1em;
...
}
}
@media (min-width: 960px) {
max-width: 74em;
padding-left: 1em;
padding-right: 1em;
margin-left: auto;
margin-right: auto;
}
}
再來規劃版面UI：
通常我都是會把PSD列印下來，
然後先畫個HTML與CSS雛型再繼續，
想得差不多後就可以開始建置layout了，
先以手機版做起，畫面設計為off canvas為主：
HTML
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/default.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/all.js"></script>
<header class="header">
<div class="menu-control">open menu</div>
<h1>Dopetrope</h1>
</header>
<div class="container">
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">RightSidebar</a></li>
<li><a href="#">LeftSidebar</a></li>
<li><a href="#">No Sidebar</a></li>
</ul>
</nav>
<div class="main">
<div class="banner">
<p>
Lorem ipsum dolor sit amet, consectetur adipi<em class="test-color">sicing elit. Cupiditate, amet</em> dignissimos debitis laboriosam perferendis facere mollitia veniam velit repudiandae a veritatis officia harum cumque fugiat at. Debitis, accusamus dicta blanditiis.
</p>
</div>
<div class="product">
<section></section>
<section></section>
<section></section>
<div class="bar">
<a href="#">Get Stared</a>
<a href="#">Learn More</a>
</div>
</div>
<article class="blog">
<h2>BLOG</h2>
<section></section>
<section></section>
</article>
</div>
</div>
jQuery
//收合選單用
$(document).ready(function($) {
$( ".menu-control" ).on( "click", function() {
$('body').toggleClass('open');
});
});
--
接下來再來思考各區塊做RWD的設計：
menu
menu的部分已有講過，
會套入SUSY off canvas+jquery來實踐效果。
Banner
這區塊我先抽掉，裡面放純文字，
先觀察滿版情況下在各螢幕解析度上，
該設定那些字型大小，使用者瀏覽上才較舒適。
Product
mobile自然是1欄式垂直滾動，
pad則是2列2欄式，最下面的按鈕遞補進來在右下。
Pc再調整為原設計。
Blog
這個區塊的pad與pc大小我打算都設定為一列二欄式。
--
規劃完後就可以開始寫Sass哩，
明天會再統一講解這個部分，
大家晚安嘍^_^
iThome鐵人賽
看影片追技術