Responsive CSS
When adding custom CSS to the theme it’s often needed that it’s responsive. This can be done with media queries.
In Chap theme there are 2 different contexts where you can insert CSS:
Additional CSS (LESS) can be added to Semantic UI context from Chap Theme -> SUI tab. The code editor there is separated into multiple components and you have 2 sections for each component:
There are also “read-only” sections so you can take a look at what’s going on under the hood.
The responsive CSS belongs to the overrides section and can take advantage of the Semantic UI breakpoint variables.
@media only screen and (max-width: @largestMobileScreen) {
/**
* Mobile.
*/
}
@media only screen and (min-width: @largestMobileScreen + 1) and (max-width: @largestTabletScreen) {
/**
* Tablet.
*/
}
@media only screen and (min-width: @largestTabletScreen + 1) and (max-width: @largestSmallMonitor) {
/**
* Small screen.
*/
}
@media only screen and (min-width: @largestSmallMonitor + 1) {
/**
* Large screen.
*/
}
@media only screen and (min-width: @largestMobileScreen + 1px) {
/**
* Not mobile.
*/
}
@media only screen and (max-width: @chapMobileMenuBreakpoint) {
/**
* When mobile menu kicks in (main and sticky menu items are
* hidden and a link to open the mobile menu is shown).
*/
}
@media only screen and (max-width: @chapMobileLayoutBreakpoint) {
/**
* When mobile layout kicks in (header elements such as brand,
* widgets and menu are displayed on top of each other instead
* of side by side; sidebars are moved below main content).
*/
}The variables for breakpoints are defined in the default/globals/site.variables section in the Chap Theme -> SUI editor. If needed, you can override them to use custom values in the globals/site.variables section.
@mobileBreakpoint : 320px;
@tabletBreakpoint : 768px;
@computerBreakpoint : 992px;
@largeMonitorBreakpoint : 1200px;
@widescreenMonitorBreakpoint : 1920px;@largestMobileScreen : (@tabletBreakpoint - 1px);
@largestTabletScreen : (@computerBreakpoint - 1px);
@largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);The normal CSS context can not use Semantic UI variables but also doesn’t need to be recompiled after making changes. Normal context applies to CSS inputs such as:
In normal context you can use static pixel values that match the Semantic UI breakpoints.
@media only screen and (max-width: 767px) {
/**
* Mobile.
*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
/**
* Tablet.
*/
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
/**
* Small screen.
*/
}
@media only screen and (min-width: 1200px) {
/**
* Large screen.
*/
}
@media only screen and (min-width: 768px) {
/**
* Not mobile.
*/
}
@media only screen and (max-width: 991px) {
/**
* When mobile menu kicks in (main and sticky menu items are
* hidden and a link to open the mobile menu is shown instead).
*/
}
@media only screen and (max-width: 767px) {
/**
* When mobile layout kicks in (header elements such as brand,
* widgets and menu are displayed on top of each other instead
* of side by side; sidebars are moved below the main content).
*/
}
Leave a comment