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

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.  

Utilising Squirrel’s Alignment and Distribution tools will help you keep your project looking crisp and organised. Check out this article on how to use these properties if you need a hand.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

asd