@ braid / griddle-scss的Vue.js实现，带有可切换的视觉覆盖

Vue Griddle (Vue Griddle)

A helpful grid system for your front-end development. Comes with a nifty overlay to help you visualize your project's grid as you're working.

对您的前端开发有用的网格系统。 带有漂亮的覆盖层，可帮助您在工作时可视化项目的网格。

View Demo 查看演示 View Github 查看Github

安装与配置 (Installation & Configuration)

Vue Griddle is a semantic grid leveraging Sass meaning it depends on your vue project having a webpack build process with the following dependencies:

Vue Griddle是利用Sass的语义网格，这取决于您的vue项目是否具有Webpack构建过程，并具有以下依赖性：

• node-sass

  node-sass

• sass-loader

  sass-loader

Once those dependencies are installed and properly configured with webpack, install @braid/vue-griddle with npm:

一旦安装了这些依赖关系并使用webpack对其进行了正确配置，请使用npm安装@braid/vue-griddle griddle：

npm install @braid/vue-griddle

then import and include the .vue component directly it in your project.

然后导入.vue组件并将其直接包含在您的项目中。

import Griddle from '@braid/vue-griddle/src/Griddle.vue'

nuxt.js layouts/default.vue example:

nuxt.js layouts/default.vue /default.vue示例：

<template>
  <div>
    <nuxt />
    <Griddle />
  </div>
</template>

<script>
import Griddle from '@braid/vue-griddle/src/Griddle.vue'

export default {
  components: {
    Griddle
  }
}
</script>

In your global styles, include the .scss file for supporting styles and variable definitions:

在全局样式中，包括.scss文件以支持样式和变量定义：

@import "path/to/node_modules/@braid/griddle-scss/scss/griddle";

In order for the overlay to show, you probably want to include the base overlay styling as well:

为了显示叠加层，您可能还希望包括基本的叠加层样式：

@import "path/to/node_modules/@braid/griddle-scss/scss/griddle-default-overlay";

All combined together, your structure will probably look something like this:

结合在一起，您的结构可能看起来像这样：

@import "griddle-overrides";
@import "path/to/node_modules/@braid/griddle-scss/scss/griddle";
@import "path/to/node_modules/@braid/griddle-scss/scss/griddle-default-overlay";
@import "another-sass-file";
@import "another-sass-file";
// etc

You can override the following variables by declaring your own values before the Griddle .scss import. it is recommended to put these overrides into their own file so that you can easily ensure that they come immediately before the main griddle.scss file.

您可以通过在Griddle .scss导入之前声明自己的值来覆盖以下变量。 建议将这些替代放置在它们自己的文件中，以便您可以轻松地确保它们位于主griddle.scss文件之前。

// these values can usually be found in your design program of choice under
// "layout" or "grid" settings
$g-max-column-width: 72px !default;
$g-max-gutter-width: 32px !default;
$g-column-count: 12 !default;
$g-max-body-width: ($g-column-count * $g-max-column-width) + (($g-column-count - 1) * $g-max-gutter-width) !default;

$g-breakpoints: (
  'base': (
    'inset': 1em
  ),
  'xs': (
    'width': 375px,
    'inset': 1em,
  ),
  's': (
    'width': 575px,
    'inset': 1.5em
  ),
  'm': (
    'width': 768px,
    'inset': 2em
  ),
  'l': (
    'width': 1024px,
    'inset': ($g-max-column-width / $g-max-body-width) * 100%
  ),
  'xl': (
    'width': 1380px,
    'inset': auto
  ),
  'xxl': (
    'width': 1600px,
    'inset': auto
  ),
  'max-body': (
    'width': $g-max-body-width + ($g-max-column-width * 2),
    'inset': auto
  )
) !default;

The following variables are available for your use and are calculated based on the values defined above

以下变量可供您使用，并且是根据上面定义的值计算得出的

$g-column //percentage
$g-gutter //percentage
$g-column-decimal
$g-gutter-decimal

使用情况 (Useage)

Once the component is included in your project (as close to the root html element as possible) you can toggle the grid visually by hitting control + shift + L in your browser. You should see the grid displayed over top of your project.

一旦组件包含在您的项目中(尽可能靠近根html元素)，您就可以通过在浏览器中按control + shift + L来可视地切换网格。 您应该看到项目上方显示的网格。

货柜 (Containers)

Griddle comes with a container() mixin which creates a root element constrained to the defined max width ($g-max-body-width).

