Basscss / Docs / Modules

Utility Responsive States

 

basscss-utility-responsive-states v0.0.2

Utility Responsive States

basscss.com

These styles allow for conditionally showing and hiding elements using a mobile-first approach.

Prefix 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)

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);
}

Example

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>