CSS

【CSS】フレキシボックスレイアウトに基づいたモバイルファーストグリッドシステム。Foxgrid

June 7, 2016
FOXGRID

Foxgridはフレキシボックスのレイアウトに基づいたレスポンシブ対応のモバイルファーストグリッドシステムです。

Breakpoints

6つのモバイルファーストブレークポイント

$breakpoints: (
    xxs: '', // default
    xs: '640px',
    sm: '768px',
    md: '992px',
    lg: '1200px',
    xl: '1600px'
);

次のメディアクエリーで使用できます。

/* Extra extra small devices (less than 640px)
No media query since this is the default */

// extra small devices (640+ px)
@media (min-width: map-get($breakpoints, xs) { ... }

// small devices (tablet in portrait, 768+ px)
@media (min-width: map-get($breakpoints, sm) { ... }

// medium devices (small desktops, tablet in landscape, 992+ px)
@media (min-width: map-get($breakpoints, md) { ... }

// large devices (desktops, laptops, 1200+ px)
@media (min-width: map-get($breakpoints, lg) { ... }

// extra large devices (large desktops, 1600+ px)
@media (min-width: map-get($breakpoints, xl) { ... }

Columns wrapping
foxgrid_1

No gutter
foxgrid_2

Fluid

Percent based widths

<div class="row">
    <div class="col-12 col-sm-6"></div>
    <div class="col-12 col-sm-6"></div>
    <div class="col-12 col-sm-4"></div>
    <div class="col-12 col-sm-4"></div>
    <div class="col-12 col-sm-4"></div>
</div>

foxgrid_3

Auto widths
<div class="row">
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
</div>

<div class="row">
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
</div>

foxgrid_4

Mixed sizing
<div class="row">
    <div class="col-6"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
</div>

<div class="row">
    <div class="col-auto"></div>
    <div class="col-6"></div>
    <div class="col-auto"></div>
</div>

<div class="row">
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-auto"></div>
    <div class="col-8"></div>
</div>

foxgrid_5

その他詳しい使い方は下記から御覧下さい。