README

Whirlwind Distribution 使用的 Drupal 8 主题

全局先决条件

您需要以下软件在全球范围内（按以下顺序）安装

NodeJS

下载适用于您的系统的安装程序并按照安装程序的提示进行操作。

gulp
```
npm install --global gulp-cli
```
Browsersync
```
npm install -g browser-sync
```

Sass/Gulp 依赖项

Libsass - CSS 加强版
Sass Breakpoint - 简化媒体查询
Mappy Breakpoints - 媒体查询助手
Susy 2 - Miriam Suzanne 的网格系统
Sass MQ - 替代媒体查询助手
Typi - 响应式排版
Modular Scale - 设计中的和谐

安装

运行 npm install 以安装所有依赖项。

工作流程配置

Mappy Breakpoint

使用 Mappy Breakpoint 以简化媒体查询。将媒体查询嵌套在声明中而不是相反。要使用 mappy-bp，在 010-global/layout/_breakpoints.scss 中定义您的断点。

.test {
    width: 100%;

    @include mappy-bp(med){
      width: 250px;
    }

    @include mappy-bp(desk){
      width: 150px;
    }
}

Susy 2

要使用灵活的网格系统，请使用 Susy。在 /010-global/layout/_config.scss 中配置 susy，例如。

//Setting Susy map
$susy: (
  flow: ltr, // ltr | rtl
  output: float, // float | isolate
  math: fluid, // fluid | static (requires column-width)
  column-width: false, // false | value
  container: auto, // length or % | auto
  container-position: center, // left | center | right | <length> [*2] (grid padding)
  last-flow: to,
  columns: 12,
  gutters: 1/2,
  gutter-position: before, // before | after | split | inside | inside-static (requires column-width)
  global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static)
  debug:
    (
      image: hide, //show | hide | show-columns | show-baseline
      color: rgba(blue, .2),
      output: background, // background | overlay
      toggle: bottom right, //	right | left and top | bottom
    ),
);


//Setting Box sizing for the site
@include border-box-sizing;

//Set Susy container
body {
  @include container(1200px);
}

Modular Scale

在 010-global/type/_typi.scss 内定义模块比例映射。有关模块比例比率。

$modularscale: (
  base: 16px,
  ratio: 1.067
);

Typi

响应式排版也定义在 010-global/type/_typi.scss 中。您可以定义全局和特定元素（如标题）的行为等。

$typi: (
  base: (
    null: (15px, 1.4),
    med: (16px),
    large: (17px)
  ),

  h1: (
    null:  (ms(7), 1.3),
    land:  (ms(8)),
    med:   (ms(9), 1.2),
    large: (ms(10)),
    wide:  (ms(11), 1.2)
  ),
);

使用 vr() 单位进行样式设计

.test{
    padding: vr(.5); // 1/2 of base = 8px
}

命名约定

尽可能遵循 BEM，例如。

图标

icon__search.svg

icon__arrow-left--normal.svg
icon__arrow-left--active.svg
icon__arrow-left--hover.svg

颜色

$color__text--dark:              #111111;
$color__text--medium:            #424242;
$color__text--light:             #4D4D4D;
$color__text--white:             #FFFFFF;
$color__text--description:       #4D4D4D;

Scss

article--teaser.scss
article--full.scss
article--search-index.scss

search__header.scss
search__content.scss
search__filters.scss
search__pager.scss

类

<div class="callout">
    <h2 class="callout__title"></h2>
    <div class="callout__content">
        <div class="callout__image"></div>
        <div class="callout__body"></div>
    </div>
</div>

Gulp

安装完成后，在根目录中运行 gulp。Gulp 将在默认浏览器中打开 localhost:3000 并解析 Acquia Dev Desktop 本地站点的 URL。如果失败或您不使用 Acquia Dev Desktop，请将 URL 添加到 gulp-custom-vars.js 文件中。可选地，可以安装 Drupal Browsersync 模块，该模块将启用在任意本地 URL（而不仅仅是 https://:3000）上的自动样式刷新。启用模块后，转到外观 > 默认主题 > 设置，然后在页面底部的 Browsersync 设置中检查 启用 Browsersync。随着 gulp 的运行，它将监视 Sass 并在工作时将更改注入到浏览器中。

Gulp 将监视 Twig 模板的变化，自动清除缓存并使用 Browsersync 刷新页面。为此，需要在命令行环境中设置正确的命令行环境，以便运行 Drush。如果您使用 Acquia Dev Desktop，则在运行 gulp 之前需要设置 PATH 环境变量。可以从前端桌面打开的终端窗口中复制导出字符串。将其粘贴到从 gulp 运行的终端中。字符串将类似于以下内容


### Common issues

1. Receiving an error during `clearDrupalCache`:
   ```[10:51:15] Starting 'clearDrupalCache'...
   [10:51:15] ERROR: Could not clear Drupal cache.```

   Set the environment variables as outlined in the Gulp section above.

opin / whirlwind_theme

维护者

详细信息