README

安装

CSS 设置

登录到您的面板，打开“grid”-面板，然后点击底部的“生成 CSS”-按钮。

将生成的网格样式包含在文档的头部

<html>
  <head>
    <?= css('assets/css/auf-grid.css') ?>
  </head>
  <body></body>
</html>

重要！

您更改了任何网格设置后，必须在网格面板中再次生成 CSS！

将测试图片从 auf-grid/assets/images 文件夹复制到您网站的资产文件夹

{{your-site}}/assets/images/grid-test-2.jpg

前往我们的测试页面 http://{{your-site}}/grid-test 并检查是否一切正常。它应该看起来像这样完整测试页面截图

将哈希 '#grid' 添加到任何页面 URL，您将获得一个网格覆盖层以检查您的设置
请阅读 auf-grid.css 了解所有可用的类，您可以在组件中使用这些类。

网格列预设网站设置

如果您想创建自定义列预设，您可以这样做。

在 site.yml 中某处实现我们的 grid_settings 部分

title: Site

tabs:
  settings:
    sections:
      grid_settings: auf_grid/grid_settings

添加一些有意义的预设。

如果您想使用全页面宽度，请将 “grid__column--full” 添加到预设中。此预设将为您稍微不同地处理。

重要：(重新)在网格面板中生成网格 CSS 以创建新的预设 CSS 类！

设置网格字段

使用在 blueprints/fieldgroup/grid_component_settings.yml 中找到的网格字段设置您的组件蓝图（例如 builder-block）

fields:
  grid_section_headline:
    type: headline
    label: Component Grid Settings

  grid_column_preset:
    label: Grid Column Preset
    extends: grid_column_preset  

  grid_column_start_class:
    extends: auf_grid/fields/grid_column_start_class
    width: 1/2
    when:
      grid_column_preset: grid__column--custom

  (...)

在片段中使用网格

use auf\Grid;

$grid = new Grid();

$columnSpan = $grid->getColumnSpanByStartAndEndColumnClasses('grid__column--start-1', 'grid__column--end-3');

$spanWidthInPx = $grid->getColumnSpanWidthInPx(3);

如果您在网站配置中使用 grid_column_presets，您可以将结构字段作为参数传递

$grid = new Grid($site->grid_column_presets()->toStructure());

$columnSpan = $grid->getColumnSpanByPreset('grid__column--aside');

测试网格

插件在 http://{{your-site}}/grid-tests 处设置了一个自定义路由，并有一个虚拟测试页面

http://{{your-site}}/grid-tests

网格--覆盖

要检查一切是否处于完美的网格状态，您可以在 URL 后添加哈希 '#grid' 以显示一个小网格覆盖层。

http://{{your-site}}/grid-tests#grid

为了使此功能正常工作，您需要在 body 标签之前包含 grid-overlay-snippet。

<body class="grid">
  <h1><?= $page->title() ?></h1>
  <a href="<?= url('#grid') ?>">Show Grid: Simply add #grid behind the url to show a grid-overlay</a>
  <?= snippet('auf-grid/grid-overlay'); ?>
</body>

待办事项

~~grid.css 应该作为一个文件创建用于缓存，而不是在每次页面请求时重新创建。这可能是一个好的~~ [2020-07-12]
~~清理测试页面~~ [2020-07-12]
~~创建漂亮的创建网格面板视图~~ [2020-07-12]
~~创建图像测试页面~~ [2020-07-12]
~~创建网格覆盖片段~~ [2020-07-12]
~~实现内联网格类~~ [2020-07-14]
~~实现 justify 和 align 类~~ [2020-07-14]
~~grid_start/end_column_classes 应该在自定义字段中动态创建~~ [2020-07-15]

petenstollenwerk / auf-grid

维护者

详细信息