Grid breakpoint for 480px

luaz commented 11 years ago

The smallest grid column supported at the moment is .col-xs- (<768px), which seems like a big range.

Would it be advisable to have: .col-xs- (>480px and <768px) .col-tn- (<480px)

Reason being it still seems reasonable to have a 2 column grid on 768px (240px - 384px per column), while 480px have a stacked column.

Using the current .col-xs- (<768px) option, putting one stacked column on 768px seems too wide on some cases, and 2 columns on 480px seems ridiculous at times.

donquixote commented 10 years ago

I am renaming the ranges to xs0 and xs1 instead of xs-A and xs-B. @mdo I realized that the PR was closed, but I can imagine that others might be interested.

donquixote commented 10 years ago

@luaz, @andyl, @carasmo, everyone who is interested: The additional break point in https://github.com/donquixote/bootstrap/tree/xs-AB-subdivision works great and does not interfere at all with existing behaviors. We could work on that as a "fork" (while still pulling changes from upstream), until everyone switches to Bootstrap 4.

The question is whether 480 is enough, or if we want additional break points / intervals. The subdivision concept allows for a lot more than just one new break point. We could have xs0, xs1, xs2, xs3, xs00, xs01, xs02, md0, md1, md2, md00, md01, etc.

We could discuss this in the issue queue over at donquixote/bootstrap, to spare the inbox of the bootstrap maintainers.

youngrok commented 10 years ago

:+1: IMHO, tn(<=480px) is much more important than lg (>1200px). In most cases md is enough. Who design website for over 1200px? It's useless. If the number of cases matters, just downsize all. xs<=480, sm<=768, md<=992, lg>=992. Or just add tn<=480 please.

matsaukeo commented 10 years ago

Just to add to this - I've used bootstrap 3 on about 5 projects now and each time I've had to update the LESS files to add this extra breakpoint. Each time it's caused headaches as passing things on to developers or even looking back on it gets confusing. Also the responsive visibility classes have bitten me in the ass a few times!!

It sounds as though @mdo agrees that we need the extra break point and I can understand why he's being careful about adding it. I hope this gets added as standard sooner rather than later.

Big thanks to @mdo!

grandfatha commented 10 years ago

Amazing thread; I too need the hack for the additional breakpoint right now.

Writing websites was fun before we had to support all those devices in a single html file.

baxang commented 10 years ago

After reading this long thread, I decided to add a breakpoint myself and wrote a quick-and-dirty patch that adds a 'tn(tiby)' which covers 0..479px and shrink xs's coverage to 480..767px.

Since I'm using bootstrap-sass for my rails project, my patch is supposed to be included after vanila bootstrap.scss. What it does is that it adds some mixins for the new breakpoint and re-declare grids. In addition it also takes care of responsive-utilities such as .visible-tn.

I didn't consider compatibility issues as I just migrated from TB 2.3.
I didn't want to change a line of TB core so I copied code from the original and modified accordingly. My code is not well tested, but is working well for me.

The code is https://gist.github.com/baxang/9775806 and any feedback would be appreciated.

aakilfernandes commented 10 years ago

Anyone have a way to do this without a precompiler? Some of us dummies still use vanilla CSS

aakilfernandes commented 10 years ago

For those interested: Foundation uses a breakpoint of 640 http://foundation.zurb.com/docs/components/grid.html

Jakobud commented 10 years ago

One simple reason why 768px is too big for the smallest breakpoint:

Google Nexus 7 Tablet

It's the #1 most used Android tablet in the world. And it's (css pixel ratio equivalent) portrait width is 600px (603px in the 2012 version). So you have a 7" tablet, that you are forced to see a mobile (xsmall) layout, which is quite awkward on such a big screen.

Foundation has the same problem as their smallest breakpoint is still 640px.

+1 for adding a 480px breakpoint to Bootstrap.

outdoorsman commented 10 years ago

I totally agree!

Jakobud commented 10 years ago

Is this thing going to get added before 4.0? Because I assume 4.0 is probably 9+ months away.

cvrebert commented 10 years ago

@Jakobud Nope. Read the prior comments for why.

grandfatha commented 10 years ago

I think everyone agrees that the breakpoint is necesary, but it is also been clarified that such a change will not occur in a point release. In the meantime, the only way is roll the hotfix above on your own. Might be nice to add a link to the grid documentation or have another example demonstrating this like the sticky footer stuff.

Jakobud commented 10 years ago

Okay, looking forward to this change. I see the gists above for adding in some preliminary 480px support, but is there a non-official branch of Bootstrap that supports it anywhere?

Also, in the current version, how come _variables.scss still contains references to screen-xs? Was it left in there on accident? I see it still used in _responsive-utilities, _tables and _navbar. Why is this stuff in there in the framework doesn't support that breakpoint? Maybe I missed the conversation on this so I'm a little confused.

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

donquixote commented 10 years ago

@aakilfernandes Since you asked if this can be done without a precompiler: You can simply download the bootstrap.css from https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision.

@Jakobud This one is a branch.. https://github.com/donquixote/bootstrap/tree/xs-AB-subdivision

This is by far not the only approach posted in this thread, but I think it is the only one that is completely backwards compatible (unless someone can point out why it is not).

antespi commented 10 years ago

@grandfatha @Jakobud Here you have a Bootstrap branch example for minimal changes to add a breakpoint at 480px: https://github.com/Teachnova/bootstrap/tree/hs I call this breakpoint HS (Horizontal Small Device)

Files changed (8 abr 2014 up-to-date):

mixins/grid-framework.less : Add a new column to .make-grid-columns
mixins/grid.less : Add .make-hs-columns (offset, push, pull)
variables.less : Add @container-hs, @screen-hs-min, @screen-hs-max
tables.less : .table-responsive until @screen-hs-max
responsive-utilities.less : .visible-hs and hidden-hs (and so on)

I like Bootstrap framework for many reason but these are the most important for me:

You can use it fast, the learning curve is low slope
You can change its behavior very easly, because it is modular and follow DRY principles. You can check it with this example or @donquixote example.
If you make any change you don't lose the "innovation train" because @mdo and @fat do not make crazy changes until next mayor version. This issue is an example of that.

It's a good idea to show how flexible is this framework in documentation

matsaukeo commented 10 years ago

For those times that I want the grid system to kick in at the "xs" breakpoint and not before it, I've started leaving the default system alone and just "undoing" the system below that point. So:

I add "col-xs-6" or whatever which means that by default we get columns from 0px upwards. Then I add something like:

@media ((max-width:@screen-xs-min -1)){
    .selector [class^="col-"]{
        float:none;
        width:auto;
    }   
}

Seems like a fairly non-destructive stop gap while we wait for the extra break point and we can add it only when needed.

DePalmo commented 10 years ago

And I thought that I was the only one who is having problems with missing 480px breakpoint. Don't get me wrong, I do love Bootstrap 3 and I do admire the developers who created it (let's face it, they have made our lives much easier), but I don't understand what were they thinking when they selected breakpoints for BS3. Too much of people are still using smaller devices (below 768px wide) and (as do others) when I have to develop a properly responsive website, I always need to build my custom breakpoints for at least 640px and 480px, sometimes even for 320px (despite it very narrow and even I'm dropping support for it...).

I will give it a try to @andyl solution and shall see. The only thing I'm concerned is that his solution is for 480-767px and what will happen on 320px wide screens. Will see.

@mdo Keep up the good work, but if your time allows it, do please consider a update in near future that will add 480px breakpoint.

Jakobud commented 10 years ago

For anyone interested, I've made improvements to @andyl 's Mid-Small Layout (480px-767px) for SCSS (LESS version link added). I added in the visibility utilities for the Mid-Small layout .visible-ms and .hidden-ms as well as redefined the visibility classes for the Extra Small layout .visible-xs and .hidden-xs since the Extra Small breakpoint range changes with the addition of Mid-Small. I've also optimized the file to use Bootstrap's predefined grid generation and visibility class mixins.

SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709

LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0

You can simply @import 'bootstrap-ms'; at the end of bootstrap.scss or bootstrap.less to use this. This allows you to fully utilize the Mid-Small layout grid and visibility classes without altering the original Bootstrap source (at the tiny expense of redefining a few xs classes).

uroslates commented 10 years ago

Here is how I would implemented this - with minimal effort (btw I'll guess you're using less):

