Adding media queries breakpoints variables

docs/assets/css/bootstrap.css

@@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
   display: inherit !important;
 }
 
-@media (min-width: 768px) and (max-width: 979px) {
+@media (min-width: 768px) and (max-width: 992px) {
   .visible-phone {
     display: none !important;
   }
@@ -5362,7 +5362,7 @@ a.list-group-item.active > .badge,
   }
 }
 
-@media (min-width: 980px) {
+@media (min-width: 992px) {
   .visible-phone {
     display: none !important;
   }

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 {

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 {
 

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;
   }

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

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%;

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;

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; }

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%;

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;