Confusion regarding md-layout as documented

[bretonio]

I am a bit confused about what is a very interesting template project.

But does the following structure in Home.vue not contradict the Vue Material documentation of a class-based grid?

<md-layout md-column>
        <md-layout md-column md-flex>
            <h1>Home Page</h1>
            <my-component></my-component>
        </md-layout>

The documents.

  <div class="md-layout md-gutter">
    <div class="md-layout-item"></div>
    <div class="md-layout-item"></div>
    <div class="md-layout-item"></div>
  </div>

And the code I pilfered from you guys.

<template>
    <md-layout md-column>
        <md-layout md-column md-flex>
            <h1><md-icon class="fa fa-gears fa-3x"/></md-icon>&nbsp;Engenho Novo LLC</h1>
            <my-component></my-component>
        </md-layout>
        <md-bottom-bar>
            <md-bottom-bar-item md-icon="all_inclusive">Dialectics</md-bottom-bar-item>
            <md-bottom-bar-item md-icon="flight">Apoplectics</md-bottom-bar-item>
            <md-bottom-bar-item md-icon="local_library" md-active>Samuel Beckett</md-bottom-bar-item>
            <md-bottom-bar-item md-icon="camera">Skeptical Metrics</md-bottom-bar-item>
        </md-bottom-bar>
    </md-layout>
</template>

The following experiment generates nearly what I wanted but not quite & it produces a row of columns with no gutter and justified start.

  <md-layout md-gutter md-column>
        <md-layout md-flex>
          <md-layout-item>
            <h1><md-icon class="fa fa-gears fa-3x"/></md-icon>&nbsp;Engenho Novo LLC</h1>
          </md-layout-item>
          <md-layout-item>
            <h1><md-icon class="fa fa-gears fa-3x"/></md-icon>&nbsp;Engenho Novo LLC</h1>
          </md-layout-item>
          <md-layout-item>
            <h1><md-icon class="fa fa-gears fa-3x"/></md-icon>&nbsp;Engenho Novo LLC</h1>
          </md-layout-item>

        </md-layout>

In sum your sample code is quite different than the Vue Material documentation although it seems partially to work! Thanks for listening.

[groman00]

Hi @bretonio, thanks for checking out this project!

This project was created with vue-material 0.8.1 (https://vue-material-old.netlify.com). You're looking at the documentation for the newest version (1.0.0), thus the confusion.

That said, the repo is meant to be a boilerplate for a Vue PWA. I added Vue Material as a default component library, but you could easily update to the newer version, or remove it entirely and choose a different component library. If you're interested in creating a PR that updates this project to vue-material 1.0.0, that would be awesome.

Let me know if you have any other questions.

[bretonio]

Thank you, that explains it! A pull request is a little beyond my technical savvy but I will see what I can do with the previous version.

cb

On Wed, Mar 14, 2018 at 2:40 PM, Greg Roman notifications@github.com wrote:

Hi @bretonio https://github.com/bretonio, thanks for checking out this project!

This project was created with vue-material 0.8.1 ( https://vue-material-old.netlify.com). You're looking at the documentation for the newest version (1.0.0), thus the confusion.

That said, this repo is meant to be a boilerplate for a Vue PWA. I added Vue Material as a default component library, but you could easily update to the newer version, or remove it entirely and choose a different component library. If you're interested in created a PR that updates this project to vue-material 1.0.0, that would be awesome.

Let me know if you have any other questions.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/groman00/vue-pwa-starter/issues/1#issuecomment-373111587, or mute the thread https://github.com/notifications/unsubscribe-auth/ATmAq0zMa14EBhk1OzVHhiaWC01iXAbCks5teVYQgaJpZM4Sq2iN .