UNPKG

@syaifulsz/bootstrap-v3-helper-margin-padding

Version:

A responsive Bootstrap 3 helper to add spacing or gutter with margin and padding in to block or inline-block elements.

147 lines (117 loc) 2.48 kB
/*!* * Bootstrap helper for margin and padding * ----------------------------------------------------------------------------- * This is a responsive helper to add spacing or gutter with margin and padding * in to block or inline-block elements. Default sizes are 15px and 30px, the * first size in sizes list is consider as first and default size for .margin * and .padding, thus, there is no class name .margin-15 and .padding-15. * * These helper is responsive and supports Bootstrap 3 responsive utilities * (xs, sm, md, lg). Additional media queries is configurable and can be * extended depending on your project requirements. * * Example usage: * ----------------------------------------------------------------------------- * .margin, .margin--top, .margin-30--top, .margin-0--bottom * .padding, .padding--top, .padding-30--top, .padding-0--bottom * * Example usage with responsive media query: * ----------------------------------------------------------------------------- * .margin-xs, .margin-xs--top, .margin-xs-30--top, .margin-sm-0--top * .padding-xs, .padding-xs--top, .padding-xs-30--top, .padding-sm-0--top * * * @author: Syaiful Shah Zinan (i.works@live.com) * @link: https://github.com/syaifulsz/my-css-components * @since: 0.0.1 */ .margin { margin: 15px; } .margin--top { margin-top: 15px; } .margin--left { margin-left: 15px; } .margin--right { margin-right: 15px; } .margin--bottom { margin-bottom: 15px; } .padding { padding: 15px; } .padding--top { padding-top: 15px; } .padding--left { padding-left: 15px; } .padding--right { padding-right: 15px; } .padding--bottom { padding-bottom: 15px; } .margin-30 { margin: 30px; } .margin-30--top { margin-top: 30px; } .margin-30--left { margin-left: 30px; } .margin-30--right { margin-right: 30px; } .margin-30--bottom { margin-bottom: 30px; } .padding-30 { padding: 30px; } .padding-30--top { padding-top: 30px; } .padding-30--left { padding-left: 30px; } .padding-30--right { padding-right: 30px; } .padding-30--bottom { padding-bottom: 30px; } .margin-0 { margin: 0; } .margin-0-top { margin-top: 0; } .margin-0-left { margin-left: 0; } .margin-0-right { margin-right: 0; } .margin-0-bottom { margin-bottom: 0; } .padding-0 { padding: 0; } .padding-0-top { padding-top: 0; } .padding-0-left { padding-left: 0; } .padding-0-right { padding-right: 0; } .padding-0-bottom { padding-bottom: 0; }