Breakpoint

The breakpoints system of Kube is minimalistic and enough in a lot of cases, if you need more flexibility then Kube has custom breakpoints.

Small/mobile screens Other screens
<= 768px > 768px

Kube is accepted that in any html template the head section has a meta tag for media queries is mandatory, which allows to implement breakpoints:

<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
@include for-mobile { // for small/mobile screens only }
@include not-mobile { // not for small/mobile screens }

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.

Mobile #

To adapt the layout for the phones screens. Typically, this hides certain navigation blocks or secondary elements and converts content styles for better readability on mobile devices.

Use mixin in your SASS to make the text red on small screens, for example:

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

Hide something for mobile screens

Use mixin in your SASS to make the text red for all screens except small screens, for example:

Sass
@include not-mobile {
    .be-red-not-mobile {
        color: red;
    }
}
Output
@media only screen and (min-width: 768px) {
    .be-red-not-mobile {
        color: red;
    }
}

Custom breakpoints #

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) {}