Responsive display utilities #20934

Merged
merged 8 commits into from Nov 1, 2016

Projects

Fixed/Merged in Alpha 6

@mdo
Member
mdo commented Oct 19, 2016 edited

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?

mdo added some commits Oct 18, 2016
@mdo mdo make spacer utils responsive by grid tier
fa0227f
@mdo mdo update scale to add two levels, document them
e4c4045
@mdo mdo Explore responsive display utils, but with a twist: lowest breakpoint…
… has no breakpoint modifier in the class name
3ef7334
@mdo mdo added feature css v4 labels Oct 19, 2016
@fgilio
fgilio commented Oct 19, 2016

I like this idea! +1

@andyl
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
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
Member
mdo commented Oct 19, 2016 edited

@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
Member
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
Member
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

Visually prefer to keep -xs

@Studio384

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

@leonardosalles

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

@sharkness

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

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.

@KrisOlszewski
KrisOlszewski commented Oct 19, 2016 edited

@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

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
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.

@Loupiot
Loupiot commented Oct 21, 2016

#{$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.

@mbrambilla mbrambilla referenced this pull request in cast-org/figuration Oct 21, 2016
Closed

Utilities - Refactor #80

11 of 11 tasks complete
@bogdaniel

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
AlexanderYW commented Oct 25, 2016 edited

@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 added some commits Nov 1, 2016
@mdo mdo Merge branch 'v4-dev' into responsive-display 1a43771
@mdo mdo make floats use the same format
d778120
@mdo mdo remove those files from diff
cb49bc5
@mdo mdo remove that file too
e2ce92e
@mdo mdo back to mixins, add float-none mixin
6e89678
@mdo
Member
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

1 of 4 checks passed

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build is in progress
Details
savage Savage has initiated its special separate Travis CI build
hound No violations found. Woof!
@mdo mdo deleted the responsive-display branch Nov 1, 2016
@j0an
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