Global Breakpoint & grid changes

[caw310]

Description

Original RFC

This initiative tracks the progress of sunsetting Formation in favor of the new CSS Library which will house all of the styles (element selectors, utility classes, variables, tokens, etc) VA.gov imports and uses. There are 4 high level steps in this migration:

1. Set up CSS Library so it's maintained separately from the component library.
2. Migrate global base styles from Formation to CSS Library
3. Migrate application utility class usage
4. Archive Formation

High Level User Story/ies As a VFS team member, I want the VA design system breakpoint and grid to be up-to-date so that my apps are using the USWDS breakpoint and grid specifications.

Hypothesis or Bet If we update the typography globally, all apps will be using the USWDS font so all VFS team apps are using the USWDS breakpoint and grid specifications so there is consistency across VA.gov.

OKR Quarterly Operations and Maintenance Delivery - (Q1) FY Q2 2024

Definition of done What must be true in order for you to consider this epic complete? We have updated to USWDS breakpoint and grid specifications.

[humancompanion-usds]

We've deployed the change to introduce the 640px breakpoint. We did some analysis and decided we also want to introduce the 880px breakpoint, which we'll do in June (likely 6/19). Down the road we'll evaluate adding the 1440px breakpoint (26% of users have a screen that large). We have not set a date for deprecated the 768px breakpoint and that will likely be in FY24 Q4.

[humancompanion-usds]

While we introduced the 640px breakpoint in CSS library I was remiss in not adding that it is not yet in vets-website.

Breakpoints: Tablet (640px) breakpoint added - Thursday May 30th

• The ask: You may start using this narrower breakpoint as your new tablet size on this date but there is no requirement to do so.
• IMPORTANT: We will not be deprecating the 768px breakpoint this quarter.
• We are considering adding 880px and 1440px breakpoints based on current user device traffic but will not do so this quarter.

[caw310]

Update for Q2

• The 640px breakpoint was added Thursday May 30.
• We will not be deprecating the 768px breakpoint in Q2.
• We will be adding an 880px breakpoint in Q3
• We may add 1440px breakpoint, based on current user device traffic but do not have a timeline for this yet.

[humancompanion-usds]

@caw310 - Please file new issues for the remaining work and then close this one given that we did what we intended to initially do here. Thanks.

[caw310]

Closing initiative as the breakpoint and grid changes are done.

[caw310]

Referencing the new initiative to add 880px and 1400px breakpoints. https://github.com/department-of-veterans-affairs/va.gov-team/issues/85612