When [prototyping](https://hackernoon.com/tagged/prototyping) new interactive elements for an app, it is often helpful to scaffold the layout to show how the pieces fit together. There are a few problems with this approach. 1. It can take a lot of dev work to essentially rebuild an app layout just to explore a small, yet significant, interaction. 2. Getting the right level of abstraction is tough. If you make the prototype look exactly like the live app, you’re inviting the team to talk about [design](https://hackernoon.com/tagged/design) issues unrelated to the problem at hand. With that in mind, [v1Labs](https://v1labs.com) recently started a new open source component framework called [Protovue](https://www.producthunt.com/upcoming/protovue). The goal is to give designers & developers a tool to assemble an abstracted layout to frame a prototype in under 5 minutes. A functional [alpha](https://www.npmjs.com/package/v1labs-protovue) is available today. I’ll show you how to create the following layout. Follow along on [Codesandbox.io](https://codesandbox.io/s/ry7z3x808q?module=%2Fsrc%2FApp.vue).  ### Installing Protovue If you are using CodeSandbox, just add `v1labs-protovue` as a dependency. To add to a local Vue.js app run: $ npm install v1labs-protovue --save# or$ yarn add v1labs-protovue Then add Protovue as a plugin when you initialize Vue. import Vue from "vue"; import Protovue from "v1labs-protovue"; Vue.use(Protovue); new Vue({}); ### Setting up the grid By default, grids are designed to be `100%` wide, `100%` tall. It is a good idea to add your grid as the first element of `v-app`. <v-app> <v1-grid guides size="12x10" gap="10"> </v1-grid> </v1-grid> The above grid is `12 columns` x `10 rows` with a `10px` gap between cells. Also note the `guides` attribute. This shows a grid of blue lines designed to help you lay out your cells. You can remove it once you place all your cells. The grid with guides should look like this.  ### Adding cells First let’s add a cell to represent the navigation. <v1-cell size="12x1" /> In this case we just want a cell that spans `12 colums` and `1 row`. It should look like this.  Now for the left sidebar. <v1-cell size="3x9" y="1" /> This `3x9` cell has a `y="1"` attribute which offsets the cell 1 row from the top.  The right sidebar is very similar to the left. <v1-cell size="2x9" y="1" x="10" /> We made it `1 column` narrower and offset it `10 columns` from the left.  Getting the hang of it? Now let’s add the main content cell and the footer cell. <v1-cell size="7x8" y="1" x="3" /> <v1-cell size="7x1" y="9" x="3" /> You’ve now placed all your cells so remove the `guides` attribute from `<v1-grid>`. This is what you should have so far.  ### Adding a mock navigation In your first cell, add a `<v1-nav />` element. <v1-cell size="12x1"> <v1-nav /> </v1-cell>  ### Left sidebar content <v1-cell size="3x9" y="1"> <v1-image center round width="70px" height="70px" /> <v1-text center rows="3" /> <v1-avatar count="6" /> </v1-cell> * The image element is `centered` `round` and `70x70`. * The text is `centered` width 3 rows. * The avatar element repeats 6 times.  ### Right sidebar content <v1-cell middle size="2x9" y="1" x="10"> <v1-image center round width="100px" height="100px" /> <v1-text center rows="7" /> </v1-cell> Similar to the left content elements. Note that adding `middle` to a cell vertically centers content.  ### Footer content <v1-cell size="7x1" y="9" x="3"> <v1-footer /> </v1-cell> Easy enough. Just added a `<v1-footer />` element.  ### Ready to start prototyping It only takes a few lines of code to scaffold your app. <v1-grid size="12x10" gap="10"> <v1-cell size="12x1"> <v1-nav /> </v1-cell> <v1-cell size="3x9" y="1"> <v1-image center round width="70px" height="70px" /> <v1-text center rows="3" /> <v1-avatar count="6" /> </v1-cell> <v1-cell middle size="2x9" y="1" x="10"> <v1-image center round width="100px" height="100px" /> <v1-text center rows="7" /> </v1-cell> <v1-cell middle size="7x8" y="1" x="3"> <!-- PROTOTYPE GOES HERE --> </v1-cell> <v1-cell size="7x1" y="9" x="3"> <v1-footer /> </v1-cell> </v1-grid>  ### Get updated on Protovue progress Support us on [Product Hunt](https://www.producthunt.com/upcoming/protovue) to get tutorials and release updates. You’ll also get to vote on which new components we prioritize. If you’re interested in contributing, checkout or [github repo](https://github.com/v1Labs/protovue).