Griddle附带有一个container() mixin，它创建一个限制为定义的最大宽度( $g-max-body-width )的根元素。

.row {
  @include container();
  // will use margin for outside grid area
}

跨度(又名列) (Spans (aka Columns))

In order to align items to your grid, use the span() function. The span() function takes three arguments:

为了使项目与网格对齐，请使用span()函数。 span()函数采用三个参数：

.my-div {
  width: span($columns, $extra_gutters (optional), $context (optional));
}

Using span() tells your element how many column-widths and (optionally) how many extra gutter-widths you'd like to use for various positional properties. Griddle will do the math and give your properties the correct percentage value. Spans include the gutters between declared columns, so a span(4) will be the sum of 4 column-widths and the 3 gutter-widths that exist between those 4 columns.

使用span()告诉您的元素，您想用于各种位置属性的列宽和(可选)多少多余的装订线宽。 Griddle将进行数学运算，并为您的属性提供正确的百分比值。 跨度包括声明的列之间的装订线，因此span(4)将是4个列宽和这4列之间存在的3个装订线宽度的总和。

The context (optional) is assumed to be the full $g-max-body-width unless you specify otherwise. The context argument is used to calculate root grid-column and grid-gutter widths while inside of a non-$g-max-body-width element.

除非另外指定，否则上下文(可选)假定为完整的$g-max-body-width 。 context参数用于计算非$g-max-body-width元素内部的根网格列和网格天沟宽度。

Examples:

例子：

// assuming a 12-column grid, create a full width element
.my-div {
  width: span(12);
}

// Assuming a 12-column grid, create an element that is centered at
// 1/3 the grid width
.my-div {
  width: span(4);
  margin-left: span(4);
}

// assuming a 12-column grid, create an element that spans 4 columns
// and one extra gutter width
.my-div {
  width: span(4, 1);
}

// assuming a 12-column grid, create an element that spans 6 columns
// but is pulled to the left by a negative gutter width
.my-div {
  width: span(6, 1);
  margin-left: - span(0, 1);
}

// Sometimes you want a parent that is X root columns wide, with children
// that are each Y root columns wide. This is where the context argument applies.
.my-parent-div {
  // set a value that is less that the max grid width
  width: span(9);

  .my-children {
    // in order to calculate the correct percentage width of root columns
    // (e.g. 3-of-12 root columns) rather than getting a percent of the
    // 9-of-12 column parent element, pass in the correct context width
    // as a third argument
    width: span(3, 0, span(9))
  }
}

In the event you ever need a decimal value to work with rather than a percent, simply use span-decimal() which takes the same arguments as span().

万一您需要一个十进制值而不是一个百分比，只需使用span-decimal() ，该参数接受与span()相同的参数。

断点 (Breakpoints)

In order to use the breakpoints that come with Griddle use the provided bp() function which will access a breakpoint value by name from the $g-breakpoints map (you can define your own by declaring the value of $g-breakpoints before importing the griddle .scss file).

为了使用Griddle随附的断点，请使用提供的bp()函数，该函数将从$g-breakpoints映射中按名称访问断点值(您可以通过在导入$g-breakpoints值之前声明其值来定义自己$g-breakpoints值)。扒手.scss文件)。

example:

例：

.my-div {
  // assuming a 12-column grid, define an element that gets progressively
  // narrower as screen size increases, but remains centered.
  width: span(12);

  @media (min-width: bp(m)) {
    width: span(10);
    margin-left: span(1, 1);
  }

  @media (min-width: bp(xl)) {
    width: span(8);
    margin-left: span(2, 1);
  }
}

Griddle uses the default breakpoint values to define various level of insetting from the edge of the browser viewport across screen sizes. If needed though, there's no reason you can't use arbitrary breakpoint values as well in one-off scenarios.

Griddle使用默认断点值来定义从浏览器视口边缘到整个屏幕大小的各种插入级别。 如果需要的话，没有理由在一次性情况下也不能使用任意断点值。

.my-special-div {
  // assuming a 12-column grid, define an element that gets progressively
  // narrower as screen size increases, but remains centered.
  width: span(12);

  @media (min-width: 600px) {
    width: span(10);
    margin-left: span(1, 1);
  }

  @media (min-width: 1200px) {
    width: span(8);
    margin-left: span(2, 1);
  }
}

翻译自: https://vuejsexamples.com/a-vue-js-implementation-of-braid-griddle-scss-with-a-toggleable-visual-overlay/