@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.
28 lines (27 loc) • 5.51 kB
CSS
/*!*
* 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
*/@media(max-width: 767px){.margin-xs{margin:15px}.margin-xs--top{margin-top:15px}.margin-xs--left{margin-left:15px}.margin-xs--right{margin-right:15px}.margin-xs--bottom{margin-bottom:15px}.padding-xs{padding:15px}.padding-xs--top{padding-top:15px}.padding-xs--left{padding-left:15px}.padding-xs--right{padding-right:15px}.padding-xs--bottom{padding-bottom:15px}.margin-xs-30{margin:30px}.margin-xs-30--top{margin-top:30px}.margin-xs-30--left{margin-left:30px}.margin-xs-30--right{margin-right:30px}.margin-xs-30--bottom{margin-bottom:30px}.padding-xs-30{padding:30px}.padding-xs-30--top{padding-top:30px}.padding-xs-30--left{padding-left:30px}.padding-xs-30--right{padding-right:30px}.padding-xs-30--bottom{padding-bottom:30px}.margin-xs-0{margin:0}.margin-xs-0-top{margin-top:0}.margin-xs-0-left{margin-left:0}.margin-xs-0-right{margin-right:0}.margin-xs-0-bottom{margin-bottom:0}.padding-xs-0{padding:0}.padding-xs-0-top{padding-top:0}.padding-xs-0-left{padding-left:0}.padding-xs-0-right{padding-right:0}.padding-xs-0-bottom{padding-bottom:0}}@media(min-width: 768px)and (max-width: 991px){.margin-sm{margin:15px}.margin-sm--top{margin-top:15px}.margin-sm--left{margin-left:15px}.margin-sm--right{margin-right:15px}.margin-sm--bottom{margin-bottom:15px}.padding-sm{padding:15px}.padding-sm--top{padding-top:15px}.padding-sm--left{padding-left:15px}.padding-sm--right{padding-right:15px}.padding-sm--bottom{padding-bottom:15px}.margin-sm-30{margin:30px}.margin-sm-30--top{margin-top:30px}.margin-sm-30--left{margin-left:30px}.margin-sm-30--right{margin-right:30px}.margin-sm-30--bottom{margin-bottom:30px}.padding-sm-30{padding:30px}.padding-sm-30--top{padding-top:30px}.padding-sm-30--left{padding-left:30px}.padding-sm-30--right{padding-right:30px}.padding-sm-30--bottom{padding-bottom:30px}.margin-sm-0{margin:0}.margin-sm-0-top{margin-top:0}.margin-sm-0-left{margin-left:0}.margin-sm-0-right{margin-right:0}.margin-sm-0-bottom{margin-bottom:0}.padding-sm-0{padding:0}.padding-sm-0-top{padding-top:0}.padding-sm-0-left{padding-left:0}.padding-sm-0-right{padding-right:0}.padding-sm-0-bottom{padding-bottom:0}}@media(min-width: 992px)and (max-width: 1199px){.margin-md{margin:15px}.margin-md--top{margin-top:15px}.margin-md--left{margin-left:15px}.margin-md--right{margin-right:15px}.margin-md--bottom{margin-bottom:15px}.padding-md{padding:15px}.padding-md--top{padding-top:15px}.padding-md--left{padding-left:15px}.padding-md--right{padding-right:15px}.padding-md--bottom{padding-bottom:15px}.margin-md-30{margin:30px}.margin-md-30--top{margin-top:30px}.margin-md-30--left{margin-left:30px}.margin-md-30--right{margin-right:30px}.margin-md-30--bottom{margin-bottom:30px}.padding-md-30{padding:30px}.padding-md-30--top{padding-top:30px}.padding-md-30--left{padding-left:30px}.padding-md-30--right{padding-right:30px}.padding-md-30--bottom{padding-bottom:30px}.margin-md-0{margin:0}.margin-md-0-top{margin-top:0}.margin-md-0-left{margin-left:0}.margin-md-0-right{margin-right:0}.margin-md-0-bottom{margin-bottom:0}.padding-md-0{padding:0}.padding-md-0-top{padding-top:0}.padding-md-0-left{padding-left:0}.padding-md-0-right{padding-right:0}.padding-md-0-bottom{padding-bottom:0}}@media(min-width: 1200px){.margin-lg{margin:15px}.margin-lg--top{margin-top:15px}.margin-lg--left{margin-left:15px}.margin-lg--right{margin-right:15px}.margin-lg--bottom{margin-bottom:15px}.padding-lg{padding:15px}.padding-lg--top{padding-top:15px}.padding-lg--left{padding-left:15px}.padding-lg--right{padding-right:15px}.padding-lg--bottom{padding-bottom:15px}.margin-lg-30{margin:30px}.margin-lg-30--top{margin-top:30px}.margin-lg-30--left{margin-left:30px}.margin-lg-30--right{margin-right:30px}.margin-lg-30--bottom{margin-bottom:30px}.padding-lg-30{padding:30px}.padding-lg-30--top{padding-top:30px}.padding-lg-30--left{padding-left:30px}.padding-lg-30--right{padding-right:30px}.padding-lg-30--bottom{padding-bottom:30px}.margin-lg-0{margin:0}.margin-lg-0-top{margin-top:0}.margin-lg-0-left{margin-left:0}.margin-lg-0-right{margin-right:0}.margin-lg-0-bottom{margin-bottom:0}.padding-lg-0{padding:0}.padding-lg-0-top{padding-top:0}.padding-lg-0-left{padding-left:0}.padding-lg-0-right{padding-right:0}.padding-lg-0-bottom{padding-bottom:0}}