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.

Sign up for GitHub

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

Jump to bottom

Tech flexbox reflow #388

Merged
merged 22 commits into from
Sep 12, 2018
Merged

Tech flexbox reflow #388

Changes from 12 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
bd44402
Set up flexbox-reflow technique
May 9, 2018
a7f9006
Update flexbox-reflow.html
jake-abma May 22, 2018
da5540e
Update flexbox-reflow.html
jake-abma May 22, 2018
c5d51eb
Update flexbox-reflow.html
jake-abma May 22, 2018
26669fd
first setup for flexbox reflow technique
jake-abma May 22, 2018
ff603bb
editorial fix
jake-abma May 22, 2018
9b76de2
Example 1: heading update
jake-abma May 22, 2018
5d2f0a0
Merge branch 'master' into tech-flexbox-reflow
Jun 22, 2018
beefa94
update text
jake-abma Jun 27, 2018
94d1ec9
Update flexbox-reflow.html
jake-abma Jun 27, 2018
da12c6d
Create index.html
jake-abma Jun 27, 2018
8d6ea9e
simple code example aded + example link
jake-abma Jun 27, 2018
656b975
vertical / horizontal separation
jake-abma Jul 20, 2018
977419e
Update flexbox-reflow.html
jake-abma Aug 24, 2018
49a76f1
Applying changes from grid version
alastc Aug 30, 2018
c01f057
Added working example class
alastc Aug 30, 2018
a6ce2e5
Updating NB
alastc Aug 30, 2018
1e5a4b4
Minor update after call.
alastc Sep 5, 2018
f55f6ed
Merge branch 'example-css-flexbox' into tech-flexbox-reflow
alastc Sep 5, 2018
80b376a
Aligning grid and flexbox exampe text.
alastc Sep 5, 2018
b67a6fd
Renaming flexbox reflow to C31
alastc Sep 5, 2018
57978e3
standardize working-example link and expected result, add link to rel…
Sep 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 164 additions & 0 deletions techniques/css/flexbox-reflow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using CSS Flexbox to reflow content</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
</head>
<body>
<h1>Using CSS Flexbox to reflow content</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">css</p>
<p id="type">sufficient</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>This technique is applicable to Cascading Style Sheet / HTML technologies.</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to be able to present content without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for text intended to scroll horizontally. This is done by using layout techniques that adapt to the available viewport space.</p>
<p>Flexbox layouts define layout regions that reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same when done right. This is an effective way to create designs that present well on different devices and for users with different zoom preferences.</p>
<p>The basic principles of flexbox layouts are to:</p>
<ol>
<li>Define the size of layout regions using flexbox properties and media queries for specific viewport sizes, so they enlarge, shrink or wrap in the available space and respond to zoom levels;</li>
<li>Position the layout regions in the flexbox container as a row of adjacent flexbox items, which may wrap to new rows as needed in much the same way as words in a paragraph wrap.</li>
</ol>
<p>Complex flexbox layouts may be achieved by nesting layout regions, thus creating localized flexbox layouts within a larger flexbox layout. Even simple flexbox layouts require design finesse to achieve good-looking results at a wide range of viewport sizes and zoom levels, but well-designed flexbox layouts can be the most effective page design.</p>
<p>NOTE: Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The <a href="https://www.w3.org/TR/css-flexbox-1/#order-accessibility">CSS Flexible Box Layout module warns</a> against resequencing content logic as they cause incorrect source ordering and are non-conforming.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Example 1: Medium complex flexbox layout in HTML and CSS</h3>
<p>The following medium complex example uses HTML and CSS to create a flexbox layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa.</p>
<p>The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses percent sizes for the flex items by using the "flex-basis" property and are laid out in source order.</p>

<pre>
<code>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Using CSS Flexbox for Reflow&lt;/title&gt;
&lt;style&gt;

/* Reflow Styling */

.row {
width: 100%;
display: flex;
flex-flow: row wrap;
}

.row-nested {
width: calc(100% + 2em);
margin: 0 -1em 1em -1em;
}

.col {
padding: 1em;
flex: 0 1 100%;
}

@media all and (min-width: 576px) {
.col-panel {
flex: 0 1 50%;
padding-bottom: 0.25em;
}
}

@media all and (min-width: 992px) {
main[role="main"] {
flex: 0 1 66.333333%;
}
aside[role="complementary"] {
flex: 0 1 33.333333%;
margin-top: 0;
}
}

&lt;/style&gt;

&lt;/head&gt;

&lt;body class="row"&gt;

&lt;header role="banner" class="col"&gt;
...
&lt;/header&gt;

&lt;main role="main" class="col"&gt;
...
...
&lt;div class="row row-nested"&gt;
&lt;div class="col col-panel"&gt;
...
&lt;/div&gt;
&lt;div class="col col-panel"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;/main&gt;

&lt;aside role="complementary" class="col"&gt;
...
&lt;/aside&gt;

&lt;footer role="contentinfo" class="col"&gt;
...
&lt;/footer&gt;

&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>

<p>Working example: <a href="https://rawgit.com/w3c/wcag/example-css-flexbox/working-examples/css-flexbox/index.html">Using CSS Flexbox for Reflow</a></p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure 1</h3>
<ol>
<li>If the text is read horizontally</li>
<li>Display content in a user agent capable of 400% zoom with a viewport-width of 1280 CSS pixels.</li>
<li>Zoom in by 400%.</li>
<li>Check whether all content and functionality is available without horizontal scrolling.</li>
</ol>
<p>NB: If the browser is not capable of zooming to 400%, you can reduce the viewport width of the browser proportionally. For example, for 300% zoom set the viewport width at a equivalent to 960 CSS pixels.</p>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Check #4 is true.</li>
</ul>
</section>
<section class="test-procedure">
<h3>Procedure 2</h3>
<ol>
<li>If the text is read vertically.</li>
<li>Display content in a user agent capable of 400% zoom with a viewport-height of 1024 CSS pixels.</li>
<li>Zoom in by 400%.</li>
<li>Check whether all content and functionality is available without vertical scrolling.</li>
</ol>
<p>NB: If the browser is not capable of zooming to 400%, you can reduce the viewport height of the browser proportionally. For example, for 300% zoom set the viewport height at a equivalent to 768 CSS pixels.</p>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Check #4 is true.</li>
</ul>
<p>This is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.</p>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li>ID</li>
</ul>
</section>
</body>
</html>