Skip to content

Commit aa0d1f5

Browse files
kevin-larry-bauerblakemorgan
kevin-larry-bauer
authored and
blakemorgan
committed
Updating docs with better sticky footer examples (#295)
1 parent dd7e9e4 commit aa0d1f5

File tree

2 files changed

+56
-40
lines changed

2 files changed

+56
-40
lines changed

‎docs/byu-footer.html

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@
5050
box-sizing: border-box;
5151
}
5252
</style>
53-
53+
<link rel="stylesheet" href="lib/prism/themes/prism.css">
54+
<script src="lib/prism/prism.js"></script>
55+
<script src="lib/prism/plugins/normalize-whitespace/prism-normalize-whitespace.js"></script>
5456
</head>
5557

5658
<body>
@@ -80,11 +82,56 @@ <h2>University Footer</h2>
8082

8183
<h2>Sticky Footer</h3>
8284
<p>We strongly recommend adding some code to make the footer "stick" to the bottom of the window
83-
even when there is little or no page content. Unfortunately due to some of the limitations
84-
of web components this can't be built into the footer component, but an example of how to
85-
do this can be found here on the docs home page: <a href="index.html#sticky-footer">Docs Home Page</a></p>
85+
even when there is little or no page content. Unfortunately due to some of the limitations
86+
of web components this can't be built into the footer component. However, you can do this with
87+
flexbox as follows:
88+
<ul>
89+
<li>The byu-header, page-content div, and byu-footer should all be children of the same containing element</li>
90+
<li>The containing element should be have the styles <code>height: 100%</code>, <code>display: flex</code>, and <code>flex-direction: column</code></li>
91+
<li>The page-content div should have a style of <code>flex-grow: 1</code></li>
92+
<li>The height of any ancestors of the containing element should also be set to 100%.</li>
93+
</ul>
94+
</p>
95+
96+
Here's a simple example:
97+
98+
<pre><code class="language-html">
99+
&lt;style&gt;
100+
html, body {
101+
height: 100%;
102+
}
103+
104+
containing-element {
105+
display: flex;
106+
flex-direction: column;
107+
height: 100%;
108+
}
109+
110+
.page-content {
111+
flex-grow: 1;
112+
}
113+
&lt;/style&gt;
114+
115+
&lt;html&gt;
116+
&lt;body&gt;
117+
&lt;div class="containing-element"&gt;
118+
119+
&lt;byu-header&gt;
120+
&lt;h1 slot="site-title"&gt;Your Site Title Here&lt;/h1&gt;
121+
&lt;/byu-header&gt;
122+
123+
&lt;div class="page-content"&gt;
124+
&lt;!-- Put your site content here --&gt;
125+
&lt;/div&gt;
126+
127+
&lt;byu-footer&gt;&lt;/byu-footer&gt;
86128

129+
&lt;/div&gt;
130+
&lt;/body&gt;
131+
&lt;/html&gt;
87132

133+
</code></pre>
134+
88135
<h2>Site Footer</h2>
89136
<p>
90137
Some sites may need to embed their own links and content in the footer. You can accomplish this by placing

‎docs/index.html

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -132,45 +132,14 @@ <h2>Max Page Width</h2>
132132
</code></pre>
133133

134134
<h2 id="sticky-footer">Sticky Footer</h2>
135-
<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>
136135

137-
<pre><code class="language-html">
138-
&lt;style&gt;
139-
html {
140-
height: 100%;
141-
}
142-
143-
body {
144-
display: flex;
145-
flex-direction: column;
146-
height: 100%;
147-
}
148-
149-
.page-content {
150-
flex-grow: 1;
151-
}
152-
&lt;/style&gt;
153-
154-
&lt;html&gt;
155-
&lt;body&gt;
156-
&lt;byu-header&gt;
157-
&lt;h1 slot="site-title"&gt;Your Site Title Here&lt;/h1&gt;
158-
&lt;/byu-header&gt;
136+
<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
137+
page content. A discussion of how to do this can be found on <a href="byu-footer.html">the footer docs page</a>.</p>
159138

160-
&lt;div class="page-content"&gt;
161-
&lt;!-- Put your site content here --&gt;
162-
&lt;/div&gt;
163-
164-
&lt;byu-footer&gt;&lt;/byu-footer&gt;
165-
&lt;/body&gt;
166-
&lt;/html&gt;
167-
168-
</code></pre>
169-
170-
171-
139+
<h2>More Updates Coming Soon</h2>
172140
<p>
173-
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
141+
A new version of these components is scheduled to be released every two weeks, so feel free to check back here for updates.
142+
While the code needed to use the core components is not expected to change, the look and feel of
174143
each component may change over time, and new features may be added.
175144
</p>
176145
<p>

0 commit comments

Comments
 (0)