CSS corner ribbon.
If you haven't used css-recipes before, be sure to check out the Getting Started guide, as it explains consume the recipes using Bower. Once you're familiar with that process, you may install this recipe with this command:
bower install css-recipe-corner-ribbon --save
Once the recipe has been installed (& assuming bower_components
folder is in your Sass import paths), it may be enabled inside your Sass file with this line:
@import "css-recipe-corner-ribbon/index"
Read more below to find alternative way to use this recipe.
This recipe is available as CSS & Sass (scss). It's advised to use this one with Sass placeholder.
This component use transform.
Vendor prefixs are not included, so I advise you to use a tool like autoprefixer to do this job after you build your stylesheet (it use CanIUse database). Eventually use grunt-autoprefixer or a similar wrapper depending on your worflow.
Default CSS corner ribbon, in the top right.
Same as classes.
Position of the ribbon. Can be top left
, top right
, bottom left
or bottom right
.
Width of the ribbon.
Height of the ribbon.
Number of line for text (used to compute line-height according to the height).
Skin you want to use. classic
is the only one available for now (github
"Fork me on Github" planned).
Tiny width value to adjust total width with no effect on width. Mainly used to adjust skin effect. $skin
value can change this value.
Tiny height value to adjust total width with no effect on height/line-height. Mainly used to adjust skin effect. $skin
value can change this value.
Vertical offset to move the ribbon.
Horizontal offset to move the ribbon.
<div class="crp-CornerRibbon"></div>
This will render the defaut top right ribbon.
This recipes requires Sass ~3.2.0
or libsass ~0.?
Before importing the file, you can eventually enable css classes like this:
$crp--output: true
@import "css-recipe-corner-ribbon/index";
Just remember that placeholders should be available as well.
.org-Component {
@include crp-CornerRibbon(...);
}
See tests/tests.scss
for more example.
- 2013-09-16 v0.1.0 First release.
Recipe submitted by "MoOx" Maxime Thirouin