search

webcomponents / webcomponents.github.io

WebComponents.org is where community-members document Web Components best practices
http://webcomponents.org
733 stars 118 forks source link

Article explaining how Responsive Design is applied to Web Components #78

Closed zenorocha closed 9 years ago

zenorocha commented 10 years ago

During EdgeConf someone asked about how Web Components play well with Responsive Design approaches (watch his question and answer).

We could write an article that answers questions like "Should I include media queries breakpoints inside my element?" and "How can I create an element that works in any screen size".

Is any of you interested in writing an article about it? @stopsatgreen @robdodson @sole @mathiasbynens @csuwildcat @potch @brucelawson

addyosmani commented 10 years ago

I would be curious to hear what @potch and @sole think about this topic as at Edge Soledad mentioned she felt RWD/styles should be better handled outside of an element rather than internal to it. My position is that RWD can work well when handled both inside and out, but we sorely need element queries in order to ease the pain around this topic.

robdodson commented 10 years ago

One way to strike a bit of a balance is using something like polymer-media-query where the actual breakpoint can be configured from the outside. Not as good a solution as element queries but I'm not sure if/when those will ever land

csuwildcat commented 10 years ago

I created a method to do per-element resize detection that can be modified for this purpose: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/ On Mar 25, 2014 8:38 AM, "Rob Dodson" notifications@github.com wrote:

One way to strike a bit of a balance is using something like polymer-media-queryhttp://www.polymer-project.org/docs/elements/polymer-elements.html#polymer-media-querywhere the actual breakpoint can be configured from the outside. Not as good a solution as element queries but I'm not sure if/when those will ever land

Reply to this email directly or view it on GitHubhttps://github.com/webcomponents/webcomponents.github.io/issues/78#issuecomment-38579700 .

addyosmani commented 10 years ago

@csuwildcat I've never seen this write-up before. Reading now! @robdodson I know that https://github.com/Snugug/eq.js exists to attempt to fill in the gaps of where we don't yet have true element queries. I have yet to properly play around with it, but if it works it may be worth exploring it in the context of custom elements.

csuwildcat commented 10 years ago

Yeah, I believe that element query module you referenced relies on RAF checks, and evaluates continuously. This is actually a real-deal, event-based method that employs an unholy combo of a pseudo element and a scroll listener, within a hidden trigger div, that is placed inside the target node. It only fires when the element changes shape, and the event is debounced, so it doesn't kill perf.

On Tue, Mar 25, 2014 at 2:44 PM, Addy Osmani notifications@github.comwrote:

@csuwildcat https://github.com/csuwildcat I've never seen this write-up before. Reading now! @robdodson https://github.com/robdodson I know that https://github.com/Snugug/eq.js exists to attempt to fill in the gaps of where we don't yet have true element queries. I have yet to properly play around with it, but if it works it may be worth exploring it in the context of custom elements.

Reply to this email directly or view it on GitHubhttps://github.com/webcomponents/webcomponents.github.io/issues/78#issuecomment-38624902 .

Nevraeka commented 9 years ago

:+1: Time has past on this since the last comment. We should reevaluate a new article. Any new thoughts on this?

zenorocha commented 9 years ago

Closing this one due to its inactivity.