Grid Helper

這裏將會提供一些 class,以供某些情況下能夠使用。Grid每一個Columns以及欄位都有內建 clear 以及 position: relative,預防子層元件使用 float 或是 position: absolute 時發生錯誤情形。


Show / Hide

經常在不同的設計區域會在不同的螢幕寬度時做不同的顯示,有時可能在小裝置需要出現,到大裝置時不需要,像是選單,這時需要一些 class 來協助做這件事情。

只在某寬度條件下時顯示

.show-[a]-[b] [a] 代表的是不同寬度下的代號,[b] 代表的是不同的 display狀態,當我們單純使用 display: block 時,如果用在 table 上時,會發生顯示上的錯誤,因此必須要針對不同元件的 display 屬性使用不同的 class感謝 PK 的提問,讓我想到這件事情。

< 768px 768px ~ 991px 992px ~ 1159px ≥ 1200px
[a] xs sm md lg
Mobile Desktop
[a] mb dt

.show-[a]-* 預設皆為 display: none !important;,只有在下方表格符合的條件下,才會顯示。

< 768px 768px ~ 991px 992px ~ 1159px ≥ 1200px
.show-xs-* 顯示 隱藏 隱藏 隱藏
.show-sm-* 隱藏 顯示 隱藏 隱藏
.show-md-* 隱藏 隱藏 顯示 隱藏
.show-lg-* 隱藏 隱藏 隱藏 顯示
Mobile Desktop
.show-mb-* 顯示 隱藏
.show-dt-* 隱藏 顯示

Class 名稱 Class 屬性 備註
.show-[a] display: block; 用在 table 時,會改為 display: table;
用在 tr 時,會改為 display: table-row;
用在 tdtd 時,會改為 display: table-cell;
.show-[a]-block display: block;
.show-[a]-inline display: inline;
.show-[a]-inline-block display: inline-block;
.show-[a]-table display: table;
.show-[a]-row display: table-row;
.show-[a]-cell display: table-cell;
.show-[a]-flex display: flex; 因為 flex 支援度的關係,所以會產生以下 css 內容:
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox; // IE10
display: -ms-flex; // IE11
display: flex;
.show-[a]-inline-flex display: inline-flex; 因為 flex 支援度的關係,所以會產生以下 css 內容:
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox; // IE10
display: -ms-inline-flex; // IE11
display: inline-flex;

只在某寬度條件下隱藏

.hide-[a] [a] 一樣代表的是不同裝置下的代號。.hide-[a] 不需要指定屬性是因為...就都是 display: none;

< 768px 768px ~ 991px 992px ~ 1159px ≥ 1200px
.hide-xs 隱藏 顯示 顯示 顯示
.hide-sm 顯示 隱藏 顯示 顯示
.hide-md 顯示 顯示 隱藏 顯示
.hide-lg 顯示 顯示 顯示 隱藏
Mobile Desktop
.hide-mb 隱藏 顯示
.hide-dt 顯示 隱藏

欄位置中

如果要在某個 .columns-* 內的全部 .col-* 置中,請在加上 .columns-* 加上 .cols-centered,如果是針對某個 .col-* 置中時,只要在 .col-* 加上 .col-centered

.col-6
.col-8
<div class="columns-12 cols-centered">
    <div class="col-6"></div>
    <div class="col-8"></div>
</div>
.col-6 .col-centered
<div class="columns-12">
    <div class="col-6 col-centered"></div>
</div>

當需要在某個寬度範圍做置中時,可以使用 .cols-*-centered 或是 .col-*-centered,例如 .cols-xs-centered 或是 .col-sm-centered

.col-6 .col-sm-centered
<div class="columns-12">
    <div class="col-6 col-sm-centered"></div>
</div>

使用 .col-mb-.col-dt-

.col-6 .col-mb-centered
.col-6 .col-dt-centered
<div class="columns-12">
    <div class="col-6 col-mb-centered"></div>
    <div class="col-6 col-dt-centered"></div>
</div>

消除間距

當不需要欄位之間的間距時,請在 .columns-* 上加上 .cols-collapse,如果只針對某個 .col-* 消除間距,可以在該 .col-* 加上 .col-collapse

.col-6
.col-6
.col-4
.col-8
.col-2
.col-10
<div class="columns-12 cols-collapse">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-4"></div>
    <div class="col-8"></div>
    <div class="col-2"></div>
    <div class="col-10"></div>
</div>
.col-6
.col-6
<div class="columns-12">
    <div class="col-6 col-collapse"></div>
    <div class="col-6 col-collapse"></div>
</div>

當然你也可以針對不同寬度範圍做消除間距,只要加上 cols-*-collapse 或是 .col-*-collapse,例如 .col-sm-collapse

.col-6
.col-6
<div class="columns-12">
    <div class="col-6 col-sm-collapse"></div>
    <div class="col-6 col-sm-collapse"></div>
</div>

另外,可針對垂直或水平間距做消除,例如:.col-collapse-v 或是 .col-collapse-h

<div class="columns-12">
    <div class="col-6 col-sm-collapse-v"></div>
    <div class="col-6 col-sm-collapse-h"></div>
</div>

使用 .col-mb-.col-dt-

.col-6
.col-6
<div class="columns-12">
    <div class="col-6 col-mb-collapse"></div>
    <div class="col-6 col-dt-collapse"></div>
</div>

強制排首

強制把某一個欄位放置最左側,只要在 .col-* 加上 .col-first

.col-6
.col-6 .col-first
.col-6
<div class="columns-12">
    <div class="col-6"></div>
    <div class="col-6 col-first"></div>
    <div class="col-6"></div>
</div>

一樣能夠針對不同寬度範圍做強制排首,只要加上 .col-*-first,例如 .col-sm-first

.col-6
.col-6 .col-sm-first
.col-6
<div class="columns-12">
    <div class="col-6"></div>
    <div class="col-6 col-sm-first"></div>
    <div class="col-6"></div>
</div>

使用 .col-mb-.col-dt-

.col-6
.col-6 .col-mb-first
.col-6 .col-dt-first
<div class="columns-12">
    <div class="col-6"></div>
    <div class="col-6 col-mb-first"></div>
    <div class="col-6 col-dt-first"></div>
</div>

巢狀排列

當你需要在 Grid 裡面放置其他 Grid 時,可以直接放置到 Columns裡,並且可以隨意使用不同種類的 Columns。

.col-2
.col-10
.col-3
.col-4
<div class="columns-12">
    <div class="col-2"></div>
    <div class="col-10">
        <div class="columns-7">
            <div class="col-3"></div>
            <div class="col-4"></div>
        </div>
    </div>
</div>

IE 支援

IE 8 因為不支援 @media query,所以 .col-sm-* , .col-md-* , .col-lg-*無法使用,但是應該也不會有人無聊一直在 IE 8 上不斷縮放視窗吧?但是當視窗超過 1200px 時,欄位間距會自動改為 30px,並且 .container 的最大寬度會改為 1152px。對於 IE 8 只針對畫面超過 1200px 時,做相對應的處理。

如果有人真的需要 IE 8 版本的 Grid,我可以寫給你,但你要跟你的客戶或主管說,請他們拿出有 IE 8 的行動裝置,而且拿出能看的市佔率出來 XD。(其實我之前大概太無聊有寫出來過...)


Lazy 預設所有標籤都是 box-sizing: border-box;,Grid 的間距都是每個 Column 設定內距而來,在IE8 以下版本因為不支援 box-sizing 並且移除內距,如果,很不幸的你需要支援 IE7,那麼你可以在每一個 Column 底下多加一層 .col-box,這個 Class 只有在 IE 8 以下版本才會有作用。

.col-2
.col-10
<div class="columns-12">
    <div class="col-2">
        <div class="col-box"></div>
    </div>
    <div class="col-10">
        <div class="col-box"></div>
    </div>
</div>