Breakpoints

Mobile, tablet and large screens #

By default, Superkube has three breakpoints for different screens:

// =Scales
$scales: (
    breakpoints: (
        lg: 1442px, // large screens
        md: 1024px, // medium (tablet)
        sm: 768px // small (mobile)
    )
);

For each breakpoint there is a mixin:

@include for-lg { ... }
@include for-md { ... }
@include for-sm { ... }

And also mixin, which sets properties for all screens except small (mobile):

@include not-sm { ... }

Example

@include for-sm {
    .be-red-on-mobile {
        color: red;
    }
}
@include not-sm {
    .be-blue-except-mobile {
        color: blue;
    }
}

Output

@media only screen and (max-width: 767px) {
    .be-red-on-mobile {
        color: red;
    }
}

@media only screen and (min-width: 768px) {
    .be-blue-except-mobile {
        color: blue;
    }
}

Why not mobile first? #

The concept of mobile first is beautiful, but in practice, it is difficult to implement. In our experience and observations, it's easier and more efficient to make wireframes and create a design for the normal screen resolution within 1000-1400px, and then adapt it in the process of the layout (of course, if it's not mobile only interface).

The fact is that everyone who creating a website design or interface, works on large screens, rather than on mobile devices. Therefore mobile first turns the whole process upside down, complicating the work. Moreover, normal screens require complex interaction design, it takes more time. Mobile screens are more simple and straightforward. Therefore, it is easier for a professional to start with a complex one and then adapt it for the simple screens.

Custom breakpoints #

The breakpoint mixin allows to set up custom media queries.

Min

// min-width 768px;
@include breakpoint($min: 768px) {}

// output
@media (min-width: 768px) {}

Min & Max

// min-width 768px and max-width 1024px;
@include breakpoint(768px, 1024px) {}

// output
@media (min-width: 768px) and (max-width: 1024px) {}

Max

// max-width 1024px;
@include breakpoint($max: 1024px) {}

// output
@media (max-width: 768px) {}