basscss-hide

Responsive hide utilities module for Basscss

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
basscss-hide
5,834421.0.18 years ago8 years agoMinified + gzip package size for basscss-hide in KB

Readme

Use these utilities to conditionally hide elements based on viewport width.

Prefix Naming Convention

Hide utilities differ from other breakpoint-based styles in Basscss. Each hide utility only applies to one breakpoint range.
<thead>
  <tr> <th>Prefix</th> <th>Description</th> </tr>
</thead>
<tbody>
  <tr> <td>xs-</td> <td>below 40em</td> </tr>
  <tr> <td>sm-</td> <td>40em – 52em</td> </tr>
  <tr> <td>md-</td> <td>52em – 64em</td> </tr>
  <tr> <td>lg-</td> <td>above 64em</td> </tr>
</tbody>

Hide content

Resize the browser window to see the effect.
<h3 class="xs-hide">Hidden below 40em</h3>
<h3 class="sm-hide red">Hidden between 40 and 52em</h3>
<h3 class="md-hide red">Hidden between 52 and 64em</h3>
<h3 class="lg-hide red">Hidden above 64em</h3>

Responsive Line Break

Control wrapping at different screen widths.
<h1>
  Responsive Line Break
  <br class="xs-hide">
  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="input">
</form>

Display None

Set display none with this utility. Use this with caution as it might cause accessibility issues depending on where it’s used.
<div>Visible</div>
<div class="display-none">Hidden</div>