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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update 12 col breakpoint from medium to large #4078

Merged

Conversation

sowasred2012
Copy link
Contributor

@sowasred2012 sowasred2012 commented Oct 20, 2021

Done

  • Updated the default breakpoint setting at which the layout switches to 12 columns
  • Updated the breakpoint at which the side nav is displayed to match the above

Fixes #3209

QA

  • Open demo
  • Resize the browser, see that the layout doesn't break
  • Compare to live site, see that the demo layout changes to 12 column at a wider breakpoint

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

  • PR should have one of the following labels to automatically categorise it in release notes:
    • Feature 馃巵, Breaking Change 馃挘, Bug 馃悰, Documentation 馃摑, Maintenance 馃敤.
  • Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
    • if CSS class names are not changed it can be bugfix relesase (x.x.X)
    • if CSS class names are changed/added/removed it should be minor version (x.X.0)
    • see the wiki for more details
  • Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
  • Documentation side navigation should be updated with the relevant labels.

@webteam-app
Copy link

Demo starting at https://vanilla-framework-4078.demos.haus

@lyubomir-popov
Copy link
Contributor

lyubomir-popov commented Oct 20, 2021

If anything breaks it is likely going to be on ubuntu.com or another site that relies on the currentbreakpoints. Nevertheless I think we should procede with this and include qa steps in the upgrade guide.

@@ -116,7 +116,7 @@
}
}

@media (min-width: $breakpoint-medium) {
@media (min-width: $breakpoint-large) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe it should use $threshold-6-12-col? This way it would be connected to grid rather than screen size. I guess it may be closer to what we want.

@bartaz
Copy link
Contributor

bartaz commented Oct 20, 2021

@sowasred2012 @lyubomir-popov While working on grid-based show/hide utils I started some exploration about vanilla breakpoints and how they relate to grid and utils. I feel like we may need more discussion on what we want to achieve to avoid fixing the symptoms.

Let's have some catch up call tomorrow.

Copy link
Contributor

@bartaz bartaz left a comment

Choose a reason for hiding this comment

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

LGTM.

We will follow up on this one in #4081.

@sowasred2012 sowasred2012 merged commit cb8a2ea into canonical:vanilla-3.0 Oct 21, 2021
@sowasred2012 sowasred2012 deleted the update-12-col-breakpoint branch October 21, 2021 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants