Designing the overall layout

The overall layout of the board page is different from all of the other pages in the application. We will put everything inside a .page division, which looks like the following; the height of the <body> tag and #app divisions will be 100%:

<body>  <div id="app">    <div class="page">      <div class="page-header"></div>      <div class="page-body">        <div class="board-wrapper">          <div class="board"></div>        </div>      </div>    </div>  </div></body>

Inside the .page element, we will have a .page-header element, which is the same header as the home page, and a .page-body element, which contains a .board-wrapper element. Inside the .board-wrapper, we will put a .board element. Figure 12.5 shows the high-level layout of the board page:

Figure ...

Get Building Applications with Spring 5 and Vue.js 2 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.