Skip to content

Latest commit

 

History

History
41 lines (26 loc) · 2.36 KB

README.md

File metadata and controls

41 lines (26 loc) · 2.36 KB

🚀 Vue Material Design Layout Kit

Popular layouts for Material Design web applications.

The idea here is to provide ready to use Vue templates with typical Material Design layout and navigational components.

>>> DEMO <<<

Layout #203 (iPhone 8)

Layout #203 (desktop)

✔️ Key Features

  • Built using Google's Material Design Components for web (or MDC-Web).
  • You don't have to use MDC-Web for the rest of your application. MDC-Web fluently integrates with other CSS frameworks/components because it doesn't define any global CSS styles. And because the library is very modular, only used components will be bundled.
  • MDC-Web defines 3 breakpoint ranges: desktop, tablet and phone. Each template is optimized for these three breakpoints.
  • Some templates adapt layout and navigation based on screen size. Layout and behavior at each breakpoint is mostly based on Material Studies examples. For example:
    • Navigation hidden on smaller screens gets revealed when additional space becomes available.
    • Navigational components can transform from one format to another at a designated breakpoint: side navigation can transform into tabs on a larger screen.
  • Theming is available via MDC-Web's theming system. Changing colors, fonts, shapes is as easy as setting SASS variables.

Getting Started

Go to Releases and download the latest release. Unpack it, rename the folder/app and use it as a starting point for your web app:

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn start

# build for production with minification
yarn build

Other Material-Influenced Projects