Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-utility-responsive-states v0.0.2

# Utility Responsive States

NPM Github

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>