README

Bit&Black 行

一个小巧简单的CSS间距，用于使用flexbox模型创建行和单元格。

安装

此包适用于与Node一起使用，也适用于Composer。

通过运行以下命令将 Bit&Black 行 添加到您的项目中：

$ yarn add bitandblack-rows 或
$ npm install bitandblack-rows 或
$ composer require bitandblack/rows

入门

Bit&Black 行 默认每行使用12个单位。

将类 row 添加到HTML容器标签中。单元格应获得类 row__cell。例如

<div class="row">
    <div class="row__cell"></div>
    <div class="row__cell"></div>
    <div class="row__cell"></div>
</div>

使用修改器类之一（如 row__cell--cell2）来定义单元格将占用多少单位。例如

<div class="row">
    <div class="row__cell row__cell--cell2">
        Uses 2 units.
    </div>
    <div class="row__cell row__cell--cell6">
        Uses 6 units.
    </div>
    <div class="row__cell row__cell--cell4">
        Uses 4 units.
    </div>
</div>

使用类如 row__cell--rightMarginCell1 来定义单元格左侧或右侧的空单位。

使用类如 row__cell--order2 来定义单元格的排序顺序，如果您想使用断点并不同排序方式。

断点

Bit&Black 行 支持断点使用。这些定义如下

phone：小于600px
tablet-portrait：600px
tablet-landscape：900px
desktop：1200px
desktop-big：1800px

将它们添加到修饰器类名的开头。例如

<div class="row">
    <div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--desktop-cell4">
        <div>12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution</div>
    </div>
    <div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--desktop-cell4">
        <div>12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution</div>
    </div>
    <div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--desktop-cell4">
        <div>12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution</div>
    </div>
</div>

您还可以通过使用一些混合在SCSS中使用断点，例如

@import "bitandblack-rows/src/scss/breakpoints";

div {
    display: block;

    @include tablet-landscape-up() {
        display: none;
    }
}

间距

Bit&Black 行 中有Bootstrap和Tailwind的味道：您可以使用一些类来添加边距和填充。有

m 设置从 0 到 5 的 margin
mx 设置从 0 到 5 的 margin-left 和 margin-right
my 设置从 0 到 5 的 margin-top 和 margin-bottom
mt 设置从 0 到 5 的 margin-top
mr 设置从 0 到 5 的 margin-right
mb 设置从 0 到 5 的 margin-bottom
ml 设置从 0 到 5 的 margin-left
p 设置从 0 到 5 的 padding
px 设置从 0 到 5 的 padding-left 和 padding-right
py 设置从 0 到 5 的 padding-top 和 padding-bottom
pt 设置从 0 到 5 的 padding-top
pr 设置从 0 到 5 的 padding-right
pb 设置从 0 到 5 的 padding-bottom
pl 设置从 0 到 5 的 padding-left

因此，要添加值为 5rem 的 margin-left，您需要添加类 ml-5。

要定义一个基于断点的边距或填充，请添加断点的名称，例如mt-tablet-portrait-5。

如果您需要负边距，请添加一个n。例如：mt-n-5或mt-n-tablet-portrait-5。

选项

禁用间距

如果您不想在特定位置有间隙，请添加类row--gutter-disabled。

适应一行

如果您有未知数量的单元格或数量与列数不匹配，请添加类row--fit-row。此时单元格只需要row__cell类，并将具有相同宽度的单行。

<div class="row row--fit-row">
    <div class="row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
</div>

灵活宽度

有时单元格需要可变宽度。在这种情况下，请添加类row__cell--width-flexible。

<div class="row">
    <div class="row__cell row__cell--width-flexible">
        <div>Auto width as wide as possible</div>
    </div>
    <div class="row__cell">
        <div>Auto size fitting the content</div>
    </div>
</div>

自定义

命名空间

您可以通过更改$bb-rows-namespace的值来更改或删除前缀。

间距大小

使用$bb-rows-gutter来定义间隙的大小。

断点

断点存储在$bb-rows-breakpoints中，您可以覆盖它。

行数

默认行数设置为12。您可以通过覆盖$bb-rows-row-number来更改此值。

顺序类

默认情况下，order类的数量将与行数相同。如果您需要更多，可以通过覆盖$bb-rows-order-number来定义。

间距

默认情况下，所有空间类都使用rem。最小单位是1rem。您可以通过设置$bb-rows-spaces-unit为不同的值来更改此值。

默认情况下，每个设置有6个步骤，从0到5。如果您需要更多，可以更改$bb-rows-spaces-number的值。

CSS自定义属性

默认情况下，Bit&Black Rows使用CSS自定义属性进行内部计算。如果您不想使用它们，并希望使用“传统”CSS，可以通过将$bb-rows-use-custom-css-properties设置为false来禁用此行为。

使用自定义类

如果您想为您的设计系统使用自定义类，可以使用混入来访问Bit&Black Rows的所有功能。

假设有一个具有复杂逻辑的网格

<div class="row row--gutter-disabled">
    <div class="
        row__cell 
        row__cell--cell10 row__cell--leftMarginCell2
        row__cell--tablet-portrait-cell8 row__cell--tablet-portrait-leftMarginCell4
        row__cell--tablet-landscape-cell6 row__cell--tablet-portrait-leftMarginCell6
        row__cell--tablet-landscape-order2
    ">
        ...
    </div>
</div>

然后它可以重写如下

// Bit&Black Rows needs to know the name of the child selector.
$bb-rows-cell-selector: ".my-custom-cell";

@import "bitandblack-rows/src/scss/base";
@import "bitandblack-rows/src/scss/breakpoints";

.my-custom-grid {
    @include grid;
    @include grid--gutter-disabled;

    #{$bb-rows-cell-selector} {
        @include cell;
        @include cell--cell-count(10);
        @include cell--left-margin-cell-count(2);

        @include tablet-portrait-up {
            @include cell--cell-count(8);
            @include cell--left-margin-cell-count(4);
        }

        @include desktop-big-up {
            @include cell--cell-count(6);
            @include cell--left-margin-cell-count(6);
            @include cell--order(2);
        }
    }
}

HTML将如下所示

<div class="my-custom-grid">
    <div class="my-custom-cell">
        ...
    </div>
</div>

跟踪视口

Bit&Black Rows提供了一个小的脚本来跟踪视口的变化。使用方法如下

import { Viewport } from "bitandblack-rows";

const viewport = new Viewport();

viewport.onResize((viewportName) => {
    console.log(`Viewport is currently defined as "${viewportName}"`);
});

帮助

如果您有任何问题，请随时通过hello@bitandblack.com联系我们。

有关Bit&Black的更多信息，可以在www.bitandblack.com下找到。

bitandblack / rows

维护者

详细信息