Wondering what’s next for npm?Check out our public roadmap! »

    bootstrap-hacks

    0.5.0 • Public • Published

    Bootstrap Hacks

    Build Status npm version Bower version Maven Central dependencies Status devDependencies Status Dependency Status

    Tweaks (with a security and accessibility focus) for Bootstrap version 3.

    Installation

    • Install with npm: npm install bootstrap-hacks
    • Install with Bower: bower install bootstrap-hacks
    • Add a WebJar dependency to build.sbt: libraryDependencies += "org.webjars.npm" % "bootstrap-hacks" % "0.4.0"

    Usage

    LESS

      // Import Bootstrap itself.
      @import ".../bootstrap/less/bootstrap.less";
      
      // Then import bootstrap-hacks.
      @import ".../bootstrap-hacks/less/bootstrap-hacks.less";
    

    CSS

    You can find pre-compiled CSS in dist/css/bootstrap-hacks.css. It includes all hacks except accessible varibles.

    Included Hacks

    Accessible links

    Bootstrap removes underline styles for links. This is a failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision. Include accessible-links.less to restore the default underline styles.

    Accessible variables

    Bootstrap's default placeholder color (#999) doesn't meet WCAG 2.0 AA's color contrast requirement. Include accessible-variables.less to override @input-color-placeholder with a darker shade of gray (#767676).

    Bootstrap's default colors for @brand-primary, @brand-success, @brand-danger, @state-info-text and @state-danger-text do not meet WCAG 2.0 AA's color contrast requirement. They are replaced with accessible alternatives.

    Progress bar

    Enables use of Bootstrap's progress bar component without requiring inline styles, in turn allowing CSP headers to exclude the 'unsafe-inline' style-src.

    Usage

    1. Include progressbar.less in your project however you like.

    2. Remove the inline style attribute from your progress bars; progressbar.less will style them appropriately.

      Before:

      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>

      After:

      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>

    Caveats

    • Only works for integral values of aria-valuenow (e.g. aria-valuenow="60" will work, aria-valuenow="60.1" won't).
    • Only works when the progress bar displays values between 0 and 100 (i.e. aria-valuemin="0" and aria-valuemax="100").

    Prevent zoom on focus on iOS

    iOS can automatically zoom in when a form input element receives focus. Developers often disable this behaviour by setting restrictive values for the viewport meta element. This can negatively affect accessibility:

    Ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%. Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided.

    Instead, include prevent-ios-zoom-on-focus.less to set the font size of form inputs to 16px when in the extra small responsive breakpoint. This will prevent iOS from zooming automatically when an input receives focus but continue to allow users to pinch to zoom.

    Install

    npm i bootstrap-hacks

    DownloadsWeekly Downloads

    1

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • avatar