Column Setter 开源项目教程

Column Setter 开源项目教程

column-setter Custom responsive grids in Sass that work in older browsers. 项目地址: https://gitcode.com/gh_mirrors/co/column-setter

1. 项目介绍

Column Setter 是一个用于创建自定义响应式网格的 Sass 工具。它允许开发者轻松地为网站设置一个自定义的响应式网格，并构建基于浮动或 Flexbox 的布局。Column Setter 使用一个简单的函数和少量可选的 mixins 来生成基于设置的 CSS 宽度。它主要关注于生成网格的宽度，而将 HTML 和 CSS 的结构完全交给开发者。

2. 项目快速启动

2.1 安装

首先，克隆项目到本地：

git clone https://github.com/propublica/column-setter.git

2.2 配置

在项目目录中，找到 _column-settings.scss 文件，并根据需要编辑网格的比例。例如：

$mar: 4; // 边距宽度
$col: 4; // 列宽度
$gut: 2; // 间距宽度
$pad: 1; // 填充宽度

2.3 导入

在主 Sass 文件中导入 _column-settings.scss 和 _column-setter.scss：

@import "_column-settings.scss";
@import "_column-setter.scss";

2.4 使用

使用 colspan() 函数来生成宽度值。例如，指定一个元素的宽度为 6 列，容器宽度为 12 列：

.example {
  width: colspan(6, 12); // 6 列宽，共 12 列
}

3. 应用案例和最佳实践

3.1 创建完全流体网格

通过在 _column-settings.scss 中使用无单位的数值，可以创建一个完全流体的网格：

$mar: 4;
$col: 4;
$gut: 2;
$pad: 1;

3.2 使用断点

在 _column-settings.scss 中定义断点，以适应不同的屏幕尺寸：

$breakpoints: (
  xs: (cols: 4, min-width: 0, padding: 2em),
  sm: (cols: 6, min-width: 30em, margin: 5),
  md: (cols: 8, min-width: 40em),
  lg: (cols: 12, min-width: 50em),
  xl: (cols: 16, min-width: 60em)
);

3.3 使用 grid() mixin

使用 grid() mixin 来设置布局的上下边距：

@include grid(main-content);

4. 典型生态项目

4.1 Humio Column Setter

Humio Column Setter 是一个 Chrome 扩展，允许用户在 Humio 中自动设置列和字段。它可以帮助用户避免 Humio 固定在 @timestamp 和 @rawstring 上，从而提高查询效率。

4.2 其他相关项目

• Sass: Column Setter 是基于 Sass 构建的，因此了解和使用 Sass 是必要的。
• Flexbox: 虽然 Column Setter 支持浮动布局，但 Flexbox 是现代布局的首选工具。

通过以上步骤，您可以快速上手并使用 Column Setter 创建自定义的响应式网格布局。

column-setter Custom responsive grids in Sass that work in older browsers. 项目地址: https://gitcode.com/gh_mirrors/co/column-setter