docs(getting-started): Getting Started Theme example

[mikeumus]

People are getting missing the step of using import on their style.css in the Material2 Getting Started Guide, myself included.

See https://gitter.im/angular/material2?at=580e0befb6fc192f563642bf

[jelbourn]

I'd rather not duplicate the content here and in the theming doc. You said you ran into this- why wasn't the link to the theming doc enough?

[mikeumus]

It's not just me. May you see the linked section of Gitter discussing this to see why?

TL:DR;

@DavidJohnWilliams, @grunzmeniroj, including the import in style.css got me too. It's because it's not in the Getting Started Guide.

A clear code example is what we're trained for/might be more effective here.

[jelbourn]

Why wasn't the link to the theming doc enough? I'd rather be more emphatic in the this is required messaging than copy the content.

[mikeumus]

It wasn't enough people seem to be missing it. It's probably good for the Getting Started to stand on it's own, even if we're not quoting exactly from the Theming Guide, something inline for people to get started without having to go other places.

[jelbourn]

I'm trying to drill into the "people seem to be missing it." Did you not see the section since it's very short? Did you see it but thought it was optional?

[mikeumus]

It got passed over as I think we're trained to look for a code example or something that looks more like a step to be taken. So maybe at least making it bold but the guide standing on it's own would be better.

[nkwood]

FWIW, although the doc does explicitly say "This is required to apply" and I'm not trying to defend people that don't read the docs: All of the previous headings before "Including core and themes and styles" are imperative statements ("Install" this.., "Create" that..), however the header for "Including core and theme styles" and all the headers after that ("Additional setup..", "Using Material"..) are passive informational headings (technically imperfect or continuous verbs). If one would just scan the headings, one might come to the incorrect conclusion everything after "Import the Angular Material NgModule" was optional.

I would suggest at least changing the header to "Include the required core and theme styles".

Also, if a statement similar to the one below was used, it would let someone accomplish the entirety of the "Getting Started" steps while staying on this page. I think from a usability / user experience standpoint there is a benefit to that. :

"For instance, if using Angular CLI, the required core and theme styles can be included simply by using a pre-built theme by including one line in your style.css file:
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
See the theming guide for additional options.

My $.02.

[jelbourn]

I sent PR #1588 to make the section more attention-grabbing. Going to close this for now, but we can re-assess after a few days.

[DavidJohnWilliams]

I agree about duplication (although it's really only one line. Might I suggest changing it so the getting started guide says explicitly "Do this" with the one line code example. And then says "For more advanced theming see theming guide" and then just cut the one liner code out of the theming guide?

[angular-automatic-lock-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.}