stylep-badge
v0.2.0
Published
Reusable, extendable, and fully customizable bage pattern and styles.
Downloads
9
Readme
stylep-badge
Tools to build simple badges in your next project.
Install
You can install using the spm command or install using npm and the project title.
spm install badge
Usage
/* badge.css */
@import “stylep-badge”;
.badge {
/* Badge Design Pattern */
@mixin badge-inline;
/* Customize your badge */
@mixin badge-solid blue;
/* or roll your own */
/* add something custom in here */
}
Patterns
Placeholder selectors that contain common styles for structure and basic behavior.
badge-inline
Renders an inline element with standard padding and margin.
Options
$badge-font-size: 12px
How large the text is inside the badge$badge-padding: 3px 8px
Space inside the badge$badge-margin: 0 1% 1% 0
Space around the badge
Styles
Customizable presets that give your pattern a specific style-set.
badge-solid
Draws a solid background ontop of a badge with white text for contrast.
Options
$badge-color: #555
Color of the badge$badge-text-color: #fff
Color of the text inside the badge$badge-radius: 50px
Roundness of the badge
badge-hollow
Draws a bordered element with dark text for contrast.
Options
$badge-color: #555
Color of the outline and text of the badge$badge-radius: 50px
Roundness of the badge$badge-border-style: solid
Style of the border around the badge$badge-border-width: 1px
Thickness of the border around the badge
License
This project is licensed under the MIT license.