如何使用波旁整洁框架做手机 [英] How to do mobile first with Bourbon Neat Framework
问题描述
但是,我想使用移动版的第一个版本,从移动版开始并努力工作。默认网格是12列,对于移动我通常使用网格4.我尝试改变我的网格为4和扩展到12,但这不工作。
除了创建标准的桌面布局,然后将移动媒体查询放入每个CSS选择器中,从移动版本开始,并建立方式,是否有更好的方法来做移动优先?
_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屋!