Adding media queries breakpoints variables

9 files changed, 29 insertions, 13 deletions

diff --git a/less/carousel.less b/less/carousel.less
index 6d32755ee..43bef87e1 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -170,8 +170,8 @@
 }
 
 
-// Scale up controls for >768px
-@media screen and (min-width: 768px) {
+// Scale up controls for tablets and up
+@media screen and (min-width: @screen-tablet) {
 
   // Scale up the controls a smidge
   .carousel-control .glyphicon {
diff --git a/less/forms.less b/less/forms.less
index e0017fac7..72eab570d 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -514,7 +514,7 @@ select:focus:invalid {
 // Horizontal forms
 // --------------------------------------------------
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
 
   .form-horizontal {
 
diff --git a/less/grid.less b/less/grid.less
index 8162d9940..3ac727bc7 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -26,7 +26,7 @@
 .generate-small-grid-columns(@grid-columns);
 
 // Responsive: Tablets and up
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .container {
     max-width: 728px;
   }
@@ -38,14 +38,14 @@
 }
 
 // Responsive: Desktops and up
-@media screen and (min-width: 992px) {
+@media screen and (min-width: @screen-desktop) {
   .container {
     max-width: 940px;
   }
 }
 
 // Responsive: Large desktops and up
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: @screen-large-desktop) {
   .container {
     max-width: 1170px;
   }
diff --git a/less/jumbotron.less b/less/jumbotron.less
index d3c9ac21c..6ff696b56 100644
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -20,7 +20,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .jumbotron {
     padding: 50px 60px;
     border-radius: @border-radius-large; // Only round corners at higher resolutions
diff --git a/less/modals.less b/less/modals.less
index c05c3f7b0..144588a7b 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -120,7 +120,7 @@
 }
 
 // Scale up the modal
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
 
   .modal-dialog {
     left: 50%;
diff --git a/less/navbar.less b/less/navbar.less
index 01d747ef5..78b837bdf 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -269,7 +269,7 @@
 // Inverse navbar
 // --------------------------------------------------
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .navbar {
     padding-top: 0;
     padding-bottom: 0;
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index f6bfd9611..9cea0cef6 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -46,7 +46,7 @@
 
 
 // Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
+@media (min-width: @screen-tablet) and (max-width: @screen-desktop) {
   .visible-phone    { display: none !important; }
   .visible-tablet    { display: inherit !important; }
   .visible-desktop   { display: none !important; }
@@ -57,7 +57,7 @@
 }
 
 // For desktops
-@media (min-width: 980px) {
+@media (min-width: @screen-desktop) {
   .visible-phone     { display: none !important; }
   .visible-tablet    { display: none !important; }
   .visible-desktop   { display: inherit !important; }
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 793660710..6781a9582 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -22,7 +22,7 @@ html {
 }
 
 // Disable iOS/WinMobile font size changes
-@media screen and (max-device-width: 480px) {
+@media screen and (max-device-width: @screen-phone) {
   html {
     -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
diff --git a/less/variables.less b/less/variables.less
index 1c19fd514..e09547e8a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -369,6 +369,22 @@
 @component-offset-horizontal: 180px;
 
 
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Tiny screen / phone
+@screen-tiny:                480px;
+@screen-phone:               @screen-tiny;
+// Small screen / tablet
+@screen-small:               768px;
+@screen-tablet:              @screen-small;
+// Medium screen / desktop
+@screen-medium:              992px;
+@screen-desktop:             @screen-medium;
+// Large screen / wide desktop
+@screen-large:               1200px;
+@screen-large-desktop:       @screen-large;
+
 
 // Grid system
 // --------------------------------------------------
@@ -378,4 +394,4 @@
 // Padding, to be divided by two and applied to the left and right of all columns
 @grid-gutter-width:         30px;
 // Point at which the navbar stops collapsing
-@grid-float-breakpoint:     768px;
+@grid-float-breakpoint:     @screen-tablet;