Helpers
Margin
The default base margin is set to 5px. Other margins are calculated as a multiple of the base margin, e.g. m-md
is @base-margin*4
. You can change the base margin from the Avenger-helpers.less file
Negative Margins: Add a class .n
for the negative value of that margin. For example .ml10.n
would produce {margin-left: -10px}
Margin Class | Alternate Class | |
---|---|---|
.m-n | .m0 | {margin: 0px !important} |
.m-xs | .m5 | {margin: 5px !important} |
.m-sm | .m10 | {margin: 10px !important} |
.m | .m15 | {margin: 15px !important} |
.m-md | .m20 | {margin: 20px !important} |
.m-lg | .m30 | {margin: 30px !important} |
.m-xl | .m40 | {margin: 40px !important} |
.m-xxl | .m50 | {margin: 50px !important} |
.mb-n | .mb0 | {margin-bottom: 0px !important} |
.mb-xs | .mb5 | {margin-bottom: 5px !important} |
.mb-sm | .mb10 | {margin-bottom: 10px !important} |
.mb | .mb15 | {margin-bottom: 15px !important} |
.mb-md | .mb20 | {margin-bottom: 20px !important} |
.mb-lg | .mb30 | {margin-bottom: 30px !important} |
.mb-xl | .mb40 | {margin-bottom: 40px !important} |
.mb-xxl | .mb50 | {margin-bottom: 50px !important} |
.ml-n | .ml0 | {margin-left: 0px !important} |
.ml-xs | .ml5 | {margin-left: 5px !important} |
.ml-sm | .ml10 | {margin-left: 10px !important} |
.ml | .ml15 | {margin-left: 15px !important} |
.ml-md | .ml20 | {margin-left: 20px !important} |
.ml-lg | .ml30 | {margin-left: 30px !important} |
.ml-xl | .ml40 | {margin-left: 40px !important} |
.ml-xxl | .ml50 | {margin-left: 50px !important} |
.mr-n | .mr0 | {margin-right: 0px !important} |
.mr-xs | .mr5 | {margin-right: 5px !important} |
.mr-sm | .mr10 | {margin-right: 10px !important} |
.mr | .mr15 | {margin-right: 15px !important} |
.mr-md | .mr20 | {margin-right: 20px !important} |
.mr-lg | .mr30 | {margin-right: 30px !important} |
.mr-xl | .mr40 | {margin-right: 40px !important} |
.mr-xxl | .mr50 | {margin-right: 50px !important} |
.mt-n | .mt0 | {margin-top: 0px !important} |
.mt-xs | .mt5 | {margin-top: 5px !important} |
.mt-sm | .mt10 | {margin-top: 10px !important} |
.mt | .mt15 | {margin-top: 15px !important} |
.mt-md | .mt20 | {margin-top: 20px !important} |
.mt-lg | .mt30 | {margin-top: 30px !important} |
.mt-xl | .mt40 | {margin-top: 40px !important} |
.mt-xxl | .mt50 | {margin-top: 50px !important} |
Padding
The default base padding is set to 5px. Other paddings are calculated as a multiple of the base padding, e.g. p-md
is @base-padding*4
. You can change the base padding from the Avenger-helpers.less file
Negative Paddings: Add a class .n
for the negative value of that padding. For example .pl10.n
would produce {padding-left: -10px}
Padding Class | Alternate Class | |
---|---|---|
.p-n | .p0 | {padding: 0px !important} |
.p-xs | .p5 | {padding: 5px !important} |
.p-sm | .p10 | {padding: 10px !important} |
.p | .p15 | {padding: 15px !important} |
.p-md | .p20 | {padding: 20px !important} |
.p-lg | .p30 | {padding: 30px !important} |
.p-xl | .p40 | {padding: 40px !important} |
.p-xxl | .p50 | {padding: 50px !important} |
.pb-n | .pb0 | {padding-bottom: 0px !important} |
.pb-xs | .pb5 | {padding-bottom: 5px !important} |
.pb-sm | .pb10 | {padding-bottom: 10px !important} |
.pb | .pb15 | {padding-bottom: 15px !important} |
.pb-md | .pb20 | {padding-bottom: 20px !important} |
.pb-lg | .pb30 | {padding-bottom: 30px !important} |
.pb-xl | .pb40 | {padding-bottom: 40px !important} |
.pb-xxl | .pb50 | {padding-bottom: 50px !important} |
.pl-n | .pl0 | {padding-left: 0px !important} |
.pl-xs | .pl5 | {padding-left: 5px !important} |
.pl-sm | .pl10 | {padding-left: 10px !important} |
.pl | .pl15 | {padding-left: 15px !important} |
.pl-md | .pl20 | {padding-left: 20px !important} |
.pl-lg | .pl30 | {padding-left: 30px !important} |
.pl-xl | .pl40 | {padding-left: 40px !important} |
.pl-xxl | .pl50 | {padding-left: 50px !important} |
.pr-n | .pr0 | {padding-right: 0px !important} |
.pr-xs | .pr5 | {padding-right: 5px !important} |
.pr-sm | .pr10 | {padding-right: 10px !important} |
.pr | .pr15 | {padding-right: 15px !important} |
.pr-md | .pr20 | {padding-right: 20px !important} |
.pr-lg | .pr30 | {padding-right: 30px !important} |
.pr-xl | .pr40 | {padding-right: 40px !important} |
.pr-xxl | .pr50 | {padding-right: 50px !important} |
.pt-n | .pt0 | {padding-top: 0px !important} |
.pt-xs | .pt5 | {padding-top: 5px !important} |
.pt-sm | .pt10 | {padding-top: 10px !important} |
.pt | .pt15 | {padding-top: 15px !important} |
.pt-md | .pt20 | {padding-top: 20px !important} |
.pt-lg | .pt30 | {padding-top: 30px !important} |
.pt-xl | .pt40 | {padding-top: 40px !important} |
.pt-xxl | .pt50 | {padding-top: 50px !important} |
Embed Responsively
The Embed Responsively class helps build responsive embed codes for embedding rich third-party media into responsive web pages. Simply wrap the media object in embed-container
class.
Third Party | Code Sample |
---|---|
Youtube | <div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div |
Vimeo | <div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div> |
DailyMotion | <div class='embed-container'><iframe src='http://www.dailymotion.com/embed/video/xsr67x' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div> |
Google Maps | <div class='embed-container'><iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'></iframe></div> |
<div class='embed-container'><iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div> |
|
Vine | <div class='embed-container'><iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe><script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script></div>; |
Others
Class Functions | Description |
---|---|
Vertical Alignment | To vertically center a div, add position:relative to the parent and vertical-align class to the child. |
Vertical Align For Tables |
To vertical align contents in table, add classes vat , vam and vab to td to align contents top, middle and bottom respectively. Alternatively apply the classes table-vat , table-vam and table-vab to the table to align contents to all cells in the table
|
Avatar | Using img.avatar will style an image with Avenger standard for Avatar |
iSelect | wrap select in div.iSelect for custom font-awesome icons |