by @Octavector

Getting Started / Tutorial

Welcome to Ingrid, a tool to help you quickly created responsive layouts using CSS Grid. Let's jump right in:

TIP: You can hide this Getting Started guide by clicking the Close button in the top right corner of this window, you can reopen the guide by clicking the Getting Started button at the top of the Control Panel

Keyboard controls

Press Delete or Backspace to delete an element.

Hold Spacebar to view the Information Panel which shows you a list of user created elements and their recorded media querys.

Hold Control to select a grid cell beneath an existed element.

Creating a Grid

The large number in the top right of your screen is the device width. If you change your browser window width the number will reflect this in multiples of 100.

1. Change your browser window until the top right number reads 700. TIP: Click the top left Hide button to hide the Control Panel if it's getting in the way of your grid design
2. Let's create our grid by fillng in the grid-template-columns, grid-template-rows, grid-gap and Max Page Width fields. Enter 4 for grid-template-columns, 6 for grid-template-rows, 10 for grid-gap and 1200 for Max Page Width.
3. Click Apply. This wil create a grid based on your entered specifications for a device width of 700 pixels or wider. Try resizing the browser window to see the effects when you go below and beyond 700.
4. Resize the browser window until the top right number reads 900
5. Enter 6 for grid-template-columns, 4 for grid-template-rows, 10 for grid-gap and 1200 for Max Page Width
6. Click Apply. Now our grid reacts to the change in device width and gains an additional 2 columns when it reaches 900 pixels or wider.

Creating Elements

Following on from the steps above:

1. Resize the browser window until the top right number reads 700.
2. Left click the grid cell where you wish the elements top-left corner to be
3. Right click the grid cell where you wish the elements bottom-right corner to be
4. observe that as you click the cells, the grid-column-start, grid-column-end, grid-row-start and grid-row-end fields are updated with the correct cell and row information.
5. A class name must be entered for each element, for this example lets enter test1 in the class field: TIP: Each unique element must ba assigned a unique class name, if you were to enter an existing class name Ingrid would update the element with that matching name instead of created a new element.
6. With the required information entered we can now add our element by clicking the Add / Update Element button. The element appears on the grid:
7. The elements cell position on the grid has now been recorded for device widths of 700 pixels and wider

Responsive Elements

Just as we did for the grid, we can resize our browser window and make alterations to our element to make it respond.

As we resize the browser window from 800 to 900, notice that the element we created maintains its grid position, keeping the same coordinates while the grid shifts between a 4 and 6 column grid. Let's assign it an entirely new position for width 900.

1. Resize the browser window until the top right number reads 900
2. Left click the element, notice its class name and location data are updated in the Control Panel
3. Assign a new location for this element. Left click a grid cell where you would like the element's top-left corner to appear. Right click a grid cell where you would like the element's bottom-right corner to appear. TIP: If you wish to select a cell which appears underneath an existing element, simply hold the Control key while moving the mouse to ignore existing elements.
4. Click the Add / Update Element button.

Because the class field was populated with the class name matching an existing element it updated that element (for the current screen width) instead of creating a new element.

TIP: Press and hold the Spacebar to view the Information Panel which shows you a list of user created elements, their class names and their recorded media querys.

resize the browser window between widths 800 and 900 to see that both the grid and the element respond.

Generate

When you're happy with your layout design, click the Generate button to download the HTML file containing your generated grid work.