Skip to content

Commit

Permalink
Merge pull request #388 from w3c/tech-flexbox-reflow
Browse files Browse the repository at this point in the history 
Tech flexbox reflow
  • Loading branch information
@alastc
alastc authored Sep 12, 2018
2 parents fb17d0d + 57978e3 commit 70f4373
Show file tree
Hide file tree
Showing 2 changed files with 344 additions and 0 deletions.
149 changes: 149 additions & 0 deletions techniques/css/C31.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!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">

</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><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox layouts</a> 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 class="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 class="working-example">Working example: <a href="../../working-examples/css-flexbox/">Using CSS Flexbox for Reflow</a></p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<ol>
<li>Display the web page in a user agent capable of 400% zoom and set the viewport dimensions (in CSS pixels) to 1280 wide and 1024 high.</li>
<li>Zoom in by 400%.</li>
<li>For content read horizontally, check that all content and functionality is available without horizontal scrolling.</li>
<li>For content read vertically, check that all content and functionality is available without vertical scrolling.</li>
</ol>
<p class="note">If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.</p>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<p>#3 and #4 are true.</p>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="https://w3c.github.io/wcag/techniques/css/C32">Grid reflow technique</a></li>
</ul>
</section>
<section id="resources">
<h2>Related resources</h2>
<ul>
<li><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout"><abbr title="Mozilla Development Network">MDN</abbr> Flexible Box Layout</a></li>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS Tricks Guide to Flexbox</a></li>
</ul>
</section>
</body>
</html>
195 changes: 195 additions & 0 deletions working-examples/css-flexbox/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using CSS Flexbox for Reflow</title>
<style>

/* 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;
}
}

/* Content Styling */

html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

body {
font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
background-color: #fafafc;
margin: 0;
}

a:hover {
text-decoration: none;
}

h1, h2, h3 {
color: #005a6a;
}

h1 {
font-size: 2rem;
margin: 0;
}

h2 {
font-size: 1.5em;
margin-top: 0;
}

h3 {
font-size: 1.2em;
margin-top: 0;
}

header[role="banner"] {
background-color: #005a9c;
margin-top: 1em;
}

header nav ul {
list-style: none;
}

header nav ul li {
display: inline;
padding: 0 0.25em;
}

nav {
position: relative;
border-top: 1px solid #005a9c;
border-bottom: 1px solid #005a9c;
background-color: #003366;
margin: 0 -1em -1em -1em;
}

nav ul {
padding-left: 1em;
}

a {
color: #ffffff;
}

main[role="main"] {
background: #ffffff;
padding-bottom: 0;
}

aside[role="complementary"] {
border-left: 1px solid #dddddd;
}

footer[role="contentinfo"] {
color: #ffffff;
background-color: #3b3b3b;
}

footer h2 {
color: #ffffff;
}

.logo {
width: 90px;
vertical-align: middle;
margin: 0 .5em 1em 0;
}

.panel {
background-color: #fafafc;
border: 1px solid #ddd;
padding: 1rem;
}

</style>

</head>

<body class="row">

<header role="banner" class="col">
<a href="http://w3.org/"><img alt="W3C" class="logo" src="https://www.w3.org/WAI/assets/images/w3c.svg">Header</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main role="main" class="col">
<h1>Using CSS Flexbox for Reflow</h1>
<p>The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. To view the effect use the zoom feature, or change the window width of your browser. The remaining text is Latin filler-text not intended to convey information.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at facilisis porta.</p>
<div class="row row-nested">
<div class="col col-panel">
<div class="panel">
<h3>Panel 1</h3>
<p>Nam venenatis turpis in erat tincidunt, non laoreet sem egestas. Etiam feugiat vehicula risus, non lobortis turpis aliquam nec. Nunc nec cursus arcu. In felis sapien, dictum a metus in, vehicula fermentum sem. Morbi in aliquam lorem. Suspendisse in interdum nunc.</p>
</div>
</div>
<div class="col col-panel">
<div class="panel">
<h3>Panel 2</h3>
<p>Curabitur semper dui dui, quis interdum felis ullamcorper ut. Sed mauris eros, ullamcorper eget dolor a, fringilla consequat mi. In tortor lorem, varius in accumsan et, volutpat eu dolor. Proin fermentum velit non nulla blandit pharetra.</p>
</div>
</div>
</div>
</main>

<aside role="complementary" class="col">
<h2>Aside</h2>
<p>Quisque ac ultricies massa. Ut eu aliquam sem. Aenean sit amet pharetra tellus, eu sollicitudin sem. Curabitur sit amet erat mi. Proin rutrum pretium nisl nec ornare. Curabitur ultricies eros justo, vel tempus augue consequat eget. Ut lacinia orci a eleifend facilisis.</p>
</aside>

<footer role="contentinfo" class="col">
<h2>Footer</h2>
<p>Copyright © 2018 W3C <sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.
</p>
</footer>

</body>
</html>

0 comments on commit 70f4373

Please sign in to comment.