Responsive States
Use these utilities to conditionally show and hide elements based on viewport width using a mobile-first approach.
Prefix Naming Convention
All breakpoint-based styles in Basscss follow the same naming convention.
| 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) |
Adjust the custom media queries to suite your needs.
Show and hide content
Resize the browser window to see the effect.
Visible from --breakpoint-sm and up.
Hidden from --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>Responsive Line Break
Control wrapping at different screen widths.
Responsive Line Break
To Control Wrapping
<h1>
Responsive Line Break
<br class="md-show">
To Control Wrapping
</h1>Accessible Hide
To visually hide things like form labels in an accessible way, use the .hide utility.
<form>
<label for="search" class="hide">Search</label>
<input id="search" type="search" class="field">
<button class="btn btn-primary">Go</button>
</form>CSS Source
.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);
}
11 Rules
13 Selectors
68 Declarations
61 Properties