No 6 Source demo - Building a Monopoly board type layout

In this thread I created a Monopoly layout similar to the Jen Simmons Monoploy board to demonstrate how this could be built with Source.

This thread is a short tutorial showing how to build the layout.

Original demo:

Source recreation

Note: The full demo uses some of the original’s code to create the rotated text and colours, and in order to focus on the layout here, this is not covered. If you are experienced enought to understand the code, you can just use Inspector to grab the same demo code to complete the full demo. (It’s actuall very simple but does need a basic understanding of how to rotate stuff).

3 Likes

The first thing to do is examine the layout we are trying to build and we can see that it is a 5x5 grid, i.e. 5 rows of 5 columns, consisting of white square boxes with a black border, and a small equal gap between the rows and columns.

I.e. a very simple grid or 5x5.

We can use Sources GridPlus or GridPlusPro to create this. I used GridPlusPro in this example.

To create this grid, we can use the custom template feature to use repeat(5, 10vw) for both the columns and rows. This will create a grid of square “boxes” of about the size we need. 5vw would be too small and 20vw would not fit in the screen, width so 10vw is a good compromise which looks right.

We want the grid gap to be about 1vw for rows and cols. However, due to 1vw getting too small on small devices. I have used calc(1vw + 1px) which is 1vw plus 1px. You could just use 1vw or 10px.

I also enabled the shadow in the grid.

Here are the GridProPlus settings:

Next we will add a Grid Item containing a Paragraph stack with the text 1 and lets remove the bottom margin.

In that Items settings we need to set a 4px black border, set the min height to be 10vw and center align it.

Settings shown below.

Looking at the original demo, we can see 16 squares.

Therefore, we need to duplicate our first grid item 15 times, to create 16 grid items.

Publishing should produce this:

Screenshot 188

Nest stage is to alter the text to be 1 to 16. This helps lot in figuring out what needs to be positioned where.

The original layout has 5 squares along the top, it then follows the outer grid poitions in a clockwise direction.

Therefore, we will need to force position of the natural flow of the grid to restructure into teh Monopoly shape.

we will use the GridProItem settings to do this. The first 5 sqyares are in the correct location.

For the 6th item containing the text 6, we need to use the State Position function. The 6th item will normally assume the 1st col 2nd row position. However, if we use the State Position we can force it to go to the end of row 2 into the 2nd row, 5th Col position by setting up Row 2 Col 5, as shown below.

Repeat this for all remaining Grid Items to position as they appear in the original demo. I.e. the 7th item should be Row 3 Col5, etc…

When you have completed this reordering you should get:

The layout is now complete and is fully responsive.

The Source demo I created also has a blue area that was created using an additional GridItem with a blue BG and rounded corners set to spans 3 columns and be positioned at Row 3 Col 2.

If you have followed this so far, then stand back and admire this powerful layout.

3 Likes