Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to do responsive design like twitter does? #1177

Closed
lifeiscontent opened this issue Nov 15, 2018 · 7 comments
Closed

How to do responsive design like twitter does? #1177

lifeiscontent opened this issue Nov 15, 2018 · 7 comments

Comments

@lifeiscontent
Copy link

I saw your post on how you have 0 media queries in twitter @necolas

I was wondering if you could give an example of how that works.

@necolas
Copy link
Owner

necolas commented Nov 15, 2018

Sure. You can rely on onLayout to respond to changes in the layout of individual elements; this is more like "element queries": https://codesandbox.io/s/l5mxv6v59z. Or you can listen to viewport dimension changes using Dimensions which is much more like media queries. And even use matchMedia in JS if you want to rely on CSS media queries for web for whatever reason.

@necolas necolas closed this as completed Nov 15, 2018
@lifeiscontent
Copy link
Author

lifeiscontent commented Nov 15, 2018

@necolas and what about for hover/active/focus/etc styles?

or for example, I have a Nav, and a NavLink and I'd like to do something like

<Nav variant="primary">
  <NavLink to="/something">Something</NavLink>
</Nav>

with the following features

  • being able to switch between light/dark modes
  • having NavLink receiving the variant from its parent

how is something like this done at twitter? I'd imagine you have similar requirements

@necolas
Copy link
Owner

necolas commented Nov 16, 2018

Switching between themes is an unrelated problem. You can do that using React context, or CSS variables, or other equivalent mechanisms.

Having NavLink receive a variant from its parent also seems like something you can do with props or context. Depends on what you're trying to do.

Active states are provided by the Touchable* components. Hover can be done using the hover recipe linked to in the README docs. Eventually we'll have a single component that provides a convenient way to customize styles and render tree in response to hover/focus/press.

@lifeiscontent
Copy link
Author

@necolas ok great, just out of curiosity at twitter, do you use variants? how do you handle styling sub-components in this case? The product you've been building is very impressive and rather than fumbling around in the technology to find something that works for all these different cases I'd love to hear more about your learnings / how-tos.

@necolas
Copy link
Owner

necolas commented Nov 16, 2018

What do you mean by "variant"? This is all just React so nothing there has changed. (And I don't work at Twitter anymore)

@lifeiscontent
Copy link
Author

@necolas variant meaning a (Primary / Secondary) Tweet Component. So for example maybe the primary has blue author text so if I say something like

<Tweet variant="primary">
   <TweetAuthor>@necolas</TweetAuthor>
</Tweet>
<Tweet variant="secondary">
   <TweetAuthor>@necolas</TweetAuthor>
</Tweet>

the TweetAuthor might get styled differently depending on the variant applied to the Root Component.

@necolas
Copy link
Owner

necolas commented Nov 16, 2018

You mean by CSS and some magic selector that breaks the encapsulation of your components? No, that's not possible. Stick to idiomatic react patterns and do it via props

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants