如何使用波旁整洁框架做手机 [英] How to do mobile first with Bourbon Neat Framework

问题描述

但是，我想使用移动版的第一个版本，从移动版开始并努力工作。默认网格是12列，对于移动我通常使用网格4.我尝试改变我的网格为4和扩展到12，但这不工作。

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

$ grid-columns 变量到移动宽度数字，而不是设置为默认值的桌面号。这是 _grid_settings.scss 文件看起来像我目前正在处理的项目：

  @import../neat/neat-helpers; 
 
 //整洁覆盖
 $ column：golden-ratio（1em，3）; 
 $ gutter：golden-ratio（1em，1）; 
 $ grid-columns：6; 
 $ max-width：em（1280）; 
 
 
 //整洁断点
 $ 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）; 
  

你可以看到我创建了很多新的断点，宽度而不是在原始的整洁设置（必要的我在我的项目中的4）4。您应该定制这些设置为您自己的项目工作。外带虽然是我覆盖 $ grid-columns 变量，然后创建我的新断点。此外，请务必导入 _grid_setting.scss BEFORE Neat ...

  @importbourbon / bourbon; 
 @importgrid_settings; 
 @importneat / neat; 
  

I've been using bourbon neat to do a desktop first layout that worked fine.

However, I would like to do a mobile first versions, starting with mobile and working my way up. The default grid is 12 columns and for mobile I usually use a grid of 4. I tried changine my grid to 4 and scaling up to 12 but this didn't work.

Is there a better way to do mobile first other than creating the standard desktop layout, then putting a mobile media query into each CSS selector and starting with the mobile version and building up the way?

解决方案

To expand on Jorn's answer... you also need to set the $grid-columns variable to the mobile width number, as opposed to the desktop number that it is set as a default. This is what the _grid_settings.scss file looks like for a project I'm currently working on:

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

You can see I've created a lot of new breakpoints and I'm using 6 cols at mobile width as opposed to 4 in the original Neat settings (necessary for what I have going on in my project). You should tailor these settings to work for your own project. The takeaway though is that I'm overriding the $grid-columns variable and then creating my new breakpoints. Also, be sure to import your _grid_setting.scss BEFORE Neat...

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

这篇关于如何使用波旁整洁框架做手机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！