如何使用Bourbon Neat Framework首先进行移动

Question

我一直在使用波旁威士忌做一个桌面的第一个布局工作正常.

但是,我想做一个移动的第一个版本,从移动开始,然后继续努力.默认网格是12列,对于移动设备,我通常使用4的网格.我尝试将网格设置为4并扩展到12,但这不起作用.

除了创建标准桌面布局,然后将移动媒体查询放入每个CSS选择器并从移动版本开始并构建方式,是否有更好的方法来首先进行移动？

Answer 1

你应该用Neat的new-breakpoint mixin创建新的断点.但是,不像他们在示例中那样使用max-width,而是可以使用min-width.

例如:

@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;
  }
}

在示例中.main将具有白色背景并且由4列组成.当视口的宽度至少为760像素时,它将获得黑色背景并跨越8列.

Answer 2

要扩展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个col,而在原始的Neat设置中使用了4个(我在项目中进行了必要的操作).您应该定制这些设置以适合您自己的项目.但要点的是,我正在覆盖$grid-columns变量,然后创建新的断点.此外,一定要导入你的_grid_setting.scssBEFORE整洁......

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