These styles allow for conditionally showing and hiding elements using a mobile-first approach.
Prefix | Description |
---|---|
(no prefix) | Not scoped to a breakpoint |
sm- | --breakpoint-sm (default: min-width 40em) |
md- | --breakpoint-md (default: min-width 52em) |
lg- | --breakpoint-lg (default: min-width 64em) |
To adjust the default breakpoints, declare custom media queries after importing the file via Rework, or manually adjust them in CSS.
.sm-show, .md-show, .lg-show {
display: none !important
}
@media (--breakpoint-sm) {
.sm-show { display: block !important }
}
@media (--breakpoint-md) {
.md-show { display: block !important }
}
@media (--breakpoint-lg) {
.lg-show { display: block !important }
}
@media (--breakpoint-sm) {
.sm-hide { display: none !important }
}
@media (--breakpoint-md) {
.md-hide { display: none !important }
}
@media (--breakpoint-lg) {
.lg-hide { display: none !important }
}
.display-none { display: none !important }
.hide {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
Resize the browser window to see the effect.
--breakpoint-sm
and up.--breakpoint-sm
and up.<h3 class="sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
<h3 class="sm-hide red">Hidden from <code>--breakpoint-sm</code> and up.</h3>
Control wrapping at different screen widths.
<h1>
Responsive Line Break
<br class="md-show">
To Control Wrapping
</h1>