Breakpoints

Themalize has been written using a desktop-first approach to responsive web design with five optional breakpoint sizes included using max-width values.

The breakpoints are used for the enabled responsive layout utilities and are all optional to allow optimizing the compiled styles. Disabled by default, each can be enabled as required in the configuration.scss document.

$enable-breakpoint-xl:    false;
$enable-breakpoint-lg:    false;
$enable-breakpoint-md:    false;
$enable-breakpoint-sm:    false;
$enable-breakpoint-xs:    false;

The breakpoint sizes can be customized in the properties.scss document or as !default values can also be edited by custom overrides if preferred.

$breakpoint-xl:    1601px !default;
$breakpoint-lg:    1281px !default;
$breakpoint-md:    1025px !default;
$breakpoint-sm:    769px !default;
$breakpoint-xs:    481px !default;

Using the desktop-first approach described above, where the breakpoints are used they're included as follows:

@media (max-width: 1601px) {

}

@media (max-width: 1281px) {

}

@media (max-width: 1025px) {

}

@media (max-width: 769px) {

}

@media (max-width: 481px) {

}