Use standard grid system in design and engineering

[AlicjaSuska]

Details

RFC 237

Type of debt

Structural - this type of debt slows down the design and development teams’ work.

Estimated amount of work

M - up to 1 month

Areas affected

The whole app - some improvements may be needed.

Impact

Improves the responsive experience, prevents alignment issues and inconsistencies.

Urgency

Medium

[AlicjaSuska]

Action items

Engineering

• Ensure current dev projects are compliant to containers
• Campaigns
• Breadcrumbs
 needs to align to the fluid container
• Page headers (design: @AlicjaSuska)
• Server home and Cloud home containers
• Should this be a fluid container with padding?

Design:

• Add designs to the page headers project to ensure they display well at small, medium, and large screen sizes (in addition to the current XL layouts) and build those responsive layouts We probably need components of these items as well
• DONE: Create XL template in Figma with a centered container template Available here: figma
• DONE: Adjust breadcrumbs Figma components for fluid container layouts Should left align to the margins provided in the new fluid layout grid
• DONE: Move templates to the component system
• DONE: Clean up grid styles
• Ensure browser templates and grid styles align to engineering counterparts
• Determine the minimum width we will design for - proposal is 320px
• Slowly transition page layouts such as settings to the responsive grid system

Note: /search and repository pages are sufficiently responsive without adopting this grid system

[AlicjaSuska]

@rrhyne I've pasted the action items from your RFC. Can you review them and add issues/assignees/estimates so we can close this topic? I'll add new grids to the 'breaders'.

When it comes to the last point 'Slowly transition page layouts such as settings to the responsive grid system', I think we should list all the areas that need attention and plan the work.

@quinnkeast FYI

[rrhyne]

@AlicjaSuska as this is part of the web team priorities, I think you should take over here. If you place the action items in the ticket instead of a comment, others can edit.

These should be done:

• Ensure browser templates and grid styles align to engineering counterparts
• Determine the minimum width we will design for - proposal is 320px

I'm not sure if thes require action currently:

• Slowly transition page layouts such as settings to the responsive grid system Choices made for container selection and design templates will allow the correct alignment of containers
• Ensure current dev projects are compliant to containers Design templates aligned to existing containers to solve the problem
• Campaigns Uses the existing containers and a fix was published for the issue here.

[felixfbecker]

Is there still work here for design and/or engineering? From an engineering standpoint, most pages have always used containers and Bootstrap grids.

[AlicjaSuska]

I think it's still in progress from our part. I'll be making more changed to the DS in the incoming weeks. I'll come back to this issue to see if all the boxes are checked.