Permalink
Browse files

Media query (grid and responsive utilities) overhaul

Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:

* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up

Alongside that, we've updated our media queries to better handle
advanced grid layouts:

* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
db45a60
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)

We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).

Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:

* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range

-----

Fixes the following:

* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
  • Loading branch information...
mdo committed Aug 12, 2013
1 parent 95affa3 commit a2b9988eb908e5b95fb253aac7fde0fbd61c375e
Showing with 776 additions and 246 deletions.
  1. +2 −2 _layouts/default.html
  2. +2 −10 assets/css/docs.css
  3. +168 −116 css.html
  4. +405 −56 dist/css/bootstrap.css
  5. +1 −1 dist/css/bootstrap.min.css
  6. +145 −51 less/grid.less
  7. +50 −8 less/responsive-utilities.less
  8. +3 −2 less/variables.less
View
@@ -25,7 +25,7 @@ <h1>{{ page.title }}</h1>
<div class="container bs-docs-container">
<div class="row">
- <div class="col-lg-3">
+ <div class="col-md-3">
<aside class="bs-sidebar" role="complementary">
<ul class="nav bs-sidenav">
{% if page.slug == "getting-started" %}
@@ -42,7 +42,7 @@ <h1>{{ page.title }}</h1>
</ul>
</aside>
</div>
- <main class="col-lg-9" role="main">
+ <main class="col-md-9" role="main">
{{ content }}
</main>
</div>
View
@@ -637,17 +637,9 @@ body {
------------------------- */
.responsive-utilities-test {
margin-top: 5px;
- padding-left: 0;
- list-style: none;
- overflow: hidden; /* clear floats */
-}
-.responsive-utilities-test li {
- position: relative;
- float: left;
- width: 25%;
}
-.responsive-utilities-test li + li {
- margin-left: 10px;
+.responsive-utilities-test .col-xs-6 {
+ margin-bottom: 10px;
}
.responsive-utilities-test span {
padding: 15px 10px;
Oops, something went wrong.

8 comments on commit a2b9988

@boulox

This comment has been minimized.

Show comment
Hide comment
@boulox

boulox Aug 12, 2013

Contributor

The grid system start de become way too complex with this xs, md, l, ......

Contributor

boulox replied Aug 12, 2013

The grid system start de become way too complex with this xs, md, l, ......

@saviomd

This comment has been minimized.

Show comment
Hide comment
@saviomd

saviomd Aug 13, 2013

I disagree about being too complex because of 4 levels..

What I think weird is they being xs, sm, md and lg.
I would go the other way around and make them sm, md, lg and xl.
When I think about "small" a phone comes to my mind, the same goes with "medium" making me visualize a tablet.
Having "small" as a tablet and "medium" as a standard desktop is a little of a mind fuck, or is just me?

But It's great that the queries are back to only "min-width" instead of "min-width and max-width".
No need anymore to go with 4 classes if the block occupies the same number of columns.

I disagree about being too complex because of 4 levels..

What I think weird is they being xs, sm, md and lg.
I would go the other way around and make them sm, md, lg and xl.
When I think about "small" a phone comes to my mind, the same goes with "medium" making me visualize a tablet.
Having "small" as a tablet and "medium" as a standard desktop is a little of a mind fuck, or is just me?

But It's great that the queries are back to only "min-width" instead of "min-width and max-width".
No need anymore to go with 4 classes if the block occupies the same number of columns.

@eratzlaff

This comment has been minimized.

Show comment
Hide comment
@eratzlaff

eratzlaff Aug 13, 2013

Contributor

Thank for the mention. 👍 @mdo

Contributor

eratzlaff replied Aug 13, 2013

Thank for the mention. 👍 @mdo

@boulox

This comment has been minimized.

Show comment
Hide comment
@boulox

boulox Aug 13, 2013

Contributor

@saviomd just check the final kb of bootstrap.css since xs sm lg xl been widely included in the framework.

Contributor

boulox replied Aug 13, 2013

@saviomd just check the final kb of bootstrap.css since xs sm lg xl been widely included in the framework.

@saviomd

This comment has been minimized.

Show comment
Hide comment
@saviomd

saviomd Aug 13, 2013

@boulox yes, everything changed with this commit.
but it wasn't like that when it didn't exist the 4th level

@boulox yes, everything changed with this commit.
but it wasn't like that when it didn't exist the 4th level

@realtebo

This comment has been minimized.

Show comment
Hide comment
@realtebo

realtebo Aug 14, 2013

This is absolutely one of the best improvement you have ever done ! Thanks, thanks, thanks, thanks...

This is absolutely one of the best improvement you have ever done ! Thanks, thanks, thanks, thanks...

@mimhufford

This comment has been minimized.

Show comment
Hide comment
@mimhufford

mimhufford Aug 14, 2013

Am I missing something or is there a reason there are no col-xs-offsets?

Am I missing something or is there a reason there are no col-xs-offsets?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 14, 2013

Member

@mimhufford: It's deliberate; note the "Offsets" row of the table in http://twbs.github.io/bootstrap/css/#grid-options

Member

cvrebert replied Aug 14, 2013

@mimhufford: It's deliberate; note the "Offsets" row of the table in http://twbs.github.io/bootstrap/css/#grid-options

Please sign in to comment.