Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !16345

Combined Media Queries

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/gotbahn/combine-media-queries into master 10 years ago
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 16

Created by: gotbahn

Bootstrap uses a lot of repeated media queries, this is proposal to combine them.

I found in issue tracker quite similar, approved pull request "Media query mixins" #13014. But it only changes hardcoded media queries to mixins (in my opinion not in better way to write code inside) and what is more important not combining media queries in output CSS.

So inside proposal changed all media queries to media mixins declarations, that called in media-queries.less file collector.

Media mixins naming composed of parts from media queries: @media screen and (min-width: @screen-sm-min) {...} -> .media-screen-min-sm() {...}

Benefits:

  • combined media queries;
  • reduced little bit size of bootstrap.css from 3kb, bootstrap.min.css from 2.5kb
  • mechanism to scale media queries for LESS Bootstrap users without adding post processors

Concerns:

  • non standard way of use mixins possible only in LESS
  • CSS way to write media queries, media mixins should always wrap content
  • I founded that bootstrap not supported LESS extends, so didn't find way better than add .navbar-form to .form-inline. Of course form.less should not know anything about navbar.less.
Compare
  • master (base)

and
  • latest version
    5820860b
    1 commit, 2 years ago

16 files
+ 300
- 217

    Preferences

    File browser
    Compare changes
le‎ss‎
mix‎ins‎
grid‎.less‎ +19 -30
bootstr‎ap.less‎ +3 -0
carous‎el.less‎ +1 -2
dropdow‎ns.less‎ +1 -1
forms‎.less‎ +20 -24
grid‎.less‎ +14 -6
jumbotr‎on.less‎ +3 -1
media-que‎ries.less‎ +56 -0
modal‎s.less‎ +2 -2
navba‎r.less‎ +114 -75
navs‎.less‎ +6 -2
print‎.less‎ +1 -1
responsive-u‎tilities.less‎ +50 -68
table‎s.less‎ +3 -1
theme‎.less‎ +1 -2
type‎.less‎ +6 -2
less/mixins/grid.less
+ 19
- 30
  • View file @ 5820860b


