├── .gitignore
├── .idea
├── vcs.xml
└── watcherTasks.xml
├── LICENSE
├── README.md
├── badgerly.css
├── badgerly.scss
├── bower.json
├── gulpfile.js
├── package.json
└── src
├── _badge-colors.scss
├── _badge-shape.scss
├── _core.scss
├── _countries.scss
├── _extensions.scss
├── _ribbon-colors.scss
└── sizes
├── _huge.scss
├── _large.scss
├── _medium.scss
├── _small.scss
└── _tiny.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | ### Sass template
3 | *.css.map
4 |
5 | .gitignore
6 | .idea/
7 | node_modules/
8 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
--------------------------------------------------------------------------------
/.idea/watcherTasks.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
16 |
23 |
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Steven Hunt
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Badgerly
3 |
4 | ```
5 | > bower install badgerly --save
6 | ```
7 |
8 |
38 |
39 |
40 |
41 |
43 |
"
6 | ],
7 | "description": "A CSS 3 library for rendering badges.",
8 | "main": "badgerly.css",
9 | "keywords": [
10 | "css",
11 | "badge",
12 | "medal",
13 | "ribbon",
14 | "achievement",
15 | "gamification",
16 | "award"
17 | ],
18 | "license": "MIT",
19 | "ignore": [
20 | "**/.*",
21 | "node_modules",
22 | "bower_components",
23 | "test",
24 | "tests"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var gulp = require('gulp'),
4 | sass = require('gulp-sass'),
5 | scssPaths = ['./src/**/*.scss', './*.scss'];
6 |
7 | gulp.task('sass', function () {
8 | return gulp.src(scssPaths)
9 | .pipe(sass().on('error', sass.logError))
10 | .pipe(gulp.dest('.'));
11 | });
12 |
13 | gulp.task('sass:watch', function () {
14 | gulp.watch(scssPaths, ['sass']);
15 | });
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "badgerly",
3 | "version": "0.2.0",
4 | "description": "A CSS 3 library for rendering badges.",
5 | "main": "badgerly.css",
6 | "dependencies": {},
7 | "devDependencies": {
8 | "gulp": "^3.9.1",
9 | "gulp-sass": "^2.3.2"
10 | },
11 | "scripts": {
12 | "test": "echo \"Error: no test specified\" && exit 1",
13 | "build": "gulp sass",
14 | "watch": "gulp sass:watch"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "git+https://github.com/stevenmhunt/badgerly.git"
19 | },
20 | "keywords": [
21 | "css",
22 | "badge",
23 | "medal",
24 | "ribbon",
25 | "achievement",
26 | "gamification",
27 | "award"
28 | ],
29 | "author": "Steven Hunt",
30 | "license": "MIT",
31 | "bugs": {
32 | "url": "https://github.com/stevenmhunt/badgerly/issues"
33 | },
34 | "homepage": "https://github.com/stevenmhunt/badgerly#readme"
35 | }
36 |
--------------------------------------------------------------------------------
/src/_badge-colors.scss:
--------------------------------------------------------------------------------
1 | .badge {
2 |
3 | .gold {
4 | background: radial-gradient(gold, palegoldenrod);
5 | color: goldenrod;
6 | }
7 |
8 | .silver {
9 | background: radial-gradient(#fafafa, #dddddd);
10 | color: #cccccc;
11 | }
12 |
13 | .bronze {
14 | background: radial-gradient(darkorange, chocolate);
15 | color: sienna;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/_badge-shape.scss:
--------------------------------------------------------------------------------
1 | .badge {
2 |
3 | /* common shape properties */
4 | .circle, .square, .diamond {
5 | display: inline-block;
6 | margin: 0;
7 | padding: 0;
8 | z-index: 1000;
9 | }
10 |
11 | /* a diamond is a square rotated. */
12 | .diamond {
13 | transform: rotate(45deg);
14 | }
15 |
16 | /* rotate the contents of the diamond back so that it doesn't look weird. */
17 | .diamond > * {
18 | transform: rotate(-45deg);
19 | }
20 |
21 | /* a badge can either have a simple ribbon, or a lanyard with a left and right ribbon. */
22 | .lanyard {
23 | position: relative;
24 | overflow: hidden;
25 |
26 | /* common properties of the left and right ribbon in a lanyard. */
27 | .ribbon.left, .ribbon.right {
28 | top: 0;
29 | position: absolute;
30 | z-index: 0;
31 | }
32 | }
33 |
34 | .ribbon {
35 | margin: 0;
36 | padding: 0;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/_core.scss:
--------------------------------------------------------------------------------
1 | /*****************************
2 | * Badgerly
3 | * Core styles for all shapes and colors
4 | * MIT License
5 | *****************************/
6 |
7 | /* represents a badge, which has a ribbon and a shape. */
8 | .badge {
9 | display: flex;
10 | flex-direction: column;
11 | overflow: hidden;
12 | position: relative;
13 |
14 | .border {
15 | border-style: solid;
16 |
17 | &.gold {
18 | border-color: goldenrod;
19 | }
20 |
21 | &.silver {
22 | border-color: #cccccc;
23 | }
24 |
25 | &.bronze {
26 | border-color: sienna;
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/_countries.scss:
--------------------------------------------------------------------------------
1 | .badge {
2 |
3 | /* 13 red and white strips: United States */
4 | .ribbon.red-white-stripes, .ribbon.usa {
5 | background: linear-gradient(to right, red, red, red, white, white, white, red, red, red, white, white, white, red, red, red, white, white, white, red, red, red, white, white, white, red, red, red, white, white, white, red, red, red, white, white, white, red, red, red)
6 | }
7 |
8 | /* red white and blue: Netherlands */
9 | .ribbon.red-white-blue, .ribbon.netherlands {
10 | background: linear-gradient(to right, red, red, red, red, red, red, red, red, white, white, white, white, white, white, blue, blue, blue, blue, blue, blue, blue, blue);
11 | }
12 |
13 | /* red white and green: Mexico, Hungary */
14 | .ribbon.red-white-green, .ribbon.mexico, .ribbon.hungary {
15 | background: linear-gradient(to right, red, red, red, red, red, red, red, red, white, white, white, white, white, white, green, green, green, green, green, green, green, green);
16 | }
17 |
18 | /* blue white and red: France */
19 | .ribbon.blue-white-red, .ribbon.france {
20 | background: linear-gradient(to right, blue, blue, blue, blue, blue, blue, blue, blue, white, white, white, white, white, white, red, red, red, red, red, red, red, red);
21 | }
22 |
23 | /* red white and red: Canada */
24 | .ribbon.red-white-red, .ribbon.canada {
25 | background: linear-gradient(to right, red, red, red, red, red, red, red, red, white, white, white, white, white, white, white, white, white, red, red, red, red, red, red, red, red);
26 | }
27 |
28 | /* green white and red: Italy */
29 | .ribbon.green-white-red, .ribbon.italy {
30 | background: linear-gradient(to right, green, green, green, green, green, green, green, green, white, white, white, white, white, white, red, red, red, red, red, red, red, red);
31 | }
32 |
33 | /* red blue and white: Russia */
34 | .ribbon.red-blue-white, .ribbon.russia {
35 | background: linear-gradient(to right, red, red, red, red, red, red, red, red, blue, blue, blue, blue, blue, blue, white, white, white, white, white, white, white, white);
36 | }
37 |
38 | /* gold red and black: Germany */
39 | .ribbon.gold-red-black, .ribbon.germany {
40 | background: linear-gradient(to right, gold, gold, gold, gold, gold, gold, gold, gold, red, red, red, red, red, red, black, black, black, black, black, black, black, black);
41 | }
42 |
43 | /* orange white and green: India */
44 | .ribbon.orange-white-green, .ribbon.india {
45 | background: linear-gradient(to right, orange, orange, orange, orange, orange, orange, orange, orange, white, white, white, white, white, white, green, green, green, green, green, green, green, green);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/_extensions.scss:
--------------------------------------------------------------------------------
1 | /*****************************
2 | * Badgerly
3 | * Keep re-usable extension classes here.
4 | * These classes are not to be used directly in markup
5 | * MIT License
6 | *****************************/
7 |
8 | .ext_circle_tiny {
9 | border-radius: 5px;
10 | font-size: 6px;
11 | text-align: center;
12 | }
13 |
14 | .ext_circle_small {
15 | border-radius: 12px;
16 | font-size: 15px;
17 | text-align: center;
18 | }
19 |
20 | .ext_circle_medium {
21 | border-radius: 25px;
22 | font-size: 30px;
23 | text-align: center;
24 | }
25 |
26 | .ext_circle_large {
27 | border-radius: 50px;
28 | font-size: 60px;
29 | text-align: center;
30 | }
31 |
32 | .ext_circle_huge {
33 | border-radius: 100px;
34 | font-size: 120px;
35 | text-align: center;
36 | }
37 |
--------------------------------------------------------------------------------
/src/_ribbon-colors.scss:
--------------------------------------------------------------------------------
1 | .badge {
2 |
3 | /* Solid Red */
4 | .ribbon.red {
5 | background: linear-gradient(to right, red, darkred, red, darkred, red);
6 | }
7 |
8 | /* Solid Orange */
9 | .ribbon.orange {
10 | background: linear-gradient(to right, orange, darkorange, orange, darkorange, orange);
11 | }
12 |
13 | /* Solid Yellow */
14 | .ribbon.yellow {
15 | background: linear-gradient(to right, yellow, gold, yellow, gold, yellow);
16 | }
17 |
18 | /* Solid Green */
19 | .ribbon.green {
20 | background: linear-gradient(to right, green, darkgreen, green, darkgreen, green);
21 | }
22 |
23 | /* Solid Blue */
24 | .ribbon.blue {
25 | background: linear-gradient(to right, blue, darkblue, blue, darkblue, blue);
26 | }
27 |
28 | /* Solid Purple */
29 | .ribbon.purple {
30 | background: linear-gradient(to right, rebeccapurple, purple, rebeccapurple, purple, rebeccapurple);
31 | }
32 |
33 | /* Solid Pink */
34 | .ribbon.pink {
35 | background: linear-gradient(to right, pink, lightpink, pink, lightpink, pink);
36 | }
37 |
38 | /* Solid Black */
39 | .ribbon.black {
40 | background: linear-gradient(to right, black, #333333, black, #333333, black);
41 | }
42 |
43 | /* RAINBOW */
44 | .ribbon.rainbow {
45 | background: linear-gradient(to right, red, red, orange, orange, yellow, yellow, green, green, blue, blue, purple, purple);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/sizes/_huge.scss:
--------------------------------------------------------------------------------
1 | @import "../extensions";
2 |
3 | .badge.huge {
4 | width: 240px;
5 | height: 300px;
6 |
7 | .circle {
8 | @extend .ext_circle_huge;
9 | width: 200px;
10 | height: 170px;
11 | padding-top: 30px;
12 | }
13 |
14 | .circle.border {
15 | @extend .ext_circle_huge;
16 | width: 180px;
17 | height: 160px;
18 | padding-top: 20px;
19 | }
20 |
21 | .square {
22 | font-size: 120px;
23 | text-align: center;
24 | width: 200px;
25 | height: 170px;
26 | padding-top: 30px;
27 | }
28 |
29 | .square.border {
30 | font-size: 120px;
31 | text-align: center;
32 | width: 180px;
33 | height: 160px;
34 | padding-top: 20px;
35 | }
36 |
37 | .diamond {
38 | font-size: 120px;
39 | text-align: center;
40 | width: 138px;
41 | height: 130px;
42 | padding-top: 0;
43 | padding-bottom: 8px;
44 | transform: translate(28px, 0) rotate(45deg);
45 | }
46 |
47 | .diamond.border {
48 | font-size: 120px;
49 | text-align: center;
50 | width: 128px;
51 | height: 120px;
52 | padding-top: 0;
53 | padding-bottom: 8px;
54 | }
55 |
56 | .border {
57 | border-width: 10px;
58 | }
59 |
60 | .lanyard {
61 | height: 120px;
62 | padding-left: 40px;
63 | margin-left: -40px;
64 | margin-right: -40px;
65 | margin-bottom: -32px;
66 | width: 240px;
67 |
68 | .ribbon {
69 | top: 10px;
70 | }
71 | .ribbon.left {
72 | transform: translate(-50px, 0) rotate(-15deg);
73 | }
74 | .ribbon.right {
75 | transform: scaleX(-1) translate(-50px, 0) rotate(-15deg);
76 | }
77 | }
78 |
79 | .ribbon {
80 | margin-bottom: -20px;
81 | margin-left: 60px;
82 | width: 80px;
83 | height: 100px;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/sizes/_large.scss:
--------------------------------------------------------------------------------
1 | @import "../extensions";
2 |
3 | .badge.large {
4 | width: 120px;
5 | height: 150px;
6 |
7 | .circle {
8 | @extend .ext_circle_large;
9 | width: 100px;
10 | height: 85px;
11 | padding-top: 15px;
12 | }
13 |
14 | .circle.border {
15 | @extend .ext_circle_large;
16 | width: 90px;
17 | height: 80px;
18 | padding-top: 10px;
19 | }
20 |
21 | .square {
22 | font-size: 60px;
23 | text-align: center;
24 | width: 100px;
25 | height: 85px;
26 | padding-top: 15px;
27 | }
28 |
29 | .square.border {
30 | font-size: 60px;
31 | text-align: center;
32 | width: 90px;
33 | height: 80px;
34 | padding-top: 10px;
35 | }
36 |
37 | .diamond {
38 | font-size: 60px;
39 | text-align: center;
40 | width: 69px;
41 | height: 65px;
42 | padding-top: 0;
43 | padding-bottom: 4px;
44 | transform: translate(14px, 0) rotate(45deg);
45 | }
46 |
47 | .diamond.border {
48 | font-size: 60px;
49 | text-align: center;
50 | width: 64px;
51 | height: 60px;
52 | padding-top: 0;
53 | padding-bottom: 4px;
54 | }
55 |
56 | .border {
57 | border-width: 5px;
58 | }
59 |
60 | .lanyard {
61 | height: 60px;
62 | padding-left: 20px;
63 | margin-left: -20px;
64 | margin-right: -20px;
65 | margin-bottom: -16px;
66 | width: 120px;
67 |
68 | .ribbon {
69 | top: 5px;
70 | }
71 | .ribbon.left {
72 | transform: translate(-25px, 0) rotate(-15deg);
73 | }
74 | .ribbon.right {
75 | transform: scaleX(-1) translate(-25px, 0) rotate(-15deg);
76 | }
77 | }
78 |
79 | .ribbon {
80 | margin-bottom: -10px;
81 | margin-left: 30px;
82 | width: 40px;
83 | height: 50px;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/sizes/_medium.scss:
--------------------------------------------------------------------------------
1 | @import "../extensions";
2 |
3 | .badge.medium {
4 | width: 60px;
5 | height: 75px;
6 |
7 | .circle {
8 | @extend .ext_circle_medium;
9 | width: 50px;
10 | height: 42px;
11 | padding-top: 7px;
12 | }
13 |
14 | .circle.border {
15 | @extend .ext_circle_medium;
16 | width: 45px;
17 | height: 40px;
18 | padding-top: 5px;
19 | }
20 |
21 | .square {
22 | font-size: 30px;
23 | text-align: center;
24 | width: 50px;
25 | height: 42px;
26 | padding-top: 7px;
27 | }
28 |
29 | .square.border {
30 | font-size: 30px;
31 | text-align: center;
32 | width: 45px;
33 | height: 40px;
34 | padding-top: 5px;
35 | }
36 |
37 | .diamond {
38 | font-size: 30px;
39 | text-align: center;
40 | width: 34px;
41 | height: 32px;
42 | padding-top: 0;
43 | padding-bottom: 2px;
44 | transform: translate(7px, 0) rotate(45deg);
45 | }
46 |
47 | .diamond.border {
48 | font-size: 30px;
49 | text-align: center;
50 | width: 32px;
51 | height: 30px;
52 | padding-top: 0;
53 | padding-bottom: 2px;
54 | }
55 |
56 | .border {
57 | border-width: 2px;
58 | }
59 |
60 | .lanyard {
61 | height: 30px;
62 | padding-left: 10px;
63 | margin-left: -10px;
64 | margin-right: -10px;
65 | margin-bottom: -5px;
66 | width: 60px;
67 |
68 | .ribbon {
69 | top: 5px;
70 | }
71 | .ribbon.left {
72 | transform: translate(-13px, 0) rotate(-15deg);
73 | }
74 | .ribbon.right {
75 | transform: scaleX(-1) translate(-13px, 0) rotate(-15deg);
76 | }
77 | }
78 |
79 | .ribbon {
80 | margin-bottom: -5px;
81 | margin-left: 15px;
82 | width: 20px;
83 | height: 25px;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/sizes/_small.scss:
--------------------------------------------------------------------------------
1 | @import "../extensions";
2 |
3 | .badge.small {
4 | width: 30px;
5 | height: 37px;
6 |
7 | .circle {
8 | @extend .ext_circle_small;
9 | width: 25px;
10 | height: 20px;
11 | padding-top: 4px;
12 | }
13 |
14 | .circle.border {
15 | @extend .ext_circle_small;
16 | width: 22px;
17 | height: 19px;
18 | padding-top: 3px;
19 | }
20 |
21 | .square {
22 | font-size: 15px;
23 | text-align: center;
24 | width: 25px;
25 | height: 21px;
26 | padding-top: 3px;
27 | }
28 |
29 | .square.border {
30 | font-size: 15px;
31 | text-align: center;
32 | width: 22px;
33 | height: 20px;
34 | padding-top: 2px;
35 | }
36 |
37 | .diamond {
38 | font-size: 15px;
39 | text-align: center;
40 | width: 17px;
41 | height: 16px;
42 | padding-top: 0;
43 | padding-bottom: 1px;
44 | transform: translate(3px, 0) rotate(45deg);
45 | }
46 |
47 | .diamond.border {
48 | font-size: 15px;
49 | text-align: center;
50 | width: 16px;
51 | height: 15px;
52 | padding-top: 0;
53 | padding-bottom: 1px;
54 | }
55 |
56 | .border {
57 | border-width: 1px;
58 | }
59 |
60 | .lanyard {
61 | height: 15px;
62 | padding-left: 5px;
63 | margin-left: -5px;
64 | margin-right: -5px;
65 | margin-bottom: -2px;
66 | width: 30px;
67 |
68 | .ribbon {
69 | top: 2px;
70 | }
71 | .ribbon.left {
72 | transform: translate(-6px, 0) rotate(-15deg);
73 | }
74 | .ribbon.right {
75 | transform: scaleX(-1) translate(-6px, 0) rotate(-15deg);
76 | }
77 | }
78 |
79 | .ribbon {
80 | margin-bottom: -2px;
81 | margin-left: 7px;
82 | width: 10px;
83 | height: 12px;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/sizes/_tiny.scss:
--------------------------------------------------------------------------------
1 | @import "../extensions";
2 |
3 | .badge.tiny {
4 |
5 | .circle, .circle.border {
6 | @extend .ext_circle_tiny;
7 | width: 10px;
8 | height: 8px;
9 | padding-top: 1px;
10 | }
11 |
12 | .square, .square.border, .diamond, .diamond.border {
13 | font-size: 6px;
14 | text-align: center;
15 | width: 10px;
16 | height: 8px;
17 | padding-top: 1px;
18 | }
19 |
20 | .border {
21 | border-style: none;
22 | }
23 |
24 | .lanyard {
25 | height: 6px;
26 | padding-left: 2px;
27 | margin-left: -2px;
28 | margin-right: -2px;
29 | margin-bottom: -1px;
30 | width: 12px;
31 |
32 | .ribbon.left {
33 | transform: translate(-3px, 0) rotate(-20deg);
34 | }
35 | .ribbon.right {
36 | transform: scaleX(-1) translate(-3px, 0) rotate(-20deg);
37 | }
38 | }
39 |
40 | .ribbon {
41 | margin-bottom: -1px;
42 | margin-left: 3px;
43 | width: 4px;
44 | height: 5px;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
9 |
10 | ---
11 | - Integrates easily with [Font Awesome](http://fontawesome.io/)!
12 | - Fully implemented in CSS 3, no spacer images or other hackery.
13 | - Simple to use CSS classes which can be extended.
14 | - Implemented in SCSS, also available in plain CSS for your convenience.
15 |
16 | ## Check out the [Wall of Badges](https://jsfiddle.net/stevenmhunt/3krm64o1/)
17 | 
18 |
19 | ## Integrations
20 | - [angular-badgerly](https://github.com/stevenmhunt/angular-badgerly) - Adds directive support for Badgerly, making it even easier (somehow) to create badges!
21 |
22 | ## Colors
23 | Gold, Silver, Bronze
24 |
25 | ## Sizes
26 | Tiny, Small, Medium, Large, Huge
27 |
28 | ## Ribbon Patterns
29 | Red, Orange, Yellow, Green, Blue, Purple, Pink, Black, Rainbow, and a bunch of country flags!
30 |
31 | Supports either a single ribbon or a lanyard with two visible ribbons.
32 |
33 | ## Examples
34 |
35 | ### [Round silver metal with a single purple ribbon](https://jsfiddle.net/stevenmhunt/wqyrq8a0/)
36 | ```html
37 |