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).

![](https://hackernoon.com/hn-images/1*VaqkZgGiIk2XzA0WQSAm9g.png)

### 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.

![](https://hackernoon.com/hn-images/1*zsTelpqcSe5QmldQJ76avA.png)

### 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.

![](https://hackernoon.com/hn-images/1*15ejxm_fVJ-lV8Z9kUWTSQ.png)

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.

![](https://hackernoon.com/hn-images/1*gWwekl2hZp6Z8TTnnEDwSg.png)

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.

![](https://hackernoon.com/hn-images/1*QkQmx3TqnEX2k3MWeqfVeA.png)

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.

![](https://hackernoon.com/hn-images/1*a1hlrbVimRBZFGj-jLREuw.png)

### Adding a mock navigation

In your first cell, add a `<v1-nav />` element.

<v1-cell size="12x1">  
  <v1-nav />  
</v1-cell>

![](https://hackernoon.com/hn-images/1*VVKw1PQ3pmAG5utqYkan4g.png)

### 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.

![](https://hackernoon.com/hn-images/1*fxJ6j1vKuaonqGsRk__nBg.png)

### 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.

![](https://hackernoon.com/hn-images/1*Wf_TNVlOdm-k7HL43XAg9Q.png)

### Footer content

<v1-cell size="7x1" y="9" x="3">  
  <v1-footer />  
</v1-cell>

Easy enough. Just added a `<v1-footer />` element.

![](https://hackernoon.com/hn-images/1*CHvy03xGI53Z6Av4k1Trtg.png)

### 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">  
      
  </v1-cell>  
  <v1-cell size="7x1" y="9" x="3">  
    <v1-footer />  
  </v1-cell>  
</v1-grid>

![](https://hackernoon.com/hn-images/1*WG-TkxIw0GEQqdITHcI0nQ.gif)

### 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).

Hello Protovue — Prototyping Component Framework for Vue.js

Too Long; Didn't Read

Companies Mentioned

@danelyons

RELATED STORIES