From bd44402fecc1bfbfeeac00e408d70ed2c49fb9ce Mon Sep 17 00:00:00 2001 From: michael-n-cooper Date: Tue, 8 May 2018 22:35:58 -0400 Subject: [PATCH 01/20] Set up flexbox-reflow technique --- techniques/css/flexbox-reflow.html | 56 ++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 techniques/css/flexbox-reflow.html diff --git a/techniques/css/flexbox-reflow.html b/techniques/css/flexbox-reflow.html new file mode 100644 index 0000000000..9b773c7d52 --- /dev/null +++ b/techniques/css/flexbox-reflow.html @@ -0,0 +1,56 @@ + + + + Using CSS Flexbox to reflow content + + + +

Using CSS Flexbox to reflow content

+
+

Metadata

+

+

css

+

sufficient

+
+
+

When to Use

+

Describe the situations in which to use the technique, such as types of pages, features in use that might use the technique, etc.

+
+
+

Description

+

Describe how the technique works. This begins with a description of the problem the technique solves, then describes how to apply the technique. The description should be detailed enough to provide all the information a reader needs to be able to apply the technique, without recourse to following example code.

+

The objective of this technique is to ...

+
+
+

Examples

+

Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.

+
+

Example Title

+

Description

+ Code sample +

Working example: link

+
+
+
+

Tests

+
+

Procedure

+
    +
  1. Step 1
    2. +
+
+
+

Expected Results

+
    +
  • Result
    • +
+
+
+ + + From a7f900640e316785eaaabbd65928baef90919b4b Mon Sep 17 00:00:00 2001 From: Jake Abma Date: Tue, 22 May 2018 12:59:06 +0200 Subject: [PATCH 02/20] Update flexbox-reflow.html --- techniques/css/flexbox-reflow.html | 71 ++++++++++++++++++++++++++---- 1 file changed, 63 insertions(+), 8 deletions(-) diff --git a/techniques/css/flexbox-reflow.html b/techniques/css/flexbox-reflow.html index 9b773c7d52..a1603bca4b 100644 --- a/techniques/css/flexbox-reflow.html +++ b/techniques/css/flexbox-reflow.html @@ -19,15 +19,64 @@

When to Use

Description

Describe how the technique works. This begins with a description of the problem the technique solves, then describes how to apply the technique. The description should be detailed enough to provide all the information a reader needs to be able to apply the technique, without recourse to following example code.

-

The objective of this technique is to ...

+

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 and a vertical scroll bar at a height equivalent to 256 CSS pixels. This is done by using layout techniques that adapt to the available viewport space. 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.

+

The basic principles of flexbox layouts are to:

+
    + +
  1. 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;
    2. +
  2. Position the layout regions in the flexbox container as a row of adjacent flex boxes items, which may wrap to new rows as needed in much the same way as words in a paragraph wrap.
    3. +
+

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.

+

NOTE: Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The CSS Flexible Box Layout module warns against resequencing content logic as they cause incorrect source ordering and are non-conforming.

Examples

Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.

-

Example Title

-

Description

- Code sample +

Example 1: Simple liquid layout in HTML and CSS

+

+ 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. + 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.

+ + <div class="row"> + <header role="banner" class="col"> + <h2>Header</h2> + <h1>Using CSS Flexbox for Reflow</h1> + </header> + <main role="main" class="col"> + <h2>Main</h2> + <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.</p> + <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.</p> + <div class="row"> + <div class="col col-panel"> + <div class="panel"> + <h3>Panel 1</h3> + <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.</p> + </div> + </div> + <div class="col col-panel"> + <div class="panel"> + <h3>Panel 2</h3> + <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.</p> + </div> + </div> + </div> + </main> + <aside role="complementary" class="col"> + <h2>Aside</h2> + <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.</p> + </aside> +</div> +<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> +

Working example: link

@@ -36,14 +85,20 @@

Tests

Procedure

    -
  1. Step 1
    2. -
