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.

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

Hybrid sticky/relative positioned footer #2390

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
3 changes: 3 additions & 0 deletions scss/_footer.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
.footer {
position: sticky;
top: 100vh;

> * {
// scss-docs-start footer-part-css-vars
--#{$prefix}footer-gap: 0;
Expand Down
7 changes: 5 additions & 2 deletions scss/_reboot.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@
}
// scss-docs-end scroll-offset
// End mod

min-height: 100vh; // Boosted mod
}


Expand All @@ -63,10 +65,9 @@
// scss-docs-start reboot-body-rules
body {
position: relative; // Boosted mod: required for back-to-top component
min-height: 100vh; // Boosted mod
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
font-synthesis: none; // Boosted mod // 5
@include font-size(var(--#{$prefix}body-font-size));
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
Expand All @@ -75,10 +76,12 @@ body {
/* rtl:remove */
letter-spacing: $letter-spacing-base; // Boosted mod
background-color: var(--#{$prefix}body-bg); // 2
font-synthesis: none; // Boosted mod // 5
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
-webkit-font-smoothing: subpixel-antialiased; // Boosted mod
text-rendering: optimizespeed; // Boosted mod
@include font-size(var(--#{$prefix}body-font-size));
}
// scss-docs-end reboot-body-rules

Expand Down
5 changes: 0 additions & 5 deletions site/assets/scss/_boosted.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@
}
}

html,
body {
min-height: 100vh;
}

//
// Boosted logo
//
Expand Down
3 changes: 0 additions & 3 deletions site/assets/scss/_footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,5 @@
//

.bd-footer {
position: sticky; // Boosted mod
top: 100vh; // Boosted mod

// Boosted mod: no `a` selector since we use our Boosted footer component
}
2 changes: 2 additions & 0 deletions site/content/docs/5.3/components/footer.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ You can choose to display each part or not, except the last one which is mandato

If these available parts don't meet your specific needs, feel free to develop your own custom part accordingly to the Orange Design System.

The footer is positioned at the bottom of the window when the page content is smaller than the window, and at the bottom of the page when it is bigger.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might not be true for some DOM reasons. But for simple syntax where <footer> is a direct child of <body> it seems to work pretty well. Any opinion on this @julien-deramond ?


{{< callout warning >}}
This footer component is based on the [navbar component]({{< docsref "/components/navbar" >}}). Don't forget to import the corresponding SCSS file if you're using [Lean Sass imports]({{< docsref "/customize/optimize#lean-sass-imports" >}}).
{{< /callout >}}
Expand Down