Better Responsive Layout with Stylus mix

Why?問題是什麼

之前介紹過Bootstrap RWD 使用方法及原理,其實用class來控制頁面結構是很好的方法,假設你有在做客制化的模板或者後台可以讓網站管理員來選擇layout,這個時候用不同的class來增減應該是最方便的方法。

不過在多數情況下,針對單一案子,我們不太會有界面控制這個選項,所以暫時把這個顧慮拿掉,就是換句話說,網站的的每個結構和元素都是固定在一個關係下,這個時候,我們就可以寫個mix來控制全局的變化,至於為何要這樣做?原因是因為困擾了我很久的Responsive layout。假設我們要做一個結構是需要適應四種不同的尺寸,每個尺寸都有不同的寬度,這個時候如果我們用bootstrap的話mark大概如下

這一連串的class實在很可怕,假設網站是由很多個不同大小的方塊組成,那麼頁面的原始嗎就會充斥這種「不知名」的東西。那麼如果用css preprocessor來訂製自己Grid呢?

How Susy (sass) Way

Susy,是sass門下的grid system,主打能訂製自己的grid,不需要用到很奇怪的class,說白了就是用sass的@include來把每個寬度直接套入.post, Susy的大概會寫成這樣..

susy的概念很好,所以向susy致敬(鞠躬),在The Extend concept有很好而且完整的關於Extent的敘述。沒錯,我們接下來也要用這個概念。

Need more! Stylus

Stylus是一個非常聰明的css preprocessor, 它除了能做到sass和less的所有同時之餘,也吸取了前兩者的優缺點來開發,不過這篇文章不是來做比較和介紹Stylus而是直接介紹用stylus來customisation css grid layout。以下的stylus mix 主要是有以下幾項目的

  • 可以設定不同的寬度
  • Columns ordering
  • 可以設定不同的Breakpoint
  • 沒有用到的grid css是不會產生,只會直接調用mix裏面的grid

一般上就只需要以上的基本功能就可以了,所以我們直接來mix。

Stylus Responsive grid mix

Origin code

After stylus

如果你有興趣也可以到Github看獨立的示範,已經把這段額外建立一個檔案,方便參考用。
複製以上的mix然後可以看到output
Github
Try online
如果有任何建議或可以更簡化的方法歡迎留言和討論