Miss any of our Open RFC calls?Watch the recordings here! »

basscss-responsive-states

1.0.6 • Public • Published

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.

<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.

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

Keywords

none

Install

npm i basscss-responsive-states

DownloadsWeekly Downloads

1,152

Version

1.0.6

License

MIT

Last publish

Collaborators

  • avatar