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's null by default.

Types of classes

The gem creates four types of classes:

1. disabling classes - e.g. .n-m, .n-p
2. one way classes - e.g. .m-l-5, p-b-5
3. two way classes - e.g. .m-v-5, .p-h-5
4. 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

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

License

boxmodel-rails is Copyright © 2018 SoftwareBrothers.co. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About SoftwareBrothers.co

We are a software company who provides web and mobile development and UX/UI services, friendly team that helps clients from all over the world to transform their businesses and create astonishing products.

• We are available to hire.
• If you want to work for us - checkout the career page.