Breakpoints
Breakpoints form the foundation of responsive design. Use them to control when you adapt your layout to different viewports or device sizes.
The Telerik and Kendo UI Responsive Layout System includes six default breakpoints, which you can customize.
| Breakpoint | Class Infix | Dimensions |
|---|---|---|
| Extra small | None | <576 px |
| Small | sm | ≥576 px |
| Medium | md | ≥768 px |
| Large | lg | ≥992 px |
| Extra large | xl | ≥1200 px |
| Extra extra large | xxl | ≥1400 px |
Breakpoints represent common device sizes and viewport dimensions. These ranges provide a strong and consistent foundation for building layouts for nearly any device.
You can customize these breakpoints by using Sass.
$kendo-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Media Queries
The Responsive Layout System uses only the minimum viewport width media query, However, the CSS utilities provide two more media query mixins that you can use if needed.
min-width
@include kendo-breakpoint-up(sm) { ... }
@include kendo-breakpoint-up(md) { ... }
@include kendo-breakpoint-up(lg) { ... }
@include kendo-breakpoint-up(xl) { ... }
@include kendo-breakpoint-up(xxl) { ... }
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint.
.my-element {
display: none;
}
@include kendo-breakpoint-up(sm) {
.my-element {
display: block;
}
}
These Sass mixins translate into the compiled CSS using the values declared in the $kendo-breakpoints map. For example:
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
max-width
@include kendo-breakpoint-down(sm) { ... }
@include kendo-breakpoint-down(md) { ... }
@include kendo-breakpoint-down(lg) { ... }
@include kendo-breakpoint-down(xl) { ... }
@include kendo-breakpoint-down(xxl) { ... }
// Example: Hide from medium breakpoint and down.
@include kendo-breakpoint-down(md) {
.my-element {
display: none;
}
}
These mixins take those declared breakpoints, subtract .02px from them, and use them as max-width values.
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
Single Breakpoint
Media queries and mixins can also target a single segment of screen sizes using the minimum and maximum breakpoint widths.
@include kendo-breakpoint-only(xs) { ... }
@include kendo-breakpoint-only(sm) { ... }
@include kendo-breakpoint-only(md) { ... }
@include kendo-breakpoint-only(lg) { ... }
@include kendo-breakpoint-only(xl) { ... }
@include kendo-breakpoint-only(xxl) { ... }
For example the @include kendo-breakpoint-only(md) { ... } will result in :
@media (min-width: 768px) and (max-width: 991.98px) { ... }
