Learning Resources: site design templates

[nstohler]

I've had some problems to build up a site from zero using all the different material2 elements.

feature request:

Learning to get a new site up and running could be improved by offering some site/app templates. MDL has this here: https://getmdl.io/showcase/index.html. They provide a good starting point on how to best build up an app from a good code base.

What is the expected behavior?

To have a good selection of templates, from simple to more complex

• Following MD design principles
• Coherent functionality
• Showcasing @angular/material2 components
• Responsive (@angular/flex-layout)

[nstohler]

I've started a project that aims to mimic the look and feel of the Material Design website using Angular, AngularMaterial and Flex-Layout:

https://github.com/nstohler/angular-material2-md-lookalike

What is working in my initial version:

• Content width changes depending on view width (using custom flex-layout breakpoints)
• The sidenav also behaves like the one on the MD site
• Fixed toolbar (but see scrollbar issue below)

...but there's still a ton to do/fix:

• theme switching works for sidenav and toolbar and other md-controls, but the content background does not switch to dark at all. This also makes the tab labels invisible when switched to dark mode.
• I have not been able to get the scrollbar to cover the whole height of the page (it got covered by the toolbar).
• the Material Design website has this initial big header/title that moves into the header toolbar as one scrolls down the page. Is there any support for something like that in angular/material?
• I've got the flex-layout working, but no idea if I'm using that as intendeds or not

It would be nice to extend this to a starter template following good practices and style guides, so people don't always have to start from zero solving the same problems over and over again.

PS: I have had some problems getting angular plunkers to run on my machine lately, that's why I created a project on github.

[mackelito]

@jelbourn is this in the works? Perhaps it would be a great starting point to have the basic layout of the docs site https://material.angular.io ? :)

[jelbourn]

We have something in the works for this. @amcdnl is working on some Angular Material schematics that can be used to quickly scaffold apps / views.

[amcdnl]

@nstohler - Checkout - https://github.com/amcdnl/material-inbox

[Splaktar]

Just FYI, you can find the Schematics Guide in the docs now.

There are updates coming for v7 and I believe that the plan is to continue to enhance the schematic offerings over time. At this time, we're still finalizing some of the related tooling before we start adding too many different schematics though. There should be some updates at AngularMix next month 😄

[jelbourn]

Closing this since we do have some schematics. I'm working on getting some contributors to dramatically improve the available schematics, but for now we don't have any plans to just build a pure example app.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}