Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive display utilities #20934

Merged
merged 8 commits into from
Nov 1, 2016
Merged

Responsive display utilities #20934

merged 8 commits into from
Nov 1, 2016

Conversation

mdo
Copy link
Member

@mdo mdo commented Oct 19, 2016

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?

@fgilio
Copy link

fgilio commented Oct 19, 2016

I like this idea! +1

@andyl
Copy link

andyl commented Oct 19, 2016

Don't like this idea - BS could really use a built-in breakpoint that will handle the transition between portrait and landscape mode on a mobile device. PLEASE add .xs with a breakpoint of 480 px.

@saviomd
Copy link

saviomd commented Oct 19, 2016

Makes total sense.
Actually, the responsive grid we built in company a few years back (and still in use), doesn't have a 'size' indicator in the lowest breakpoint.
And by saying that, I think that everything should follow this idea (grid's col, text-align, pull, push, etc).
It will be a big breaking change coming from v3, but what the hell, find and replace for the win ;)

@mdo
Copy link
Member Author

mdo commented Oct 19, 2016

@andyl This isn't about what the breakpoints are. This is about adding responsive display utility classes and perhaps negating the xs breakpoint name from that class name.

Edit: To be clear, the xs breakpoint is 0. It doesn't go away, it's just negated from the class names.

@mdo
Copy link
Member Author

mdo commented Oct 19, 2016

And by saying that, I think that everything should follow this idea (grid's col, text-align, pull, push, etc).
It will be a big breaking change coming from v3, but what the hell, find and replace for the win ;)

Yeah, that's the idea @saviomd.

@mdo
Copy link
Member Author

mdo commented Oct 19, 2016

As a comparison, here's the float utils already in v4-dev. Note that the xs class has no wrapping media query. If this PR were to merge, I'd make the same change to the float-xs-* classes and remove the -xs part.

.float-xs-left {
  float: left !important;
}

.float-xs-right {
  float: right !important;
}

.float-xs-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}

@TheBuzzer67
Copy link

Visually prefer to keep -xs

@Studio384
Copy link

For consistency in naming, I would argue that leaving -xs in would be better.

@leonardosalles
Copy link

If it starts on zero I think that no makes any sense to have the xs prefix, I agree with this idea 👍

@sharkness
Copy link

For the sake of clarity and consistency, I really like the xs-. It was a bit of an adjustment, coming from v3, but it only takes a few minutes to get used to it. In my opinion something about using xs- feels semantically nice.

@maximebeaudoin
Copy link

I think it's a good idea. No breaking point it's like the default value. So using d-none makes sense. But removing the xs qualifier can be confusing for some people, you don't really know which screen will be affected. However, BS is mobile first so all default css should affect the smallest device first.

@kris-ellery
Copy link

kris-ellery commented Oct 19, 2016

@mdo I've been using this approach for couple of years and its been working great. It gives a lot of flexibility as you always start with default class name (breakpoint agnostic) and then override as you go up. Go for it!

@sethwhitaker
Copy link

I fully support this. As I've been developing v4 sites. Remembering to put -xs in there for a default value to apply to every breakpoint has been hard to remember

@fgilio
Copy link

fgilio commented Oct 19, 2016

As @maximebeaudoin said "BS is mobile first so all default css should affect the smallest device first" and continue up.
This makes so much sense.

@cdelarbre
Copy link

#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides

for all sides... a or not a ?

Personally I prefer {abbrev}{sides}-{breakpoint}-{size} even for "all" but both are logical.

@bogdaniel
Copy link

keeping as a rule xs md lg etc .. would be nice but in the same time why waste time to write xs when you can just do d-none instead of d-xs-none was even a bit hard to write :-). should flip a coin guys =D because this goes as a 50 - 50% :))

@AlexanderYW
Copy link

AlexanderYW commented Oct 25, 2016

@mdo wouldn't it be better to have "up" and "down" modifiers?

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        .float-#{$breakpoint}-left-up {
                float:left!important;
        }
        .float-#{$breakpoint}-right-up {
                float:right!important;
        }
        .float-#{$breakpoint}-none-up {
                float:none!important;
        }
    }
    @include media-breakpoint-down($breakpoint) {
        .float-#{$breakpoint}-left-down {
                float:left!important;
        }
        .float-#{$breakpoint}-right-down {
                float:right!important;
        }
        .float-#{$breakpoint}-none-down {
                float:none!important;
        }
    }
}

@mdo mdo added this to the v4.0.0-alpha.6 milestone Nov 1, 2016
@mdo
Copy link
Member Author

mdo commented Nov 1, 2016

Heads up, I've updated this PR to also include the same changes to the float utilities. Responsive spacers have also already landed in v4-dev with #20926.

@mdo mdo merged commit ffaad0a into v4-dev Nov 1, 2016
@mdo mdo deleted the responsive-display branch November 1, 2016 04:27
@j0an
Copy link

j0an commented Nov 14, 2016

.text-xs-center will still with the -xs?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.