Responsive elements with polymer
1 like330 views
The document discusses the evolution and challenges of responsive web design, particularly focusing on media queries and the concept of element queries in Polymer. It highlights issues of circularity in current media queries, and proposes element queries as a future solution. Additionally, it provides links to various resources for further reading on responsive design and container queries.
Responsive elements with polymer
- 2. A bit of responsive history.
- 3. Coined by Ethan Marcotte.
- 4. Media queries became an official standard in 2012.
- 5. Media queries are broken.
- 10. Polymer is component based.
- 11. It should be: Element Queries.
- 15. Pitfalls:
- 16. Circularity .element (min-width: 500px) { width: 200px; }
- 17. Circularity .element (min-width: 31.250em) { font-size: 0.75em; }
- 18. Circularity .container { float: left; } .child { width: 500px; } .container:min-width(450px) > .child { width: 400px; }
- 19. The future:
- 20. Element Queries
- 23. Useful links • Ethan Marlotte’s first post on responsive web design: http://alistapart.com/article/responsive-web-design • Tab Atkins’ most recent post about Element Queries: http://www.xanthir.com/b4VG0 • The Element Query Polymer component http://filaraujo.github.io/akyral.io/element-query/index.html • A more native Element Queries Polyfill https://github.com/marcj/css-element-queries • Mat Marquis’ proposal for Container Queries: http://alistapart.com/article/container-queries-once-more-unto-the-breach