Adding responsive behaviour to your components

Now that we have our Window Size add-on wired up, we can begin converting or building our application into something that responds as the canvas size changes. In this How-To, I will be constructing a project from scratch, applying the responsive behaviour with the Window Size function applied.

If you haven’t seen the first article on this, check it out here

1. Simple Example – Setting up components with varying sizes
2. Intermediate Example – Setting up components with varying sizes AND positions
3. Expert Example – Adjusting components for various canvas sizes

Let’s get started…

Canvas size and component placement

To begin with, we want to begin by placing our components. Depending on the type of application you are building, you may have different components and a different layout, but the principles remain the same. Another area that you will need to consider and explore is the size of the initial canvas. You could be looking to display your application in both desktop and mobile formats. In this instance, you will want to look at designing layouts that suit both of those environments.

Check out this external article, ‘What Size Should Your Dashboard Be?‘ for tips and tricks on getting started.

Once you have your canvas sizes ready, and your designs in place, now we just need to set up the components in Squirrel to become responsive to the transition between those sizes.

Let’s get started.

Setting up the canvas

Determining the size of the canvas could be difficult as there are so many varying sizes to choose from that match certain screen sizes. To aide this decision, Squirrel offers a series of default canvas sizes that you can find in the product’s ‘Start Page’

For the sake of this article, we will be using these standard sizes just as a reference – feel free to use your own.

We will be exploring two canvas sizes in this article: Computer and Tablet.

Computer – 1366 x 768

Tablet – 1024 x 768

We are going to go ahead and place these values in the spreadsheet and wire up our Window Size component. See this article for more information on setting up the add-on.

Simple Example – Setting up components with varying sizes

This simple example will demonstrate a foundation example of the formulas used across the rest of the project.

1. Place a Rectangle component on the canvas

2. Set the XY position to 0,0

3. Bind the width of the Rectangle to the width of the canvas on the spreadsheet

4. (Optional) Add an icon on top of the Rectangle to act as a reference.

5. Publish and resize the browser window to view the rectangle adjusting in size, and the icon maintaining its size on the canvas.

It should look like the example below

Intermediate Example – Setting up components with varying sizes AND positions

Now we’ve established the fundamental principle of the Window Size add-on working with components, we can take this one step further with other components and more advanced positioning.

We will begin with placing our components and setting their original positions:

1. Place a metric tile on the canvas.

2. Decide the distance that you would like to position it from the edge of the canvas (in this example, 10px will be enough)

3. Bind the component’s X position to this value in the spreadsheet (label and highlight green as it is a static value and will not change for the first component)

4. (Optional) Enter the Y position into the spreadsheet below the width as a fixed value (highlight green) and bind the Metric Tile’s height to this.

5. Decide the spacing between the components (in this example, we will use 10px again to keep things easier, and we can use the same cell as the X position value)

As we will be using these numbers often, we can go ahead and place this number in a cell on the spreadsheet so we can easily reference it. I will highlight it in green as this will be a static number that doesn’t change.

6. Enter the following formula to calculate the width of the component.

7. The no. of components we will be placing is 4, so we can calculate the number of spaces with this by adding the two spaces at either end and the spaces in between = 5 spaces total

8. The formula will look something like this (remember to highlight the cell yellow as this is a changing value):

9. Now we have calculated the width, we can bind the Metric Tile to this value. As the Canvas size updates, the width of the component will adjust relative to the canvas’ width. Change the width value to give it a test, it should look something like this:

10. Add any preferred styling to the component and then duplicate the Metric Tile 3 more times.

11. Label 3 areas in the spreadsheet for new X positions

Component 2 X

Component 3 X

Component 4 X

These will be the cells that we calculate the adjusting X values that will move as the canvas width changes.

With the following formulas, with each new cell, we will essentially read the matching component as the “new 0”. Let’s walk through it

12. Use the following formulas for ‘Component 2 X’ 

It should look something like this.

13. We can now repeat this for the following X positions, reducing the ‘no. of remaining components’ and ‘spaces after component’ down by one each time.

14. Once you have those values calculated and highlighted, go ahead and bind the duplicate components to these new values. You’ll now have something like this:

Again, we can test if these work by changing the width value in cell C3.

This was the intermediate example where we can now calculate a width value that will adapt to the updated canvas width.

It’s now time to crank it up a bit. What if we shrunk down the width to a point where it would fit a tablet or mobile screen? We don’t want to risk out components becoming squished and impossible to read:

What we want to see – the components are evenly distributed, the text is visible and it is pleasing to the eye.

Expert Example – Adjusting components for various canvas sizes

As listed previously, we have ascertained various canvas sizes from Squirrel’s default sizes. In this example here, we will proceed with the preset Tablet Size (1024×768). A good place to begin is by placing this height and width in the canvas and labelling them with our static highlight colour (green).

1. Enter the new height and width of the Tablet size canvas into the yellow height and width cells to change the size of the canvas. This will allow us to see the changes being made to the components as the calculations are made.

Now that we have the new sizes, we need to begin to add conditionals to the existing formulas. These conditionals will cause major changes to occur once the canvas reaches the new sizing. We will start with resizing the widths of the components to match the new canvas size.

2. In a new cell, label and highlight the following formula

It should look like this.

3. Now that we have our width for the components went the canvas is small enough, we need to apply a conditional to our current component width formula. In cell C7, adjust the formula to the following:

It should look like this.

Now we have applied the conditions to the widths of the components, you will notice that some of the components have overlapped one another – we need to take this into account. With formulas, we can calculate the Y positions of the components that will need to adjust so they no longer overlap. But first, we can identify in the spreadsheet where we will put these formulas.

We will want to begin by highlighting and labelling the cells with ‘component # new X’ and ‘component # Y’. These new settings will only apply to some of the metric tiles, but we will go through that.

‘Component # new X’

This setting will only apply to the second, and fourth components we have placed as their X positions will be ones that will change as the canvas resizes.

4. Enter the following formula into the labelled cells for the corresponding components

It should look like this.

5. We can now apply the same conditioning to the existing X position values. With similar principles to the previous, they will look like the following:

It should look like this.

6. Repeat this for the cell containing calculations for ‘component 4 X’

We can not begin to calculate the new Y positions for the third and fourth components, as these will be the ones moving as the canvas width shrinks.

7. Label and highlight new cells for ‘component 3 Y’ and ‘component 4 Y’.

8. Enter the following formula layout into the cells

It should look like this.

9. We can now bind the third and fourth components to these new Y position values.

And voila! We have our components positioned as they should be. Now, you can publish and view in a browser, and resize the window to see the changes.

Using these principles, you can apply the Window Size add-on to all of your projects to have dynamically changing visuals and positions within your project.