Updating docs with better sticky footer examples (#295)

byuweb · Aug 24, 2017 · aa0d1f5 · aa0d1f5
1 parent dd7e9e4
commit aa0d1f5
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 40 deletions.
diff --git a/docs/byu-footer.html b/docs/byu-footer.html
@@ -50,7 +50,9 @@
             box-sizing: border-box;
         }
     </style>
-
+    <link rel="stylesheet" href="lib/prism/themes/prism.css">
+    <script src="lib/prism/prism.js"></script>
+    <script src="lib/prism/plugins/normalize-whitespace/prism-normalize-whitespace.js"></script>
 </head>
 
 <body>
@@ -80,11 +82,56 @@ <h2>University Footer</h2>
 
         <h2>Sticky Footer</h3>
         <p>We strongly recommend adding some code to make the footer "stick" to the bottom of the window 
-            even when there is little or no page content. Unfortunately due to some of the limitations 
-            of web components this can't be built into the footer component, but an example of how to 
-            do this can be found here on the docs home page: <a href="index.html#sticky-footer">Docs Home Page</a></p>
+            even when there is little or no page content. Unfortunately due to some of the limitations  
+            of web components this can't be built into the footer component. However, you can do this with 
+            flexbox as follows:
+            <ul>
+                <li>The byu-header, page-content div, and byu-footer should all be children of the same containing element</li>
+                <li>The containing element should be have the styles <code>height: 100%</code>, <code>display: flex</code>, and <code>flex-direction: column</code></li>
+                <li>The page-content div should have a style of <code>flex-grow: 1</code></li>
+                <li>The height of any ancestors of the containing element should also be set to 100%.</li>
+            </ul>
+        </p>
+
+        Here's a simple example:
+
+        <pre><code class="language-html">
+            &lt;style&gt;
+                html, body {
+                    height: 100%;
+                }
+
+                containing-element {
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                }
+
+                .page-content {
+                    flex-grow: 1;
+                }
+            &lt;/style&gt;
+
+            &lt;html&gt;
+                &lt;body&gt;
+                    &lt;div class="containing-element"&gt;
+
+                        &lt;byu-header&gt;
+                            &lt;h1 slot="site-title"&gt;Your Site Title Here&lt;/h1&gt;
+                        &lt;/byu-header&gt;
+
+                        &lt;div class="page-content"&gt;
+                            &lt;!-- Put your site content here --&gt;
+                        &lt;/div&gt;
+
+                        &lt;byu-footer&gt;&lt;/byu-footer&gt;
 
+                    &lt;/div&gt;
+                &lt;/body&gt;
+            &lt;/html&gt;
 
+        </code></pre>        
+
         <h2>Site Footer</h2>
         <p>
             Some sites may need to embed their own links and content in the footer.  You can accomplish this by placing

diff --git a/docs/index.html b/docs/index.html
@@ -132,45 +132,14 @@ <h2>Max Page Width</h2>
         </code></pre>        
 
         <h2 id="sticky-footer">Sticky Footer</h2>
-        <p>We strongly recommend adding some code to make the footer "stick" to the bottom of the window even when there is little or no page content. There are several ways to accomplish this, but here's a simple one using flexbox:</p>
 
-        <pre><code class="language-html">
-            &lt;style&gt;
-                html {
-                    height: 100%;
-                }
-
-                body {
-                    display: flex;
-                    flex-direction: column;
-                    height: 100%;
-                }
-
-                .page-content {
-                    flex-grow: 1;
-                }
-            &lt;/style&gt;
-
-            &lt;html&gt;
-                &lt;body&gt;        
-                    &lt;byu-header&gt;
-                        &lt;h1 slot="site-title"&gt;Your Site Title Here&lt;/h1&gt;
-                    &lt;/byu-header&gt;
+        <p>We strongly recommend adding some code to make the footer "stick" to the bottom of the window even when there is little or no 
+            page content. A discussion of how to do this can be found on <a href="byu-footer.html">the footer docs page</a>.</p>
 
-                    &lt;div class="page-content"&gt;
-                        &lt;!-- Put your site content here --&gt;
-                    &lt;/div&gt;
-
-                    &lt;byu-footer&gt;&lt;/byu-footer&gt;
-                &lt;/body&gt;
-            &lt;/html&gt;
-
-        </code></pre>        
-
-
-
+        <h2>More Updates Coming Soon</h2>
         <p>
-            Feel free to check back here for updates. While the code needed to use the core components is not expected to change, the look and feel of
+            A new version of these components is scheduled to be released every two weeks, so feel free to check back here for updates. 
+            While the code needed to use the core components is not expected to change, the look and feel of
             each component may change over time, and new features may be added.
         </p>
         <p>