{"id":15180410,"url":"https://github.com/danielnixon/bootstrap-hacks","last_synced_at":"2025-10-01T20:32:38.870Z","repository":{"id":13533736,"uuid":"16225237","full_name":"danielnixon/bootstrap-hacks","owner":"danielnixon","description":"Accessibility and security improvements for Bootstrap 3.","archived":true,"fork":false,"pushed_at":"2019-04-07T03:25:08.000Z","size":23,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-10T22:55:07.009Z","etag":null,"topics":["accessibility","bootstrap","security"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielnixon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-25T05:12:37.000Z","updated_at":"2023-01-28T18:38:16.000Z","dependencies_parsed_at":"2022-09-06T11:11:58.818Z","dependency_job_id":null,"html_url":"https://github.com/danielnixon/bootstrap-hacks","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielnixon%2Fbootstrap-hacks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielnixon%2Fbootstrap-hacks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielnixon%2Fbootstrap-hacks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielnixon%2Fbootstrap-hacks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielnixon","download_url":"https://codeload.github.com/danielnixon/bootstrap-hacks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234897368,"owners_count":18903646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","bootstrap","security"],"created_at":"2024-09-27T16:04:58.320Z","updated_at":"2025-10-01T20:32:33.623Z","avatar_url":"https://github.com/danielnixon.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Bootstrap Hacks\n===============\n[![Build Status](https://travis-ci.org/danielnixon/bootstrap-hacks.svg?branch=master)](https://travis-ci.org/danielnixon/bootstrap-hacks)\n[![npm version](https://img.shields.io/npm/v/bootstrap-hacks.svg)](https://www.npmjs.com/package/bootstrap-hacks)\n![Bower version](https://img.shields.io/bower/v/bootstrap-hacks.svg)\n[![Maven Central](https://maven-badges.herokuapp.com/maven-central/org.webjars.npm/bootstrap-hacks/badge.svg)](https://maven-badges.herokuapp.com/maven-central/org.webjars.npm/bootstrap-hacks)\n[![dependencies Status](https://david-dm.org/danielnixon/bootstrap-hacks/status.svg)](https://david-dm.org/danielnixon/bootstrap-hacks)\n[![devDependencies Status](https://david-dm.org/danielnixon/bootstrap-hacks/dev-status.svg)](https://david-dm.org/danielnixon/bootstrap-hacks?type=dev)\n[![Dependency Status](https://dependencyci.com/github/danielnixon/bootstrap-hacks/badge)](https://dependencyci.com/github/danielnixon/bootstrap-hacks)\n\nTweaks (with a security and accessibility focus) for Bootstrap version 3.\n\nNo longer maintained. See [oaf-bootstrap-4](https://github.com/danielnixon/oaf-bootstrap-4) for a similar library for Bootstrap 4.\n\nInstallation\n============\n* Install with npm: `npm install bootstrap-hacks`\n* Install with Bower: `bower install bootstrap-hacks`\n* Add a WebJar dependency to build.sbt: `libraryDependencies += \"org.webjars.npm\" % \"bootstrap-hacks\" % \"0.5.0\"`\n\nUsage\n=====\n\nLESS\n----\n\n```\n  // Import Bootstrap itself.\n  @import \".../bootstrap/less/bootstrap.less\";\n  \n  // Then import bootstrap-hacks.\n  @import \".../bootstrap-hacks/less/bootstrap-hacks.less\";\n```\n\nSass\n----\nFor use with the [official Sass port of Bootstrap 3](https://github.com/twbs/bootstrap-sass).\n\n```\n  // Import accessible variables first.\n  @import \".../bootstrap-hacks/accessible-variables\";\n\n  // Then import Bootstrap itself.\n  @import \".../bootstrap-sass/assets/stylesheets/_bootstrap\";\n  \n  // Then import the rest of bootstrap-hacks.\n  @import \".../bootstrap-hacks/sass/bootstrap-hacks\";\n```\n\nCSS\n---\n\nYou can find pre-compiled CSS in `dist/css/bootstrap-hacks.css`. It includes all hacks _except_ accessible varibles.\n\nIncluded Hacks\n==============\n\nAccessible links\n----------------\nBootstrap 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](https://www.w3.org/TR/WCAG20-TECHS/F73.html). Include `accessible-links.less` to restore the default underline styles.\n\nAccessible variables\n--------------------\nBootstrap's default placeholder color (`#999`) doesn't meet WCAG 2.0 AA's [color contrast](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) requirement. Include `accessible-variables.less` to override `@input-color-placeholder` with a darker shade of gray (`#767676`).\n\nBootstrap'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](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) requirement. They are replaced with accessible alternatives.\n\nProgress bar\n------------\n\nEnables use of Bootstrap's [progress bar component](http://getbootstrap.com/components/#progress) without requiring inline styles, in turn allowing [CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP) headers to exclude the 'unsafe-inline' style-src.\n\n### Usage\n\n1. Include progressbar.less in your project however you like.\n2. Remove the inline style attribute from your progress bars; progressbar.less will style them appropriately.\n\n    Before:\n    \n    ```html\n    \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 60%;\"\u003e\n        \u003cspan class=\"sr-only\"\u003e60% Complete\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    ```\n    \n    After:\n    \n    ```html\n    \u003cdiv class=\"progress\"\u003e\n      \u003cdiv class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e\n        \u003cspan class=\"sr-only\"\u003e60% Complete\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    ```\n\n### Caveats\n\n* Only works for integral values of `aria-valuenow` (e.g. `aria-valuenow=\"60\"` will work, `aria-valuenow=\"60.1\"` won't).\n* Only works when the progress bar displays values between 0 and 100 (i.e. `aria-valuemin=\"0\"` and  `aria-valuemax=\"100\"`).\n\nPrevent zoom on focus on iOS\n----------------------------\n\niOS 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](https://www.w3.org/TR/mobile-accessibility-mapping/#zoom-magnification):\n\n\u003e 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.\n\nInstead, 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielnixon%2Fbootstrap-hacks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielnixon%2Fbootstrap-hacks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielnixon%2Fbootstrap-hacks/lists"}