+
  • Display content in a user agent.
    • +
  • Set the viewport width at a equivalent to 320 CSS pixels.
    • +
  • Check whether all content and functionality is available without vertical scrolling.
    • +
  • Set the viewport height at a equivalent to 256 CSS pixels.
    • +
  • Check whether all content and functionality is available without horizontal scrolling.
    • +

    Expected Results

      -
    • Result
      • -
    +
  • Check #3 is true.
    • +
  • Check #5 is true.
    • + +

    If 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.

    Description

    -

    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 and a vertical scroll bar at a height equivalent to 256 CSS pixels. This is done by using layout techniques that adapt to the available viewport space.

    +

    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.

    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.

    The basic principles of flexbox layouts are to:

      @@ -26,7 +26,7 @@

      Description

    1. 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.

    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.

    -

    NOTE: Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The CSS Flexible Box Layout module warns against resequencing content logic as they cause incorrect source ordering and are non-conforming.

    +

    NOTE: Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The CSS Flexible Box Layout module warns against resequencing content logic as they cause incorrect source ordering and are non-conforming.

    Examples

    @@ -35,50 +35,51 @@

    Example 1: Medium complex flexbox layout in HTML and CSS

    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.

    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.

    - + 
    +          
           <!DOCTYPE html>
           <html lang="en">
             <head>
-              <meta charset="UTF-8">
-              <title>Using CSS Flexbox for Reflow</title>
-              <style>
+            <meta charset="UTF-8">
+            <title>Using CSS Flexbox for Reflow</title>
+            <style>
 
-              /* Reflow Styling */
+            /* Reflow Styling */
 
-              .row {
-                width: 100%;
-                display: flex;
-                flex-flow: row wrap;
-              }
+            .row {
+              width: 100%;
+              display: flex;
+              flex-flow: row wrap;
+            }
 
-              .row-nested {
-                width: calc(100% + 2em);
-                margin: 0 -1em 1em -1em;
-              }
+            .row-nested {
+              width: calc(100% + 2em);
+              margin: 0 -1em 1em -1em;
+            }
 
-              .col {
-                padding: 1em;
-                flex: 0 1 100%;
-              }
+            .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: 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;
-                }
+            @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;
               }
-              
-              </style>
+            }
+
+            </style>
 
             </head>
 
@@ -97,6 +98,7 @@ 
    Example 1: Medium complex flexbox layout in HTML and CSS
    
                   </div>
                   <div class="col col-panel">
                     ...
+                  </div>
                 </div>
               </main>
 
@@ -110,32 +112,48 @@ 
    Example 1: Medium complex flexbox layout in HTML and CSS
    
 
             </body>
           </html>