@@ -43,24 +43,20 @@
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
@media (min-width: @screen-sm-min) {
.media-min-sm() {
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
.make-sm-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
.make-sm-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
.make-sm-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
}
@@ -71,24 +67,20 @@
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
@media (min-width: @screen-md-min) {
.media-min-md() {
.make-md-column(@columns; @gutter: @grid-gutter-width) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
.make-md-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
.make-md-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
.make-md-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
}
@@ -100,23 +92,20 @@
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-lg-min) {
}
.media-min-lg() {
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
.make-lg-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
.make-lg-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
.make-lg-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
}
less/mixins/grid.less
+ 19
- 30
  • View file @ 5820860b


@@ -43,24 +43,20 @@
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
@media (min-width: @screen-sm-min) {
.media-min-sm() {
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
.make-sm-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
.make-sm-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
.make-sm-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
}
@@ -71,24 +67,20 @@
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
@media (min-width: @screen-md-min) {
.media-min-md() {
.make-md-column(@columns; @gutter: @grid-gutter-width) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
.make-md-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
.make-md-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
.make-md-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
}
@@ -100,23 +92,20 @@
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-lg-min) {
}
.media-min-lg() {
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
.make-lg-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
.make-lg-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
.make-lg-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
}
less/bootstrap.less
+ 3
- 0
  • View file @ 5820860b


@@ -48,3 +48,6 @@
// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";
// Media queries
@import 'media-queries';
less/carousel.less
+ 1
- 2
  • View file @ 5820860b


@@ -232,8 +232,7 @@
// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {
.media-screen-min-sm() {
// Scale up the controls a smidge
.carousel-control {
.glyphicon-chevron-left,
less/dropdowns.less
+ 1
- 1
  • View file @ 5820860b


@@ -201,7 +201,7 @@
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
less/forms.less
+ 20
- 24
  • View file @ 5820860b


@@ -457,13 +457,11 @@ input[type="checkbox"] {
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
.media-min-sm() {
// Kick in the inline
@media (min-width: @screen-sm-min) {
.form-inline,
.navbar-form {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
@@ -561,16 +559,6 @@ input[type="checkbox"] {
.make-row();
}
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
@@ -578,21 +566,29 @@ input[type="checkbox"] {
.has-feedback .form-control-feedback {
right: (@grid-gutter-width / 2);
}
}
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: @screen-sm-min) {
.media-min-sm() {
.form-horizontal {
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
.control-label {
padding-top: ((@padding-large-vertical * @line-height-large) + 1);
font-size: @font-size-large;
}
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.form-group-sm {
.control-label {
padding-top: (@padding-small-vertical + 1);
font-size: @font-size-small;
less/grid.less
+ 14
- 6
  • View file @ 5820860b


@@ -9,14 +9,22 @@
.container {
.container-fixed();
}
@media (min-width: @screen-sm-min) {
.media-min-sm() {
.container {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
}
.media-min-md() {
.container {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
}
.media-min-lg() {
.container {
width: @container-lg;
}
}
@@ -61,7 +69,7 @@
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.media-min-sm() {
.make-grid(sm);
}
@@ -70,7 +78,7 @@
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.media-min-md() {
.make-grid(md);
}
@@ -79,6 +87,6 @@
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.media-min-lg() {
.make-grid(lg);
}
less/jumbotron.less
+ 3
- 1
  • View file @ 5820860b


@@ -32,8 +32,10 @@
.container {
max-width: 100%;
}
}
@media screen and (min-width: @screen-sm-min) {
.media-screen-min-sm() {
.jumbotron {
padding: (@jumbotron-padding * 1.6) 0;
.container &,
less/media-queries.less 0 → 100644
+ 56
- 0
  • View file @ 5820860b

//
// Media Queries
// --------------------------------------------------
// Max
// --------------------------------------------------
@media (max-width: @grid-float-breakpoint-max) {
.media-max-grid-float-breakpoint();
}
@media (max-width: @screen-xs-max) {
.media-max-xs();
}
// Min-Max
// --------------------------------------------------
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.media-min-sm-max-sm();
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.media-min-md-max-md();
}
// Min
// --------------------------------------------------
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint();
}
@media screen and (min-width: @screen-sm-min) {
.media-screen-min-sm();
}
@media (min-width: @screen-sm-min) {
.media-min-sm();
}
@media (min-width: @screen-md-min) {
.media-min-md();
}
@media (min-width: @screen-lg-min) {
.media-min-lg();
}
// Print
// --------------------------------------------------
@media print {
.media-print();
}
less/modals.less
+ 2
- 2
  • View file @ 5820860b


@@ -131,7 +131,7 @@
}
// Scale up the modal
@media (min-width: @screen-sm-min) {
.media-min-sm() {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
@@ -145,6 +145,6 @@
.modal-sm { width: @modal-sm; }
}
@media (min-width: @screen-md-min) {
.media-min-md() {
.modal-lg { width: @modal-lg; }
}
less/navbar.less
+ 114
- 75
  • View file @ 5820860b


@@ -16,8 +16,10 @@
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
}
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar {
border-radius: @navbar-border-radius;
}
}
@@ -30,13 +32,14 @@
.navbar-header {
&:extend(.clearfix all);
}
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-header {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
@@ -59,8 +62,10 @@
&.in {
overflow-y: auto;
}
}
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
@@ -109,8 +114,14 @@
> .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
}
}
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.container,
.container-fluid {
> .navbar-header,
> .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
@@ -128,8 +139,10 @@
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px;
}
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-static-top {
border-radius: 0;
}
}
@@ -141,12 +154,16 @@
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
}
.media-min-grid-float-breakpoint() {
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
@@ -175,8 +192,10 @@
> img {
display: block;
}
}
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-brand {
.navbar > .container &,
.navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
@@ -218,7 +237,10 @@
margin-top: 4px;
}
@media (min-width: @grid-float-breakpoint) {
}
.media-min-grid-float-breakpoint() {
.navbar-toggle {
display: none;
}
}
@@ -233,13 +255,15 @@
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
line-height: @line-height-computed;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.media-max-grid-float-breakpoint() {
// Dropdowns get custom display when collapsed
.navbar-nav {
.open .dropdown-menu {
position: static;
float: none;
@@ -261,9 +285,11 @@
}
}
}
}
.media-min-grid-float-breakpoint() {
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
.navbar-nav {
float: left;
margin: 0;
@@ -275,6 +301,7 @@
}
}
}
}
@@ -292,11 +319,15 @@
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow);
// Mixin behavior for optimum display
.form-inline();
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
// Undo 100% width for pull classes
}
.media-max-grid-float-breakpoint() {
.navbar-form {
.form-group {
margin-bottom: 5px;
&:last-child {
@@ -304,12 +335,10 @@
}
}
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-form {
width: auto;
border: 0;
margin-left: 0;
@@ -358,8 +387,10 @@
.navbar-text {
.navbar-vertical-align(@line-height-computed);
}
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-text {
float: left;
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
@@ -375,7 +406,7 @@
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @grid-float-breakpoint) {
.media-min-grid-float-breakpoint() {
.navbar-left { .pull-left(); }
.navbar-right {
.pull-right();
@@ -464,8 +495,39 @@
color: @navbar-default-link-active-color;
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
.btn-link {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
}
}
}
}
@media (max-width: @grid-float-breakpoint-max) {
.media-max-grid-float-breakpoint(){
.navbar-default {
.navbar-nav {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
@@ -495,33 +557,6 @@
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
.btn-link {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
}
}
}
}
// Inverse navbar
@@ -598,8 +633,34 @@
color: @navbar-inverse-link-active-color;
}
}
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
.btn-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
}
}
}
}
@media (max-width: @grid-float-breakpoint-max) {
.media-max-grid-float-breakpoint() {
.navbar-inverse {
.navbar-nav {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
@@ -635,26 +696,4 @@
}
}
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
.btn-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
}
}
}
}
less/navs.less
+ 6
- 2
  • View file @ 5820860b


@@ -172,8 +172,10 @@
top: auto;
left: auto;
}
}
@media (min-width: @screen-sm-min) {
.media-min-sm() {
.nav-justified {
> li {
display: table-cell;
width: 1%;
@@ -201,8 +203,10 @@
> .active > a:focus {
border: 1px solid @nav-tabs-justified-link-border-color;
}
}
@media (min-width: @screen-sm-min) {
.media-min-sm-min() {
.nav-tabs-justified {
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
border-radius: @border-radius-base @border-radius-base 0 0;
less/print.less
+ 1
- 1
  • View file @ 5820860b


@@ -5,7 +5,7 @@
// Inlined to avoid the additional HTTP request: h5bp.com/r
// ==========================================================================
@media print {
.media-print() {
*,
*:before,
*:after {
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
1
css
1
css
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
1
1 participant
Administrator
Reference: twbs/bootstrap!16345
Source branch: github/fork/gotbahn/combine-media-queries

Menu

Explore Projects Groups Snippets