Page tree
Skip to end of metadata
Go to start of metadata

Our parent application

The tools we are building are used by professionals in a work environment. As they are embedded in VS Code, we can forget about the mobile first approach. Actually, it's desktop only approach.

However, developers need to work from their laptops, and they don't always have access to large monitors. Be it while they commute, travel, or simply if they are doing some quick work in a meeting room away from their desks, we need to cater for the possibility that they only have access to laptop size displays.

Therefore, the target dimension for the full-screened VS Code is: 1280 × 1024px

That's the full size of the screen that's available to VS Code. In that area, the extensions are embedded in a smaller space. We can consider that the users will save space in order to have as large working area as possible, and shrink down the left column.

Our space in the parent application

Once the left side of VS Code is in its minimal, yet functional, form which is 215px wide, we are left with 1065px of space. To account for some additional possible interface (like Windows scroll bars), and to allow for some wiggle room, we can consider that the extensions have a usable horizontal space of:


A thousand pixels, left to right, that's our target space to work with. Of course, the designs should be able to cater for somewhat smaller spaces, as well as wider spaces, by making elements fluidly resizable.

  • No labels