NaNoWriMo Promotes Manuscription

    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

    606

    Version

    1.0.6

    License

    MIT

    Last publish

    Collaborators

    • jxnblk