this is the text for the message
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
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.
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.
Hidebutton to hide the Control Panel if it's getting in the way of your grid design
Max Page Widthfields. Enter 4 for grid-template-columns, 6 for grid-template-rows, 10 for grid-gap and 1200 for Max Page Width.
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.
Apply. Now our grid reacts to the change in device width and gains an additional 2 columns when it reaches 900 pixels or wider.
Following on from the steps above:
grid-row-endfields are updated with the correct cell and row information.
classfield: 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.
Add / Update Elementbutton. The element appears on the grid:
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.
Add / Update Elementbutton.
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.
When you're happy with your layout design, click the
Generate button to download the HTML file containing your generated grid work.