Implement sticky footer using flexbox#637
Merged
yangshun merged 3 commits intofacebook:masterfrom May 6, 2018
ahmadalfy:master
Merged
Implement sticky footer using flexbox#637yangshun merged 3 commits intofacebook:masterfrom ahmadalfy:master
yangshun merged 3 commits intofacebook:masterfrom
ahmadalfy:master
Conversation
Implemented the solution provided [here](https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) to allow the footer to stick downward no matter how much content the page contain.
Implement sticky footer using flexbox
Contributor
|
Deploy preview for docusaurus-preview ready! Built with commit aa21e00 |
yangshun
approved these changes
May 6, 2018
Contributor
yangshun
left a comment
There was a problem hiding this comment.
Thanks @ahmadalfy! This is great! I fully agree with your points. The CSS could really use some improvement. I have plans to rewrite the entire CSS along with making it easier to support theming.
Contributor
Author
|
Thank you I would like to contribute to that as well. I have experience working with CSS following different methodologies like ITCSS and BEM and working with pre-and post processors For big projects that gives room for theming. Please let me know if you have any plans existing for that and thank you for accepting my PR. |
Contributor
|
@ahmadalfy @yangshun Have folks passionate and knowledge about UX work on this makes me so happy. Thanks! 😄 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implemented the solution provided here to allow the footer to stick downward no matter how much content the page contain.
Motivation
Have a footer hanging above with a space below when not enough content is added is something that bothers everyone. Implementing that behavior on desktop is simple and progressively enhance the look of the website on new browsers.
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
This is a UI change affecting only the main stylesheet. I have tested the solution on the latest versions of the modern browsers (Firefox, Chrome, Safari, Edge) and IE11
Before:
After:
Notes
There were actually 2 issues when I was implementing that behavior:
box-sizingis following the browser's default and I am not sure if it is a good idea or not. People usually change it toborder-boxto easily calculate the dimensions of the boxes. I had to implement it on a certain block to overcome the collapse being applied to the box caused by themargin: 0 autoanddisplay: flex.