When 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.
- It can take a lot of dev work to essentially rebuild an app layout just to explore a small, yet significant, interaction.
- 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 issues unrelated to the problem at hand.
With that in mind, v1Labs recently started a new open source component framework called 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 is available today. I’ll show you how to create the following layout. Follow along on Codesandbox.io.
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
centeredroundand70x70. - The text is
centeredwidth 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 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.