-            
+              
+

    Working example: Using CSS Flexbox for Reflow

    -

    Tests

    -
    -

    Procedure

    -
      -
    1. Display content in a user agent.
      2. -
    2. Set the viewport width at a equivalent to 320 CSS pixels.
      3. -
    3. Check whether all content and functionality is available without vertical scrolling.
      4. -
    4. Set the viewport height at a equivalent to 256 CSS pixels.
      5. +

      Tests

      +
      +

      Procedure 1

      +
        +
      1. If the text is read horizontally
        2. +
      2. Display content in a user agent capable of 400% zoom with a viewport-width of 1280 CSS pixels.
        3. +
      3. Zoom in by 400%.
      4. Check whether all content and functionality is available without horizontal scrolling.
      -
      -
      -

      Expected Results

      -
        -
      • Check #3 is true.
        • -
      • Check #5 is true.
        • +

        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.

        +
      +
      +

      Expected Results

      +
        +
      • Check #4 is true.
      -

      If 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.

      -
      -
    +
    +
    +

    Procedure 2

    +
      +
    1. If the text is read vertically.
      2. +
    2. Display content in a user agent capable of 400% zoom with a viewport-height of 1024 CSS pixels.
      3. +
    3. Zoom in by 400%.
      4. +
    4. Check whether all content and functionality is available without vertical scrolling.
      5. +
    +

    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.

    +
    +
    +

    Expected Results

    +
      +
    • Check #4 is true.
      • +
    +

    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.

    +
    +
    -

    Tests

    -
    -

    Procedure 1

    -
      -
    1. If the text is read horizontally
      2. +

      Tests

      +
      +

      Procedure

      +
      1. Display content in a user agent capable of 400% zoom with a viewport-width of 1280 CSS pixels.
        2. -
      2. Zoom in by 400%.
        3. -
      3. Check whether all content and functionality is available without horizontal scrolling.
        4. +
      4. If the text is read horizontally: Zoom in by 400%.
        5. +
      5. Check that all content and functionality is available without horizonal scrolling.
        6. +
      6. If the text is read vertically: Set the viewport height to 256 CSS pixels.
        7. +
      7. Check that all content and functionality is available without vertical scrolling.
      -

      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.

      -
      -
      -

      Expected Results

      -
        -
      • Check #4 is true.
        • -
      -
      -
      -

      Procedure 2

      -
        -
      1. If the text is read vertically.
        2. -
      2. Display content in a user agent capable of 400% zoom with a viewport-height of 1024 CSS pixels.
        3. -
      3. Zoom in by 400%.
        4. -
      4. Check whether all content and functionality is available without vertical scrolling.
        5. -
      -

      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.

      -
      -
      -

      Expected Results

      -
        -
      • Check #4 is true.
        • +

        NB: 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.

        +
      +
      +

      Expected Results

      +
        +
      • Check #3 is true.
        • +
      • Check #5 is true.

      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.

      -
      -
    +
    +
    -

    When to Use

    -

    This technique is applicable to Cascading Style Sheet / HTML technologies.

    +

    Description

    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.

    -

    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.

    +

    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.

    The basic principles of flexbox layouts are to:

    1. 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;
    2. 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.
    -

    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.

    -

    NOTE: Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The CSS Flexible Box Layout module warns against resequencing content logic as they cause incorrect source ordering and are non-conforming.

    + +

    Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The CSS Flexible Box Layout module warns against resequencing content logic as they cause incorrect source ordering and are non-conforming.

    Examples

    @@ -35,85 +34,82 @@

    Example 1: Medium complex flexbox layout in HTML and CSS

    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.

    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.

    - 
    -          
-          <!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;
-              }
-            }
-
-            </style>
-
-            </head>
-
-            <body class="row">
-
-              <header role="banner" class="col">
-                ...
-              </header>
-
-              <main role="main" class="col">
-                ...
-                ...     
-                <div class="row row-nested">
-                  <div class="col col-panel">
-                    ...
-                  </div>
-                  <div class="col col-panel">
-                    ...
-                  </div>
-                </div>
-              </main>
-
-              <aside role="complementary" class="col">
-                ...
-              </aside>
-
-              <footer role="contentinfo" class="col">
-                ...
-              </footer>
-
-            </body>
-          </html>
-          
-
    +
    
