added .pull-left/right-{screen size} layout utilities#11983
added .pull-left/right-{screen size} layout utilities#11983andrewscofield wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
The @screen-XX vars are deprecated. Use @screen-XX-min instead.
|
Implementation of #11259. |
|
fixed those changes you mentioned @cvrebert |
|
Still missing spaces before some curly braces. |
|
Assuming mdo were to approve of this feature, it would also need documentation. |
|
Not so sure I want to add this. We're getting a little ahead of ourselves with this kind of stuff. |
|
Ok ok, this isn't bad feature, but what is its real usage? How do you want to use it? I don't see a point to float element to right on small screens, but not float it on large screens. |
|
@mdo I'd consider it the mobile first version of pull-left/right. Allow somebody to setup floats on items above a breakpoint without having to set an override for mobile. The alternative is to add this media query code to every class that needs to be left as block level up to a certain breakpoint. @zdroid Its actually just the opposite. Its for floating on larger screens but not mobile. |
|
A requirement for this functionality has been identified in issue wet-boew/wet-boew#4191. As indicated by @apotropaic, the use case is to only float an element from a particular breakpoint on. Currently it's all or nothing, but it doesn't always make sense to float a particular element on small screens, only on larger ones. |
|
I have this exact requirement right now where I need elements (in this case a button) to float to the right of their column at larger sizes, but when columns are stacked below the "sm" breakpoint, the float no longer makes sense and they should be aligned to the left instead. I can obviously handle this myself but just wanted to chime in with another real world use case. |
|
I think that |
|
Haha! I had an idea for .pull-reset, just a class which has 2014/1/23 Chris Rebert notifications@github.com
Zlatan Vasović - ZDroid |
|
We'll pass on this for now. Sounds nice, but just like with the other grid tiers and responsive utilities, I'm super meh on adding all these utility classes that may or may not get used. |
|
😞 |
|
@cvrebert Was this really something we wanted us to add? If so, make a case for it <3. |
|
@mdo I think he just wanted I just don't know is the adding breakpoint good with semver. It fixes a responsivity bug, which is important to Bootstrap (it's mobile-first), so it's worth breaking the semver rules. |
|
@apotropaic Does this affect examples? Looks like jumbotron example isn't reponsive. |
|
@zdroid I'm not sure I know what you mean. This wouldn't affect -pull-* at all. It adds .pull-left-* classes which would be used at the discretion of each developer if they decided they specifically wanted something to be float:none (browser default), until a certain break point. |
|
@apotropaic I know, but it can be done simpler. .pull-right {
@media ... {
float: right;
}
} |
|
Yes, but this assumes pull-right/left shouldn't ever work on mobile, which is not true. |
|
Depends. I don't use it personally but there should be someone who wants 2014/1/24 apotropaic notifications@github.com
Zlatan Vasović - ZDroid |
6 participants
These are useful in situations where you have a layout like at the top of the Narrow Jumbotron Template:
http://getbootstrap.com/examples/jumbotron-narrow/
If the navigation on the top right had the below
.pull-right-smit would be a normal block level item up to the sm breakpoint, preventing the 'Project Name' from awkwardly folding up and wrapping.