Skip to content
Snippets Groups Projects
Commit 85862d4c authored by Chad Whitacre's avatar Chad Whitacre
Browse files

"Shields badges" -> "badges" per #105

parent 4cad799d
No related branches found
No related tags found
No related merge requests found
...@@ -52,7 +52,7 @@ Thanks to @ackerdev we also have SVG equivalents of all existing badges if you w ...@@ -52,7 +52,7 @@ Thanks to @ackerdev we also have SVG equivalents of all existing badges if you w
- **hyperlinked**: badges can link to a third-party website providing more information, either related to the metadata provided by the badge or about the project the badge was used for (e.g. an open source library) - **hyperlinked**: badges can link to a third-party website providing more information, either related to the metadata provided by the badge or about the project the badge was used for (e.g. an open source library)
### Aesthetics ### Aesthetics
The design of Shields badges has been carefully considered to provide sufficient padding between the container badge and the text within. Badges should never have a fixed width. The letter spacing (or kerning) is deliberate and focused on clarity, so is the use of the Open Sans font face. Contrary to widely available web-safe alternative sans-serif fonts like Arial (a sloppy Helvetica ripoff) and Verdana (a sloppy Futura ripoff), OpenSans remains highly legible at very small sizes which is why it was chosen. The design of our badges has been carefully considered to provide sufficient padding between the container badge and the text within. Badges should never have a fixed width. The letter spacing (or kerning) is deliberate and focused on clarity, so is the use of the Open Sans font face. Contrary to widely available web-safe alternative sans-serif fonts like Arial (a sloppy Helvetica ripoff) and Verdana (a sloppy Futura ripoff), OpenSans remains highly legible at very small sizes which is why it was chosen.
![](https://raw.github.com/badges/shields/master/static/proportions.png) ![](https://raw.github.com/badges/shields/master/static/proportions.png)
...@@ -62,7 +62,7 @@ When it comes to color choices, the focus is on clear contrast between the text ...@@ -62,7 +62,7 @@ When it comes to color choices, the focus is on clear contrast between the text
## Examples ## Examples
What kind of meta data can you convey using Shields badges? What kind of meta data can you convey using badges?
- test build status: `build | failing` - test build status: `build | failing`
- code coverage percentage: `coverage | 80%` - code coverage percentage: `coverage | 80%`
...@@ -76,7 +76,7 @@ What kind of meta data can you convey using Shields badges? ...@@ -76,7 +76,7 @@ What kind of meta data can you convey using Shields badges?
## Retina Ready ## Retina Ready
Since one of the major concerns is legibility, it's impossible to ignore how badges will render on retina (high DPI) displays. Since one of the major concerns is legibility, it's impossible to ignore how badges will render on retina (high DPI) displays.
A suggested by @kneath, Shields badges displayed with an HTML image tag (instead of the easier Markdown image tag) can be given a fixed height to force an image that is actually double the resolution into a 50% smaller image, which will display properly for both retina and non-retina screens. As suggested by @kneath, badges displayed with an HTML image tag (instead of the easier Markdown image tag) can be given a fixed height to force an image that is actually double the resolution into a 50% smaller image, which will display properly for both retina and non-retina screens.
Here's an example with the following code: Here's an example with the following code:
...@@ -86,7 +86,7 @@ Here's an example with the following code: ...@@ -86,7 +86,7 @@ Here's an example with the following code:
<img src="https://raw.github.com/badges/shields/master/static/shields_white@2x.png" height="143" alt="Retina-ready Shields example" /> <img src="https://raw.github.com/badges/shields/master/static/shields_white@2x.png" height="143" alt="Retina-ready Shields example" />
All Shields badges aren't yet compatible with this but we're working on updating them soon. Look for image filenames with `@2x` suffixes, those will be the pixel doubled versions. All our badges aren't yet compatible with this but we're working on updating them soon. Look for image filenames with `@2x` suffixes, those will be the pixel doubled versions.
Note: They were pixel doubled manually in Photoshop, not after the fact. Note: They were pixel doubled manually in Photoshop, not after the fact.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment