Skip to content
This repository has been archived by the owner on Feb 16, 2023. It is now read-only.

Commit

Permalink
Removed proposal-esque text.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wilto
Wilto committed Nov 21, 2014
1 parent b0849cc commit 7c5de85
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 81 deletions.
47 changes: 31 additions & 16 deletions index.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ Shortname: eq-usecases
Level: 1
Editor: Mat Marquis, RICG, http://responsiveimages.org
Editor: Scott Jehl, Filament Group, http://filamentgroup.com/
Abstract: This document captures the use cases and requirements for standardizing a solution for “element queries.”
Abstract: Found a bug, typo, or issue? Please file a <a href="https://github.com/ResponsiveImagesCG/eq-usecases/issues">bug on GitHub</a>!
Abstract: This document captures the use cases and requirements for standardizing a solution for element queries. The <a href="#usecases">use cases</a> and <a href="#dfn-requirements">requirements</a> were gathered with consultation with the <a href="http://w3c.org/">HTML Working Group</a> and <a href="http://whatwg.org">WHATWG</a> participants, <a href="http://www.w3.org/community/respimg/"><abbr title="Responsive Images Community Group">RICG</abbr></a> group members, and the general public.
Abstract: Found a bug or typo? Please file an <a href="https://github.com/ResponsiveImagesCG/eq-usecases/issues">issue on GitHub</a>!
!Version History: <a href="https://github.com/ResponsiveImagesCG/eq-usecases/commits/gh-pages">Commit History</a>
!Participate: <a href="irc://irc.w3.org:6665/#respimg">IRC: #respimg on W3C's IRC</a>
!Participate: <a href="https://github.com/ResponsiveImagesCG/eq-usecases">GitHub</a>
Expand All @@ -21,17 +21,27 @@ Abstract: Found a bug, typo, or issue? Please file a <a href="https://github.com
img { max-width: 100%; }
</style>

<div boilerplate="status">
This is an unofficial draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

If you wish to make comments regarding this document, please send them to <a href="mailto:public-respimg@w3.org">public-respimg@w3.org</a> (<a href="mailto:public-respimg-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-respimg/">archives</a>). All comments are welcome.
</div>

<h2 id="intro">Introduction</h2>

Given a complex responsive layout, developers often require a more granular level of control over how the contents of an individual module will respond relative to the size of their parent container rather than the viewport size. This is prohibitive to the goal of creating modular, independent components, often requiring a number of redundant CSS, complex exception cases, and workarounds, and the problem compounds itself depending on how dramatically a module adapts at each of its breakpoints.
Given a complex responsive layout, developers often require a more granular level of control over how the contents of an individual module will respond relative to the size of their containing context rather than the viewport size. Styling based on viewport size alone is prohibitive to the goal of creating modular, independent components, often requiring redundant CSS, complex exception cases, and workarounds. This problem compounds itself depending on how dramatically a module adapts at each of its breakpoints.

For the purposes of this document, an <dfn id="dfn-element-query">element query</dfn> refers not to a specific syntax or proposed method of addressing the use cases that follow, but a method of controlling styling based on the size of a containing element.

This document aims to present some of the use cases that an “element query” syntax would solve, in allowing authors to define layouts within an individual module on the basis of the size of the module itself rather than the viewport. The goal is to demonstrate a need for a method of allowing content to respond to its container’s dimensions (as opposed to the overall viewport size), to facilitate the construction of layouts comprised of many modular, independent HTML components with a minimum of duplicated CSS and overrides specific to the modules’ parent containers.

<h2 id="status">Status of This Document</h2>
In formulating the requirements, this document tries to be neutral—it is not predicated on any solution. The document only tries to describe the use cases and what the RICG understands, from practice, would be needed to address the use cases in the form of requirements. The RICG expects that a technical specification can be created to formally address each or all of the requirements (i.e., the <dfn id="dfn-solution">solution</dfn>).

This document reflects the efforts of members from the <a href="http://www.w3.org/community/respimg/">Responsive Images Community Group</a> (RICG), and with ongoing feedback from the designer/developer community via blog posts, informal polls, and other social media sources. The RICG's goal for this document is to make sure that author requirements for element queries have been documented.
<h2 id="solution">Proposed Solutions</h2>

<h2 id="usecase">Use Case</h2>
<h2 id="usecases">Use Cases</h2>

The following <dfn id="dfn-usecases">use cases</dfn> represent common usage scenarios:

<a href="#fig-1">Figure 1</a> is an example of a relatively simple and fully self-contained module’s layout, using only a single <code>min-width</code> <a href="http://dev.w3.org/csswg/mediaqueries-4/#media-query">media query</a> to reflow content.

Expand Down Expand Up @@ -68,19 +78,24 @@ The module in this new sidebar context will never need to reflow to the wider la
<figcaption>A stylesheet heatmap showing added redundancy and rewriting of existing styles required to accommodate the layout variation in <a href="#fig-4">fig. 4</a> </figcaption>
</figure>

What this document proposes is the addition of an “element query” syntax, allowing breakpoints to be applied based on the width of a parent container. For the purposes of this example, we would then be able to scope out modules’ layouts to the size of the module itself.
<h2 id="requirements">Requirements</h2>

<figure id="fig-7">
<img src="images/eq-all-layouts-fixed.gif">
<figcaption>A wireframe illustrating how a single module addresses all potential layout contexts <a href="#fig-2">fig. 2</a> and <a href="#fig-4">fig. 4</a>, given a native “element queries” solution</figcaption>
</figure>
<p>The use cases give rise to the following <dfn id="dfn-requirements">requirements</dfn>:</p>

In doing so, we’re able to assemble a layout without parent-specific media queries, styles, or overrides.
<ol>
<li>
</li>
</ol>

<figure id="fig-6">
<img src="images/eq-heatmap3.gif">
<figcaption>A stylesheet heatmap showing a lack of redundancy when accomodating the layout variations in <a href="#fig-2">fig. 2</a> and <a href="#fig-4">fig. 4</a>, given a native “element queries” solution</figcaption>
</figure>
<h2 id="issues">Open issues</h2>

We are <a href="https://github.com/ResponsiveImagesCG/ri-usecases/issues">tracking open issues</a> on Github. Please help us close them!

<h2 id="changes">Change history</h2>

A <a href="https://github.com/ResponsiveImagesCG/eq-usecases/commits/gh-pages">complete history of changes</a> is available on Github.

You can also see all <a href="https://github.com/ResponsiveImagesCG/ri-usecases/issues?q=is%3Aclosed">closed issues</a> relating to this document.

<h2 id="acks">Acknowledgements</h2>

Expand Down
Loading

0 comments on commit 7c5de85

Please sign in to comment.