Developer Adaptivity
Most of Semrush products are designed to work with data on the desktop, so adaptivity isn’t yet required for all products.
TIP
Most of the core components can be used on the smaller screens. You need to increase their size to the biggest (L) for ease of use on touch devices. You can find the examples in the Example tab.
If you are adding adaptivity to your interface, then use breakpoints described below, but remember to stretch the content in each range, except for really wide screens, where we recommend fixing the maximum content width to 1920px.
Breakpoints system
Here is a list of the main breakpoints we recommend using in the interfaces:
| Token | Default value | Usage |
|---|---|---|
screen-extra-small | 320px | The smallest possible breakpoint for mobile devices. |
screen-small | 768px | The most common breakpoint for tablet devices. |
screen-medium | 1200px | Our main breakpoint for desktop devices. |
screen-large | 1920px | Breakpoint for large desktop screens. |
Page layout
Use Grid component to build a page layout. The component has an adaptive API.
The adaptivity (css with media-queries) of components can be enabled by adding our babel-plugin-react-semcore plugin.
This is how your webpack.config.js might look like:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
include: /\/node_modules\/@semcore\//,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false, // if you use .babelrc
configFile: false, // if you use babel.config.js, doesn't affect babelrc option https://babeljs.io/docs/en/options#configfile
plugins: ['@semcore/babel-plugin-react-semcore'],
},
},
],
},
],
},
};module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
include: /\/node_modules\/@semcore\//,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false, // if you use .babelrc
configFile: false, // if you use babel.config.js, doesn't affect babelrc option https://babeljs.io/docs/en/options#configfile
plugins: ['@semcore/babel-plugin-react-semcore'],
},
},
],
},
],
},
};