boxmodel2

boxmodel2 is css library providing css classes to modify margins, paddings, borders, dimensions and positions without writing css declarations by yourself.

##Instalation In your Gemfile include:

gem 'boxmodel2'

and execute:

$ bundle

or install it by:

gem install boxmodel2

##Usage ###Configuration In your CSS manifest add the following lines:

$bm-min-value: 5;
$bm-max-value: 50;
$bm-step:      5;
@import 'boxmodel2';

You can also generate classes only for specific values. To do so, define a list of values like this:

$bm-values: -5,1,2,3,10,40;
@import: 'boxmodel2';

!important If $bm-values is not null variables $bm-min-value, $bm-max-value and $bm-step are not taken into account.

###Responsive boxmodel2 provides classes you can use in your responsive web design projects. For example class .m-r-sm-10 added to an element sets margin-right on the element only for small breakpoint. By default breakpoints are the same as in Twitter Bootstrap. You can change them using responsive variables.

###Types of classes boxmodel2 generates the following types of classes:

disabling: n-p, n-b-l, m-r-0;
one direction: m-r--10, p-b-5, b-t-3;
bi-directional: m-h-25, p-h;
four directional: m-30, b-2;
position: pb-20, pl-10;
demension: w-30, h-15;
responsive: m-b-xs-30, p-t-sm-20, b-md-3, pl-lg-10.

###Naming convention

n - no (disabling)
m - margin
p - padding
b - border
pt - position top
pr - position right
pb - position bottom
pl - position left
w - width
h - height
l - left
r - right
t - top
b - bottom
v - vertical
h - horizontal
xs - extra small
sm - small
md - medium
lg - large

###Examples

n-p - padding: 0 !important
m-t--10 - margin-top: -10px !important
p-l-5 - padding-left: 5px !important
b-r-2 - border-width-right: 2px !important
pb-15 - bottom: 15px !important
h-20 - height: 20px !important
m-r-sm-30 - margin-right: 30px !important only for small screens

###Variables ####Generator variables Define values for classes generation.

$bm-values - defines list of values which will be generated; type: list; default: null
$bm-min-value - value from which classes will be generated; type: number; default: 5
$bm-max-value - classes generation will stop on this value; type: number; default: 30
$bm-step - defines the distance from one class to the other; type: number; default: 5
$bm-directions - list of directions which classes will modify; type: list; default: top, right, bottom, left, horizontal, vertical, all

####Group variables Define which group of classes will be generated.

$bm-positions - type: boolean; default: false
$bm-margins- type: boolean; default: true
$bm-borders - type: boolean; default: false
$bm-paddings - type: boolean; default: true
$bm-dimensions - type: boolean; default: false
$bm-responsive - type: boolena; default: false

####Responsive variables Define breakpoints for responsive classes. Set $bm-responsive to true first.

$bm-screen-sm-min - type: number; default: 768px
$bm-screen-md-min - type: number; default: 992px
$bm-screen-lg-min - type: number; default: 1200px
$bm-screen-xs-max - type: number; default: ($bm-screen-sm-min - 1)
$bm-screen-sm-max - type: number; default: ($bm-screen-md-min - 1)
$bm-screen-md-max - type: number; default: ($bm-screen-lg-min - 1)

##Contributing

Fork it.
Create your feature branch (git checkout -b my-new-feature).
Commit your changes (git commit -am 'Add some feature').
Push to the branch (git push origin my-new-feature).
Create new Pull Request.

boxmodel2

Runtime

boxmodel2