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
  • Merge requests
  • !20934

Responsive display utilities

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge responsive-display into v4-dev Oct 19, 2016
  • Overview 0
  • Commits 8
  • Pipelines 0
  • Changes 12

This explores adding responsive display utilities, replacing the static inline, inline-block, and block options we have currently. The twist here though is that the lowest breakpoint doesn't have a breakpoint abbreviation in the class name.

Here's an example of what I mean with just the display: none utility:

/* Same as `.d-xs-none`, but without the `-xs` part */
.d-none { display: none !important; }

@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
}

I'm exploring this since the lack of xs could make it an easier transition to v4 for those who used the v3 utilities. Plus it's a bit more accurate to what's happening in the compiled CSS since there's no media query around those styles.

Thoughts?

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: responsive-display