Adding to Bootstrap’s breakpoints variables

In Bootstrap projects you can use the default breakpoint sizes as variables, like this:

/* ================================================
Screen sizes
=================================================== */

$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

$screen-sm-max: 767px;
$screen-md-max: 991px;
$screen-lg-max: 1199px;

…which is useful when writing media queries, like this:

@media (min-width: $screen-sm-min) {
    .upload-item {
        font-size:1.2em;
    }
}

@media (min-width: $screen-md-min) {
    .upload-item {
        font-size:1.5em;
    }
}

I could have chosen any sizes as breakpoints really, but it made sense to match them to the default grid sizes in Bootstrap (col-sm-6, col-md-6 etc).

Although sometimes I find the size range before $screen-sm-min a bit too large, especially when you think about the range of phone sizes. So I add an additional:

screen-s-min: 500px;
screen-s-max:499px;