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

Conversation

Projects
@mdo
Member

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?

mdo added some commits Oct 18, 2016

Explore responsive display utils, but with a twist: lowest breakpoint…
… has no breakpoint modifier in the class name

@mdo mdo added feature css v4 labels Oct 19, 2016

@fgilio

This comment has been minimized.

Show comment
Hide comment
@fgilio

fgilio Oct 19, 2016

I like this idea! +1

fgilio commented Oct 19, 2016

I like this idea! +1

@andyl

This comment has been minimized.

Show comment
Hide comment
@andyl

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

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

This comment has been minimized.

Show comment
Hide comment
@saviomd

saviomd 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 ;)

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 19, 2016

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 19, 2016

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 19, 2016

Member

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;
  }
}
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

This comment has been minimized.

Show comment
Hide comment
@TheBuzzer67

TheBuzzer67 Oct 19, 2016

Visually prefer to keep -xs

TheBuzzer67 commented Oct 19, 2016

Visually prefer to keep -xs

@Studio384

This comment has been minimized.

Show comment
Hide comment
@Studio384

Studio384 Oct 19, 2016

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

Studio384 commented Oct 19, 2016

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

@leonardosalles

This comment has been minimized.

Show comment
Hide comment
@leonardosalles

leonardosalles Oct 19, 2016

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

leonardosalles commented Oct 19, 2016

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

@sharkness

This comment has been minimized.

Show comment
Hide comment
@sharkness

sharkness Oct 19, 2016

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.

sharkness commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@maximebeaudoin

maximebeaudoin Oct 19, 2016

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.

maximebeaudoin commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kris-ellery

kris-ellery 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!

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

This comment has been minimized.

Show comment
Hide comment
@sethwhitaker

sethwhitaker Oct 19, 2016

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

sethwhitaker commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@fgilio

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

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

This comment has been minimized.

Show comment
Hide comment
@cdelarbre

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

cdelarbre 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 Oct 21, 2016

Closed

Utilities - Refactor #80

11 of 11 tasks complete
@bogdaniel

This comment has been minimized.

Show comment
Hide comment
@bogdaniel

bogdaniel Oct 23, 2016

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% :))

bogdaniel commented Oct 23, 2016

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

This comment has been minimized.

Show comment
Hide comment
@AlexanderYW

AlexanderYW 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;
        }
    }
}

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 added some commits Nov 1, 2016

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Nov 1, 2016

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@j0an

j0an Nov 14, 2016

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

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