Breakpoints and containers

Themalize has been written using a desktop-first approach to responsive web design with five optional breakpoint sizes included using max-width values. These are used to apply the widths for the container styles and for the responsive modifier classes available for other layout utilities.

Breakpoints (anchor)

All breakpoints are optional to allow enabling only those required to help minimise the size of the compiled styles. They control whether or not each breakpoint is used for any enabled layout utilities with responsive modifiers.

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;

As described above Themalize uses max-width values for a desktop first approach to responsive design so 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) {

}

Containers (anchor)

With $enable-containers: true; the container utilities are compiled using the breakpoint Sass variables regardless of whether or not each breakpoint is enabled above.

.container, .container-xl, .container-lg, .container-md, .container-sm, .container-xs {
  --container-mx: auto;
  width: 100%;
  max-inline-size: var(--container-size);
  margin-inline: var(--container-mx);
  padding-inline: var(--container-px);
}

.container-xl {
  --container-size: 1601px;
}

.container-lg {
  --container-size: 1281px;
}

.container-md {
  --container-size: 1025px;
}

.container-sm {
  --container-size: 769px;
}

.container-xs {
  --container-size: 481px;
}

@if $enable-containers {

.container, .container-xl, .container-lg, .container-md, .container-sm, .container-xs {
  --container-mx: auto;
  width: 100%;
  max-inline-size: var(--container-size);
  margin-inline: var(--container-mx);
  padding-inline: var(--container-px);
}

.container-xl {
  --container-size: #{$breakpoint-xl};
}


.container-lg {
  --container-size: #{$breakpoint-lg};
}

.container-md {
  --container-size: #{$breakpoint-md};
}

.container-sm {
  --container-size: #{$breakpoint-sm};
}

.container-xs {
  --container-size: #{$breakpoint-xs};
}

} // END [if/containers]