update(docs, layout): fix breakpoints, documentation, and gettingStarted #6082
Conversation
* update component custom mediaQueries to be consistent with ranges defined for Layout mediaQueries * update `hide` API for mediaQueries * fix hide SCSS and component mediaQuery(s) * fix mixins for gt-lg and xl * fix flex-order with negative ordering; support -20 to 20 Fixes #5646. Fixes #6056. Fixes #5576.
|
@jelbourn, @robertmesserle, @EladBezalel, @topherfangio - please review ASAP as I want to push to master this morning... so @naomiblack can review and word-smith. |
| name: 'Tips & Tricks', // Possibly rename to Troubleshooting | ||
| } | ||
| ,{ | ||
| name: 'Troubleshooting', // Possibly rename to Troubleshooting |
There was a problem hiding this comment.
Since you've renamed, perhaps we don't need the comment 😄
| <p><em>New to Angular.js? Before getting into Angular Material, it might be helpful to:</em> | ||
| <ul> | ||
| <li>watch the videos about <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank" | ||
| title="Link opens in a new window">Angular.js framework</a></li> |
There was a problem hiding this comment.
Possibly reword: "watch the videos about the Angular.js framework".
Also, why is the title for both of these "Link opens in a new window"? Shouldn't it be related to the link? (I realize this was not your change, just wondering if there is a reason this was done.)
There was a problem hiding this comment.
Agree with Topher.
- Make the entire sentence a hyperlink
- "Angular.js" > "Angular"
- Update
titleto say what's behind the link
There was a problem hiding this comment.
My interpretation is that when the user hovers over the link, it will show this tip of "intended action".
There was a problem hiding this comment.
...The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.
| <ul style="margin-bottom: 2em;"> | ||
| <li><a href="http://codepen.io/collection/AxKKgY/" target="_blank" | ||
| title="Link opens in a new window">Fork a Codepen</a></li> | ||
| title="Link opens in a new window">Visit CodePen Community' </a></li> |
There was a problem hiding this comment.
Extra single quote and space (') at the end of the link.
| <li><a href="https://github.com/angular/material#bower">Using Bower</a></li> | ||
| <li><a href="https://github.com/angular/material#cdn">Using a CDN</a> (example below)</li> | ||
| <li style="font-weight: 400;color: #106CC8;">Use 'Edit on CodePen' button on any of our Demos<br/> | ||
| <img src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png" style="width:75%;margin: 10px 30px 0 0"> |
There was a problem hiding this comment.
LOVE this addition; hopefully it will help people when creating issues too...
There was a problem hiding this comment.
We should be hosting this image, not githubusercontent. Should also run the image through pngcrush (I can do this from my workstation if that's easier).
The images also need alt text.
Currently `validateAttributeUsage( )` is only used for the `flex` API, so remove its use from the non-observable APIs
| horizontally in a row (<code>layout="row"</code>) or vertically in a column (<code>layout="column"</code>). | ||
| Row layout is the default if you specify the <code>layout</code> attribute without a value. | ||
| Note that <code>row</code> the default layout direction if you specify the <code>layout</code> attribute without a value. |
There was a problem hiding this comment.
Typo, add is: "Note that <code>row</code> is the default layout direction if..."
|
LGTM, will review this locally later. |
|
|
||
| <p> | ||
| Using <b> HTML Attributes</b> as the API provides an easy way to set a value (eg. <code>layout="row"</code>) and | ||
| helps with separation of concerns: Attributes define layout while and CSS classes assign styling. |
|
|
||
| .layout_note { | ||
| font-size: 0.9em; | ||
| margin: -5px 40px 0px 20px; |
|
@ThomasBurleson Finished a content review after reading through each of the layout docs. Are there any functionality changes you would like us to test as well? |
| API with Responsive Breakpoints | ||
| </h3> | ||
|
|
||
| <p>Now we can combine the breakpoint <code>alias</code> with the Layout API to easily support Responsive breakpoints |
There was a problem hiding this comment.
This section is worded like you're in the middle of a step-by-step tutorial rather than API docs. Instead something like
"The breakpoint alias combines with the Layout API, allowing..."
There was a problem hiding this comment.
True... the goal is full clarity of how the sugar works and why.
wrapper div for `<p>` tags min-height for `<div class="menus">` Fixes #5962.
| <br/> | ||
|
|
||
| <p> | ||
| This Layout API means that developers no longer have to worry about the details of FlexBox styling. |
There was a problem hiding this comment.
"This Layout API means that developers no longer have to worry about the details of FlexBox styling."
This is like saying GWT means that developers no longer have to worry about JavaScript. I would reword this to say that it makes it much easier to set up and maintain flexbox layouts vs. defining everything via CSS.
| </p> | ||
|
|
||
| <p class="layout_note"> | ||
| The Layout engine will even report console warnings for Layout conflicts and issues that are not automatically resolved. |
There was a problem hiding this comment.
The Layout engine will even report console warnings for Layout conflicts and issues that are not automatically resolved.
"The Layout engine will log console warnings when it encounters conflicts or known issues."
gt-lgandxlhideAPI / mediaQuerieshideandshowSCSS and component mediaQuery(s)flex-orderwith negative ordering; support -20 to 20Fixes #4895. Fixes #5646. Fixes #6056. Fixes #5576.