Skip to content

Commit

Permalink
rename @screen-XX to @screen-XX-min for clarity+unambiguity
Browse files Browse the repository at this point in the history
  • Loading branch information
@cvrebert
cvrebert committed Aug 21, 2013
1 parent d666a89 commit a3a02f9
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 48 deletions.
22 changes: 11 additions & 11 deletions less/mixins.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -558,25 +558,25 @@
padding-right: (@gutter / 2);

// Calculate width based on number of columns available
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
Expand All @@ -591,15 +591,15 @@
padding-right: (@gutter / 2);

// Calculate width based on number of columns available
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}

// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
Expand All @@ -609,7 +609,7 @@
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
Expand All @@ -624,25 +624,25 @@
padding-right: (@gutter / 2);

// Calculate width based on number of columns available
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
Expand Down
2 changes: 1 addition & 1 deletion less/navs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
}
}

@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
> li {
display: table-cell;
width: 1%;
Expand Down
48 changes: 24 additions & 24 deletions less/responsive-utilities.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,17 @@
.responsive-visibility();
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
Expand All @@ -63,16 +63,16 @@
.responsive-visibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
Expand All @@ -85,15 +85,15 @@
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
Expand All @@ -106,16 +106,16 @@
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
Expand All @@ -126,17 +126,17 @@
.responsive-invisibility();
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
Expand All @@ -148,16 +148,16 @@
.responsive-invisibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
Expand All @@ -170,15 +170,15 @@
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
Expand All @@ -191,16 +191,16 @@
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
Expand Down
2 changes: 1 addition & 1 deletion less/tables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ table {
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

@media (max-width: @screen-sm) {
@media (max-width: @screen-sm-min) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
Expand Down
26 changes: 15 additions & 11 deletions less/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,25 +200,29 @@
// --------------------------------------------------

// Extra small screen / phone
@screen-xs: 480px;
@screen-phone: @screen-xs;
@screen-xs: 480px;// NOTE: Deprecated in favor of @screen-xs-min
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
@screen-sm: 768px;// NOTE: Deprecated in favor of @screen-sm-min
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;

// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
@screen-md: 992px;// NOTE: Deprecated in favor of @screen-md-min
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
@screen-lg: 1200px;// NOTE: Deprecated in favor of @screen-lg-min
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;

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


// Grid system
Expand Down

1 comment on commit a3a02f9

@masterbee
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 vote from me, it was a bit confusing. There is also a @grid-float-breakpoint variable which I think should be renamed as well since it is a bit confusion as to what its purpose is. Maybe something like @grid-stack-point? this depicts its function a bit better since it is the point were the grids start to stack. IMHO.

Please sign in to comment.