Skip to content

[docs] Update breakpoints.md for clarity#14527

Merged
oliviertassinari merged 2 commits intomui:nextfrom
matthewjwhitney:patch-1
Feb 16, 2019
Merged

[docs] Update breakpoints.md for clarity#14527
oliviertassinari merged 2 commits intomui:nextfrom
matthewjwhitney:patch-1

Conversation

@matthewjwhitney
Copy link
Contributor

@matthewjwhitney matthewjwhitney commented Feb 14, 2019

As proposed in the discussion from issue #13448 [Breakpoints] functions down() and between() adds +1 to index, the breakpoint widths are described as a range. Furthermore, I found some broken hash links that I attempted to fix.

Closes #13448

- **md**, medium: 960px or larger
- **lg**, large: 1280px or larger
- **xl**, extra-large: 1920px or larger
* **xs,** extra-small: 0px to 600px
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency, I think that we should use - for marking a list item.

```

### `theme.breakpoints.between(start, end) => media query`
<a id="theme-breakpoints-between-start-end-media-query">### `theme.breakpoints.between(start, end) => media query`</a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's wrong with the current hash generation logic?

* **xs,** extra-small: 0px to 600px
* **sm,** small: 600px to 960px
* **md,** medium: 960px to 1280px
* **lg,** large: 1280px to 1920px
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not 💯 accurate. The actual value is 1920px - 0.05px, as the intervals have an empty intersection. It's important. But 0.05px is too low-level information. I think that it's it important for people to understand that a breakpoint has an associated range, inclusive. It's better explained in
https://material-ui.com/layout/hidden/#how-it-works. I'm not sure how we can explain it here.

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation. label Feb 14, 2019
@oliviertassinari oliviertassinari changed the title Update breakpoints.md for clarity [docs] Update breakpoints.md for clarity Feb 14, 2019
matthewjwhitney and others added 2 commits February 15, 2019 12:09
As proposed in the discussion from issue #13448 [Breakpoints] functions down() and between() adds +1 to index, the breakpoint widths are described as a range. Furthermore, I found some broken hash links that I attempted to fix.
@oliviertassinari oliviertassinari changed the base branch from master to next February 15, 2019 11:31
@oliviertassinari oliviertassinari merged commit 349cf1f into mui:next Feb 16, 2019
@oliviertassinari
Copy link
Member

@matthewjwhitney Thanks, I'm moving forward, I'm happy to take your feedback anytime you can :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Breakpoints] functions down() and between() adds +1 to index

2 participants