+  <!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;
+      }
+    }
+
+    </style>
+
+    </head>
+
+    <body class="row">
+
+      <header role="banner" class="col">
+        ...
+      </header>
+
+      <main role="main" class="col">
+        ...
+        ...     
+        <div class="row row-nested">
+          <div class="col col-panel">
+            ...
+          </div>
+          <div class="col col-panel">
+            ...
+          </div>
+        </div>
+      </main>
+
+      <aside role="complementary" class="col">
+        ...
+      </aside>
+
+      <footer role="contentinfo" class="col">
+        ...
+      </footer>
+
+    </body>
+  </html>

    Working example: Using CSS Flexbox for Reflow

    @@ -123,27 +119,30 @@

    Tests

    Procedure

      -
    1. Display content in a user agent capable of 400% zoom with a viewport-width of 1280 CSS pixels.
      2. -
    2. If the text is read horizontally: Zoom in by 400%.
      3. -
    3. Check that all content and functionality is available without horizonal scrolling.
      4. -
    4. If the text is read vertically: Set the viewport height to 256 CSS pixels.
      5. -
    5. Check that all content and functionality is available without vertical scrolling.
      6. +
    6. 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.
      7. +
    7. Zoom in by 400%.
      8. +
    8. For content read horizontally, check that all content and functionality is available without horizontal scrolling.
      9. +
    9. For content read vertically, check that all content and functionality is available without vertical scrolling.

    NB: 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.

    Expected Results

    -
      -
    • Check #3 is true.
      • -
    • Check #5 is true.
      • -
    -

    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.

    +

    Check that #3 and #4 are true.

    +
    +

    Related resources

    +
    From c01f0575a5440b858b0686739c711c8dd357ada3 Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Thu, 30 Aug 2018 21:31:16 +0100 Subject: [PATCH 15/20] Added working example class --- techniques/css/flexbox-reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/flexbox-reflow.html b/techniques/css/flexbox-reflow.html index cb99d812bc..e445d38309 100644 --- a/techniques/css/flexbox-reflow.html +++ b/techniques/css/flexbox-reflow.html @@ -111,7 +111,7 @@

    Example 1: Medium complex flexbox layout in HTML and CSS

    </body> </html> -

    Working example: Using CSS Flexbox for Reflow

    +

    Working example: Using CSS Flexbox for Reflow

    From a6ce2e58f01c7147e8c624a09798e7d622f9f767 Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Fri, 31 Aug 2018 00:04:39 +0100 Subject: [PATCH 16/20] Updating NB --- techniques/css/flexbox-reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/flexbox-reflow.html b/techniques/css/flexbox-reflow.html index e445d38309..8498742a38 100644 --- a/techniques/css/flexbox-reflow.html +++ b/techniques/css/flexbox-reflow.html @@ -124,7 +124,7 @@

    Procedure

  • For content read horizontally, check that all content and functionality is available without horizontal scrolling.
  • For content read vertically, check that all content and functionality is available without vertical scrolling.
    • -

    NB: 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.

    +

    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.

    Expected Results

    From 1e5a4b4de574f73f29ee1d866e95ef57bcbbb9c0 Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Wed, 5 Sep 2018 09:10:50 +0100 Subject: [PATCH 17/20] Minor update after call. Saying what to do in the exmple. --- working-examples/css-flexbox/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/working-examples/css-flexbox/index.html b/working-examples/css-flexbox/index.html index c2c3925c46..d5aa34fc12 100644 --- a/working-examples/css-flexbox/index.html +++ b/working-examples/css-flexbox/index.html @@ -161,7 +161,7 @@

    Using CSS Flexbox for Reflow

    -

    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.

    +

    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 see the effect, either use the zoom feature, or change the window width of your browser.

    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.

    From 80b376a9f8789f8987e62e2d29da615273477d2c Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Wed, 5 Sep 2018 09:21:33 +0100 Subject: [PATCH 18/20] Aligning grid and flexbox exampe text. --- working-examples/css-flexbox/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/working-examples/css-flexbox/index.html b/working-examples/css-flexbox/index.html index d5aa34fc12..c0d5859dde 100644 --- a/working-examples/css-flexbox/index.html +++ b/working-examples/css-flexbox/index.html @@ -161,7 +161,7 @@

    Using CSS Flexbox for Reflow

    -

    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 see the effect, either use the zoom feature, or change the window width of your browser.

    +

    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.

    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.

    From b67a6fdd1c5006f99309fa2601e13d65ae9c3b24 Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Wed, 5 Sep 2018 09:36:59 +0100 Subject: [PATCH 19/20] Renaming flexbox reflow to C31 --- techniques/css/{flexbox-reflow.html => C31.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename techniques/css/{flexbox-reflow.html => C31.html} (100%) diff --git a/techniques/css/flexbox-reflow.html b/techniques/css/C31.html similarity index 100% rename from techniques/css/flexbox-reflow.html rename to techniques/css/C31.html From 57978e3e5c6991586882085fe2d1a7e0c0de933d Mon Sep 17 00:00:00 2001 From: Michael Cooper Date: Wed, 5 Sep 2018 19:17:35 -0400 Subject: [PATCH 20/20] standardize working-example link and expected result, add link to related technique --- techniques/css/C31.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/techniques/css/C31.html b/techniques/css/C31.html index 8498742a38..79ad848162 100644 --- a/techniques/css/C31.html +++ b/techniques/css/C31.html @@ -111,7 +111,7 @@

    Example 1: Medium complex flexbox layout in HTML and CSS

    </body> </html> -

    Working example: Using CSS Flexbox for Reflow

    +

    Working example: Using CSS Flexbox for Reflow

    @@ -128,13 +128,13 @@

    Procedure

    Expected Results

    -

    Check that #3 and #4 are true.

    +

    #3 and #4 are true.