boxmodel-rails
Provides a pack of css utility classes to set paddings, margins and borders without writting css code
Installation
Add this line to your application's Gemfile:
gem 'boxmodel-rails'
And then execute:
$ bundle
Or install it yourself as:
$ gem install boxmodel-rails
Usage
Configuration
In you CSS manifest file add the following line:
$step: 1;
$minValue: -10;
$maxValue: 10;
@import 'boxmodel';
You can also generate classes only for specific values. To do so, define a list of values like this:
$values: -5,1,2,3,10,40;
@import 'boxmodel';
If you set the $values
to something else than null
, variables $step
, $minValues
and $maxValue
are not taken into account.
Variables:
step
- defines the step by which the classes will be generated, e.g. 5 will generate *-5 *-10 etc.minValue
- defines the minimum value that will be generated.maxValue
- defines the maximum value that will be generated.values
- defines a list of specific values that will be generated. It'snull
by default.
Types of classes
The gem creates four types of classes:
- disabling classes - e.g.
.n-m
,.n-p
- one way classes - e.g.
.m-l-5
,p-b-5
- two way classes - e.g.
.m-v-5
,.p-h-5
- four way classes - e.g.
m-5
,p-5
Naming conventions
The naming conventions for this shortcuts are as follows:
- n - no (disabling)
- m - margin
- p - padding
- b - border
- l - left
- r - right
- t - top
- b - bottom
- v - vertical
- h - horizontal
So for example:
.m-5
-margin: 5px;
.m-b-10
-margin-bottom: 10px;
.m-l--7
-margin-left: -7px;
.m-v-10
-margin-top: 10px; margin-bottom: 10px;
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.