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?

mdo added 3 commits Oct 18, 2016
… has no breakpoint modifier in the class name
@mdo mdo added feature css v4 labels Oct 19, 2016
@fgilio
Copy link

@fgilio fgilio commented Oct 19, 2016

I like this idea! +1

@andyl
Copy link

@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
Copy link

@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
Copy link
Member Author

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

@TheBuzzer67 TheBuzzer67 commented Oct 19, 2016

Visually prefer to keep -xs

@Studio384
Copy link

@Studio384 Studio384 commented Oct 19, 2016

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

@leonardosalles
Copy link

@leonardosalles 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
Copy link

@sharkness 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
Copy link

@maximebeaudoin 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
Copy link

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

@sethwhitaker 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
Copy link

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

@cdelarbre
Copy link

@cdelarbre 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 mentioned this pull request Oct 21, 2016
11 of 11 tasks complete
@bogdaniel
Copy link

@bogdaniel 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
Copy link

@AlexanderYW 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 2 commits Nov 1, 2016
@mdo
Copy link
Member Author

@mdo 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
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
Copy link

@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
Projects
Alpha 6
Fixed/Merged
Linked issues

Successfully merging this pull request may close these issues.

None yet

You can’t perform that action at this time.