Vue Material -

Layout

Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

By default you can create gutter-free layouts or make the grid system calculate the best margin size for each screen size.

The layout system use the concept of rows and columns. You can create sized columns or leave the system to make your layout fluid. You'll be able to set the size for each breakpoint, even on nested columns.

Breakpoints

Vue Material layout uses some breakpoints for responsiveness:

NameSizeDescription
xsmall For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small tablets in portrait. <600px
small For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors. 960px
medium For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors. 1280px
large For screens who have between of 1280px and 1920px wide. For large desktop monitors. 1920px
xlarge For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens. >1920px

Column Layout

The layout system in Vue Material is essentially based on columns and makes use of flexbox to be flexible enough and give the best experience with a great and easy API.

What you have to do to getting started with layouts is to create a md-layout parent element, that will hold a list of md-layout-item. You can set up as many columns you want:

Columns

By default layout items do not have space between each other. This can be kind of bad for regular layouts, like a list of card, for example. You can set Vue Material to calculate automatically the space between elements and those spaces are based on the screen width, using the same breakpoints:

Screen SizeAmount
xsmall 8px
small 16px
medium 24px
large 48px

Look at this pice of code and resize you browser to see the changes:

Gutter

You can use layouts for almost anything on your app, even for small parts. To help you with that you can have differents alignments per md-layout, combining horizontal and vertical alignments, using the md-alignment-[horizontal]-[vertical] class, e.g. md-alignment-top-center. The alignment works on the parent element and will affect the position of all children items:

Alignments

In the last examples the layout system did the calculation of the children sizes based on the amount of items. But if you want to set sizes for each item? You can simply set a md-size-[amount] in the item that you want, e.g. md-size-30. The sizes, that are always in %, can be values multiple of 5 and also accepts the values 33 and 66.

You don't even need to set the size for all elements, as the flexbox model will calculate the size for the remaining items. Cool, uh?

Size

A layout system is not good enough if it is not responsive. In the last example you saw fluid layout sizes, but you can change them based on the breakpoint name, by just giving a different class for each breakpoint that you may want. The class is md-[breakpoint]-size-[amount] and works just like the last example. The layout engine of Vue Material will do the magic. Try to resize your browser:

Responsive

Although is not the best option, is quite common the need of hiding elements on smaller screen. You can do that using the md-[breakpoint]-hide classes:

Hide Elements

API - md-layout

The following classes can be applied to any HTML Element:

NameDescription
md-gutter Enable the automatic gutter space between layout items.
md-layout-nowrap By default the layout items will be always wrapper under the parent layout. Use this class if you want to disable this behaviour, but the responsiveness will not work.
md-alignment-[x]-[y] Sets the alignment of all children based on a value per coordinate. The alignment only works if both x and y is present e.g. md-alignment-top-center. The possible values are:
  • top
  • center
  • left
  • space-around
  • space-between

API - md-layout-item

The following classes can be applied to any HTML Element direct children of md-layout:

NameDescription
md-size-[amount] Sets a size to a particular item. The amount can be multiple of five, e.g. md-size-25. Also accepts 33, 66 and 100 for easy prototyping.
md-[breakpoint]-size-[amount] Sets a size to a particular item on a particular breakpoint. The breakpoints follow the Material Design guidelines for layout. The possible values are:
  • xsmall
  • small
  • medium
  • large
  • xlarge

API - md-hide

The following classes can be applied to any HTML Element:

NameDescription
md-[breakpoint]-hide Hides a particular element on a particular breakpoint. The breakpoints follow the Material Design guidelines for layout. The possible values are:
  • xsmall
  • small
  • medium
  • large
  • xlarge