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

Ts/implement flexbox grid #21

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Conversation

timsully
Copy link
Collaborator

@timsully timsully commented May 2, 2020

This PR adds a flexbox grid layout globally. Not entirely sure if this will impact anything negatively since we haven't had a grid yet? You can see me using the grid in the home page vaguely.

Addressing Issue #20

@timsully timsully requested a review from elimisteve May 2, 2020 02:11
@timsully timsully linked an issue May 2, 2020 that may be closed by this pull request
@timsully
Copy link
Collaborator Author

timsully commented May 2, 2020

Also, disregard this PR. I need to address the footer's margin-top properties as it is all wonky right now.

@timsully
Copy link
Collaborator Author

timsully commented May 2, 2020

The footer issue should be resolved now. This footer will always be positioned at the bottom of the page, but not fixed. Let me know if it looks good to you?


<div class="row"><h2 class="col-lg-4">What is this?</h2></div>

<div class="row"><p class="col-lg-6">It would make sense to introduce in this body of text what this is and how to get started. The rest of this text is lorem ipsum suspendisse ante urna, condimentum vel diam eget, condimentum convallis elit. Maecenas congue enim quis tincidunt fermentum. Sed sit amet neque sapien. Donec ac nunc tincidunt, sodales dolor sit amet, egestas diam.
Copy link
Member

Choose a reason for hiding this comment

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

@timsully What do you think we should say on the homepage that isn't said on the into slide/step?

position: absolute;
right: 0;
bottom: 0;
left: 0;
Copy link
Member

Choose a reason for hiding this comment

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

@timsully These 4 pin the footer to the bottom of the visible page. But on mobile/narrow screens, our content fills their screen vertically. Therefore, pinning the footer to the bottom of the visible page results in the footer visually overlapping with our page content.

I'm for just keeping the footer where it was! If the page content is short enough then the footer will be above the fold, otherwise not, which is all good IMO 🙂 .

-ms-flex-preferred-size: 20%;
flex-basis: 20%;
max-width: 20%;
}
Copy link
Member

Choose a reason for hiding this comment

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

@timsully Tell you editor to always add a newline, please.


<Link to="/step/intro">
<button class="primary hvr-ripple-out">Get Started</button>
Copy link
Member

Choose a reason for hiding this comment

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

@timsully I'd put this <Link> in the same container as the text above so that its left edge is always aligned. Right now this button is aligned on large screens, then is indented too far (around 1000px, maybe?), then isn't indented enough (below around 640px or 767px?).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement flexbox grid
2 participants