Responsive Design

YouTube Video

Description

The responsive function offers the possibility to adjust elements based on the available width of the root element and not as usual across the entire screen width (@media-queries). For this we use the container queries.

The container query is automatically placed on the root element of the component. This element receives the class names according to the width and the respective breakpoint. Four different breakpoints are already specified ({SM: 384, MD: 576, LG: 768, XL: 960}). You can also use your own breakpoints. Important: Existing ones are not expanded, but replaced!

Example

In CCM, the responsive function is activated by default and only working in CSS is required. In this example, the design of the elements with the class name "title" is changed according to the breakpoints:

CSS:

.title {font-size: 8pt;}
.SM .title {font-size: 14pt;}
.MD .title {font-size: 30pt;}

Own breakpoints

It is possible to set your own breakpoints. It should be noted that the standard breakpoints then no longer exist. Own breakpoints can be specified in the config:

config: {
     "breakpoints": {BP1: 300, BP2: 600},
     // ...
}

Deactivate Responsive Design

To deactivate this function the parameter "breakpoints" in the config has to be set to false:

config: {
     "breakpoints": false,
     // ...
}

Lister for Breakpoints

A ccm instance can have an instance method for listening to the responsive breakpoints:

this.onbreakpoint = width => console.log( width );

This callback can also be set in the instance configuration with higher priority:

config: {
  onbreakpoint: width => console.log( width )
}