bootstrap-hacks

WebJar for bootstrap-hacks

License	MIT
GroupId	org.webjars.npm
ArtifactId	bootstrap-hacks
Last Version	0.5.0
Release Date	Feb 19, 2017
Type	jar
Description	bootstrap-hacks WebJar for bootstrap-hacks
Project URL	http://webjars.org
Source Code Management	https://github.com/danielnixon/bootstrap-hacks

Download bootstrap-hacks

Filename	Size
bootstrap-hacks-0.5.0.pom
bootstrap-hacks-0.5.0.jar	9 KB
bootstrap-hacks-0.5.0-sources.jar	22 bytes
bootstrap-hacks-0.5.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/bootstrap-hacks/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>bootstrap-hacks</artifactId>
    <version>0.5.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/bootstrap-hacks/
implementation 'org.webjars.npm:bootstrap-hacks:0.5.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/bootstrap-hacks/
implementation ("org.webjars.npm:bootstrap-hacks:0.5.0")

Apache Buildr

'org.webjars.npm:bootstrap-hacks:jar:0.5.0'

Apache Ivy

<dependency org="org.webjars.npm" name="bootstrap-hacks" rev="0.5.0">
  <artifact name="bootstrap-hacks" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='bootstrap-hacks', version='0.5.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "bootstrap-hacks" % "0.5.0"

Leiningen

[org.webjars.npm/bootstrap-hacks "0.5.0"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : bootstrap	jar	[3.3.7,4)

Project Modules

There are no modules declared in this project.

Bootstrap Hacks

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

No longer maintained. See oaf-bootstrap-4 for a similar library for Bootstrap 4.

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

Usage

LESS

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

Sass

For use with the official Sass port of Bootstrap 3.

  // Import accessible variables first.
  @import ".../bootstrap-hacks/accessible-variables";

  // Then import Bootstrap itself.
  @import ".../bootstrap-sass/assets/stylesheets/_bootstrap";
  
  // Then import the rest of bootstrap-hacks.
  @import ".../bootstrap-hacks/sass/bootstrap-hacks";

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.

Versions

Version
0.5.0 Feb 19, 2017
0.4.0 Oct 20, 2016
0.3.0 Oct 18, 2016
0.2.0 Oct 17, 2016
0.1.0 Oct 17, 2016