Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #36330
Closed
Open
Issue created May 11, 2022 by Administrator@rootContributor2 of 2 checklist items completed2/2 checklist items

Finer control on utilities responsiveness

Created by: romaricpascal

Prerequisites

  • I have searched for duplicate or closed feature requests
  • I have read the contributing guidelines

Proposal

I realise that I never got to post the thoughts for utilities improvement I mentioned in #36029.

The idea would be to provide finer control over the responsiveness of utilities and let users control:

  1. which breakpoints the utilities get generated for, allowing the responsive option to accept either:

    • a list of breakpoints, with the subset of breakpoints for which to generate the utility
    • a breakpoint => (list of value identifiers) map, allowing to not only subset breakpoints, but which values of the utility get set for them

    For example:

    (
      "max-width": (
      property: max-width,
      class: mw,
      responsive: (md), // Generates only `mw-100` and `mw-md-100`
      values: (100: 100%)
    ),

    This may call for a special default key for the list to enable configuring what's generated for the class without breakpoint (or even disable its generation altogether by associating it to null or an empty list ().

  2. which values the utility take at specific breakpoints, by setting its value as a breakpoint => actual value map. I've got a bit less faith of this one, especially if there's a way to have fine grained utilities, but that could save stringing a few utilities together

Motivation and context

The motivation is mostly to avoid adding many breakpoints when switching a utility to be responsive. This could also let developers further optimise their build, but it'll likely be less burden to use something like PurgeCSS for that (though not every user will have access/be willing to use it or a similar tool as part of their build).

Assignee
Assign to
Time tracking