When 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. prototyping 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 issues unrelated to the problem at hand. design With that in mind, recently started a new open source component framework called . The goal is to give designers & developers a tool to assemble an abstracted layout to frame a prototype in under 5 minutes. v1Labs Protovue A functional is available today. I’ll show you how to create the following layout. Follow along on . alpha Codesandbox.io Installing Protovue If you are using CodeSandbox, just add as a dependency. To add to a local Vue.js app run: v1labs-protovue $ 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 wide, tall. It is a good idea to add your grid as the first element of . 100% 100% v-app <v-app><v1-grid guides size="12x10" gap="10"></v1-grid></v1-grid> The above grid is x with a gap between cells. Also note the 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. 12 columns 10 rows 10px guides 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 and . It should look like this. 12 colums 1 row Now for the left sidebar. <v1-cell size="3x9" y="1" /> This cell has a attribute which offsets the cell 1 row from the top. 3x9 y="1" The right sidebar is very similar to the left. <v1-cell size="2x9" y="1" x="10" /> We made it narrower and offset it from the left. 1 column 10 columns 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 attribute from . This is what you should have so far. guides <v1-grid> Adding a mock navigation In your first cell, add a element. <v1-nav /> <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 and . centered round 70x70 The text is width 3 rows. centered 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 to a cell vertically centers content. middle Footer content <v1-cell size="7x1" y="9" x="3"><v1-footer /></v1-cell> Easy enough. Just added a element. <v1-footer /> 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 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 . Product Hunt github repo
