バーボン・ニート・フレームワークで最初にモバイルを行う方法

Question

私は、うまく機能したデスクトップの最初のレイアウトを行うためにバーボンを使いました。

しかし、私はモバイルから始めて自分のやり方で作業している最初のモバイル版をしたいと思います。デフォルトのグリッドは12列ですが、モバイルでは通常4のグリッドを使用します。グリッドを4に変更して最大12までスケールアップしようとしましたが、これは機能しませんでした。

標準のデスクトップレイアウトを作成する以外に、まずモバイルを行うより良い方法はありますか？モバイルメディアのクエリを各CSSセレクタに入れ、モバイル版から始めて構築します。

Answer 1

Neatのnew-breakpoint mixinで新しいブレークポイントを作成する必要があります。しかし、例のようにmax-widthを使用する代わりに、min-widthを使用することができます。例えば

：例.mainで

@import "bourbon/bourbon"; 
@import "neat/neat"; 

$mobile: new-breakpoint(min-width 0px 4); 
$tablet: new-breakpoint(min-width 760px 8); 

.main { 
    background: grey; 

    @include media($mobile) { 
    @include span-columns(4); 
    background: white; 
    } 

    @include media($tablet) { 
    @include span-columns(8); 
    background: black; 
    color: white; 
    } 
} 

は白い背景を持っており、4列から構成されます。ビューポートの幅が760ピクセル以上の場合、黒い背景と8列のスパンが表示されます。

Answer 2

私は、ケネス・オーマンディーによってChasersを範囲指定します。それは少しomega-reset(xn)は、以前のメディアクエリのomega(xn)から "xn"を渡すことが含まれています。彼はgithubリポジトリに関する豊富なドキュメントを提供しており、BowerやNPMで簡単にインストールすることができます。

Answer 3

Jornの答えを展開するには... $grid-columns変数をデフォルトとして設定されているデスクトップ番号ではなく、モバイル幅番号に設定する必要があります。これは_grid_settings.scssファイルは、私が現在働いているプロジェクトのために次のようになります。

@import "../neat/neat-helpers"; 

// Neat Overrides 
$column: golden-ratio(1em, 3); 
$gutter: golden-ratio(1em, 1); 
$grid-columns: 6; 
$max-width: em(1280); 


// Neat Breakpoints 
$mobile-large-screen: em(480); 
$tablet-small-screen: em(560); 
$medium-screen: em(640); 
$medium-large-screen: em(750); 
$large-screen: em(860); 
$x-large-screen: em(970); 
$xx-large-screen: em(1088); 
$super-large-screen: em(1280); 

$mobile-large-screen-up: new-breakpoint(min-width $mobile-large-screen 6); 
$tablet-small-screen-up: new-breakpoint(min-width $tablet-small-screen 6); 
$medium-screen-up: new-breakpoint(min-width $medium-screen 12); 
$medium-large-screen-up: new-breakpoint(min-width $medium-large-screen 12); 
$large-screen-up: new-breakpoint(min-width $large-screen 12); 
$x-large-screen-up: new-breakpoint(min-width $x-large-screen 12); 
$xx-large-screen-up: new-breakpoint(min-width $xx-large-screen 12); 
$super-large-screen-up: new-breakpoint(min-width $super-large-screen 12); 

あなたは、私は新しいブレークポイントの多くを作成したとは対照的に、私は携帯幅で6つのCOLSを使用しています見ることができます私は自分のプロジェクトで何をしているのかが分かります。これらの設定は、自分のプロジェクトに合わせて調整する必要があります。ただし、私は$grid-columns変数をオーバーライドしてから新しいブレークポイントを作成しています。また、必ず_grid_setting.scssをインポートしてください。

@import "bourbon/bourbon"; 
@import "grid_settings"; 
@import "neat/neat";