README

Installation

CSS Setup

Include the generated grid styles in the head of your document:

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

Important!

After you changed any grid setting, you have to generate CSS in the grid-panel again!

Copy the test images from auf-grid/assets/images folder to your sites assets folder:

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

Go to our test page http://{{your-site}}/grid-test and check if everyting is working. It should look like this Complete Test Page Screenshot:

Add the hash '#grid' to any page url and you get a grid overlay to check your settings
Please read the auf-grid.css for all available classes which you can use in your components.

Grid Column Presets Site Setup

If you want to create custom column presets you can do so.

Implement our grid_settings section somewhere in your site.yml:

title: Site

tabs:
  settings:
    sections:
      grid_settings: auf_grid/grid_settings

Add some meaningfull presets.

Add »grid__column--full« to the presets, if you want use the full page width. This preset will be handled a little differently for you.

Important: (Re-)Generate the grid CSS in the grid-panel to create the new preset css classes!!!!

Setup Grid Fields

Setup your component blueprint (i.e. builder-block) with the grid-fields found in blueprints/fieldgroup/grid_component_settings.yml

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 the Grid in your snippets

use auf\Grid;

$grid = new Grid();

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

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

If you use grid_column_presets in your site configuration, you can pass the structure field as an argument:

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

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

Test the grid

The plugin sets up a custom route with a virtual testpage at:

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

Grid--Overlay

To check if everything is in perfect grid-condition you can show a little grid-overlay by adding the hash '#grid' behind your url.

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

For this to work, you need to include the grid-overlay-snippet before the body-tag.

<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>

Todos

~~The grid.css should be created as a file for caching and not beeing-recreated for every page request. Perhaps this is a good~~ [2020-07-12]
~~Clean up test page~~ [2020-07-12]
~~Create Nice Create-Grid-Panel-View~~ [2020-07-12]
~~Create Image test page~~ [2020-07-12]
~~Create Grid Overlay Snippet~~ [2020-07-12]
~~Implement Inline Grid Classes~~ [2020-07-14]
~~Implement justify and align classes~~ [2020-07-14]
~~grid_start/end_column_classes should be created dynamically in a custom field~~ [2020-07-15]

peterstollenwerk / auf-grid

Maintainers

Details