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 avalon-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 avalon-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 Avalon standard for Avatar |
| iSelect | wrap select in div.iSelect for custom font-awesome icons |
