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.
- 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.
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