Skip to content

Remove desktop-first CSS utilities

Since the introduction of GitLab UI's CSS utils library and the possibility of creating responsive utilities, we have seen a mix of desktop-first and mobile-first utilities make their way in the bundle. This has rendered our library highly unpredictable as nothing in the naming conventions hints at whether a utility is desktop-first or mobile-first. This can even become a blocker as some layouts can potentially not be achieved at all using utils when some breakpoint ranges are made unavailable by existing utils.

Over the last year, we have been progressively eliminating desktop-first utils in favor mobile-first ones:

  1. We have added a Stylelint rule to warn against gl-media-breakpoint-down usages: #1946 (closed)
  2. We have removed a number of desktop-first utils:
  3. Along with the removals, GitLab's codebase has been migrated to use mobile-first alternatives when the invalid utils were being used.

As of creating this issue, 4 desktop-first utils remain in GitLab UI. Those are being removed from GitLab and will then be deleted from GitLab UI as well.

Note: replacements below are suggestions only and should work in the most generic cases. Other utils might more relevant depending on the use cases.

gl-sm-flex-direction-column

  • To be replaced with gl-flex-direction-column gl-md-flex-direction-row.
  • GitLab migration: gitlab!136248 (merged)

gl-xs-flex-direction-column

  • To be replaced with gl-flex-direction-column gl-sm-flex-direction-row.
  • GitLab migration: gitlab!136567 (merged)

gl-xs-w-full

gl-xs-mb-3

Edited by Paul Gascou-Vaillancourt