In your variables.less file (or wherever you are defining your custom variables) add following: @screen-xxs: 470px;
Create a new file called xxs-grid.less. 2.The xxs-grid.less file's content is: @media (max-width: @screen-xxs) { .make-grid(xxs); }
In your main less file (eg. styles.less) include the newly added file: @import "./xxs-grid.less";
On your html element use newly created css class: class="col-lg-2 col-sm-4 col-md-3 col-xxs-12 col-xs-6"

Jakobud commented 10 years ago

@uroslates the problem has already been solved. Look at my gist.

ilovett commented 10 years ago

@Jakobud your solution is sass ... can you provide a less solution?

wesdollar commented 10 years ago

I forked what @Jakobud had contributed and fixed some sass to less issues. I briefly took it for a test drive, and it seemed to work as intended. I'll be doing some more robust testing today and tomorrow as part of the project I am currently working on. Will report back with any issues that are found if there are any. Thanks @Jakobud !

https://gist.github.com/wdollar/135ec3c80faaf5a821b0

brgrz commented 10 years ago

How are we supposed to use these since they are not actually LESS mixins? From within other LESS files I mean.

wesdollar commented 10 years ago

@brgrz Did you see where I fixed the LESS issues?

https://gist.github.com/wdollar/135ec3c80faaf5a821b0

Everything there is LESS ready. I'll keep an eye out for your reply in case you still have questions.

@ilovett See the link above if you still need the LESS solution.

noctivityinc commented 10 years ago

@Jakobud I tried the responsive helpers you created and they were causing troubles so I hacked BS responsive_utilities and added support for hidden-ms, seems to work:

https://gist.github.com/noctivityinc/1790c6b3e48befe91ac7

Also, if you want inline support for ALL responsive helpers just change _mixins.scss to:

  @mixin responsive-visibility($parent) {
      #{$parent} {
        display: block !important;
      }
      span#{$parent} {
        display: inline-block !important;
      }
      tr#{$parent} { display: table-row !important; }
      th#{$parent},
      td#{$parent} { display: table-cell !important; }
    }

Jakobud commented 10 years ago

Did you figure out the problem with mine? Feel free to fork the gist and post the fixes if you can figure it out. Thought I tested it thoroughly but I guess I missed something? What was the problem exactly? Do you have a jsfiddle or something you can show?

noctivityinc commented 10 years ago

There were a variety of issues, mostly dealing with visibility when it was not that screen size. Since you were setting a block to be visible only during that screen size, by forcing it to not be visible when dealing with a larger size we couldn’t use other classes. Basically, without diving into it too much, without resetting the hidden-ms class for the other screen sizes back to a default state it messed up the display.

Best,

Josh

Joshua Lippiner
.:t 704.323.5661 .:e jlippiner@noctivity.com (mailto:jlippiner@noctivity.com)

On Wednesday, May 28, 2014 at 3:57 PM, Jake Wilson wrote:

Did you figure out the problem with mine? Feel free to fork the gist and post the fixes if you can figure it out. Thought I tested it thoroughly but I guess I missed something? What was the problem exactly? Do you have a jsfiddle or something you can show?

— Reply to this email directly or view it on GitHub (https://github.com/twbs/bootstrap/issues/10203#issuecomment-44456293).

Jakobud commented 10 years ago

Ah okay I will look into that. Thanks

hnrch02 commented 10 years ago

GitHub's Gist feature also allows for comments. No need to do all the discussing related to that custom implementation on this issue tracker.

noctivityinc commented 10 years ago

True but I felt it relates to the bug/situation the same as some of the posts and anyone searching for this issue could benefit.

Joshua Lippiner
.:t 704.323.5661 .:e jlippiner@noctivity.com (mailto:jlippiner@noctivity.com)

On Thursday, May 29, 2014 at 1:05 AM, Heinrich Fenkart wrote:

GitHub's Gist feature also allows for comments. No need to do all the discussing related to that custom implementation on this issue tracker.

— Reply to this email directly or view it on GitHub (https://github.com/twbs/bootstrap/issues/10203#issuecomment-44494774).

twbs / bootstrap

Grid breakpoint for 480px #10203

SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709

LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0