boxmodel2 0.0.0 → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/README.md +112 -0
- data/{vendor → app}/assets/stylesheets/boxmodel2.scss +0 -0
- data/{vendor → app}/assets/stylesheets/boxmodel2/_disabling_classes.scss +0 -0
- data/{vendor → app}/assets/stylesheets/boxmodel2/_main_classes.scss +0 -0
- data/{vendor → app}/assets/stylesheets/boxmodel2/_mixins.scss +0 -0
- data/{vendor → app}/assets/stylesheets/boxmodel2/_responsive_classes.scss +0 -0
- data/{vendor → app}/assets/stylesheets/boxmodel2/_vars.scss +0 -0
- data/lib/boxmodel2.rb +17 -0
- data/lib/boxmodel2/engine.rb +5 -0
- data/lib/boxmodel2/version.rb +1 -1
- metadata +10 -8
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bf11083777ead95d4c129ca59489216441419c17
|
4
|
+
data.tar.gz: cf2d55bc660b7a492b10c2bc79b6ae8e88cc20d2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 829ae0e0b8d843f501e092f4a3f7743e49d905db210bde820ba7da94d447264f987276dbc3cba82677da0f074af1d577768764619f1207505dbb1c2a68ddb982
|
7
|
+
data.tar.gz: 24ea833382a0706bdccb39b6a93430a81ea78dd1edbb4454061d9cc8da19ec7cea1800abb4491e0b216f3ccd0194a0b8991f9abcfcd313b8c946e499d8f7a573
|
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -1 +1,113 @@
|
|
1
1
|
# boxmodel2
|
2
|
+
`boxmodel2` is css library providing css classes to modify margins, paddings, borders, dimensions and positions without writing css declarations by yourself.
|
3
|
+
|
4
|
+
##Instalation
|
5
|
+
In your Gemfile include:
|
6
|
+
|
7
|
+
gem 'boxmodel2'
|
8
|
+
and execute:
|
9
|
+
|
10
|
+
$ bundle
|
11
|
+
or install it by:
|
12
|
+
|
13
|
+
gem install boxmodel2
|
14
|
+
|
15
|
+
##Usage
|
16
|
+
###Configuration
|
17
|
+
In your CSS manifest add the following lines:
|
18
|
+
|
19
|
+
$bm-min-value: 5;
|
20
|
+
$bm-max-value: 50;
|
21
|
+
$bm-step: 5;
|
22
|
+
@import 'boxmodel2';
|
23
|
+
|
24
|
+
You can also generate classes only for specific values. To do so, define a list of values like this:
|
25
|
+
|
26
|
+
$bm-values: -5,1,2,3,10,40;
|
27
|
+
@import: 'boxmodel2';
|
28
|
+
|
29
|
+
**!important** If `$bm-values` is not `null` variables `$bm-min-value`, `$bm-max-value` and `$bm-step` are not taken into account.
|
30
|
+
|
31
|
+
###Responsive
|
32
|
+
`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.
|
33
|
+
By default breakpoints are the same as in Twitter Bootstrap. You can change them using responsive variables.
|
34
|
+
|
35
|
+
###Types of classes
|
36
|
+
`boxmodel2` generates the following types of classes:
|
37
|
+
|
38
|
+
- disabling: `n-p`, `n-b-l`, `m-r-0`;
|
39
|
+
- one direction: `m-r--10`, `p-b-5`, `b-t-3`;
|
40
|
+
- bi-directional: `m-h-25`, `p-h`;
|
41
|
+
- four directional: `m-30`, `b-2`;
|
42
|
+
- position: `pb-20`, `pl-10`;
|
43
|
+
- demension: `w-30`, `h-15`;
|
44
|
+
- responsive: `m-b-xs-30`, `p-t-sm-20`, `b-md-3`, `pl-lg-10`.
|
45
|
+
|
46
|
+
###Naming convention
|
47
|
+
- n - no (disabling)
|
48
|
+
- m - margin
|
49
|
+
- p - padding
|
50
|
+
- b - border
|
51
|
+
- pt - position top
|
52
|
+
- pr - position right
|
53
|
+
- pb - position bottom
|
54
|
+
- pl - position left
|
55
|
+
- w - width
|
56
|
+
- h - height
|
57
|
+
- l - left
|
58
|
+
- r - right
|
59
|
+
- t - top
|
60
|
+
- b - bottom
|
61
|
+
- v - vertical
|
62
|
+
- h - horizontal
|
63
|
+
- xs - extra small
|
64
|
+
- sm - small
|
65
|
+
- md - medium
|
66
|
+
- lg - large
|
67
|
+
|
68
|
+
###Examples
|
69
|
+
- `n-p` - `padding: 0 !important`
|
70
|
+
- `m-t--10` - `margin-top: -10px !important`
|
71
|
+
- `p-l-5` - `padding-left: 5px !important`
|
72
|
+
- `b-r-2` - `border-width-right: 2px !important`
|
73
|
+
- `pb-15` - `bottom: 15px !important`
|
74
|
+
- `h-20` - `height: 20px !important`
|
75
|
+
- `m-r-sm-30` - `margin-right: 30px !important` only for small screens
|
76
|
+
|
77
|
+
###Variables
|
78
|
+
####Generator variables
|
79
|
+
Define values for classes generation.
|
80
|
+
|
81
|
+
- `$bm-values` - defines list of values which will be generated; type: `list`; default: `null`
|
82
|
+
- `$bm-min-value` - value from which classes will be generated; type: `number`; default: `5`
|
83
|
+
- `$bm-max-value` - classes generation will stop on this value; type: `number`; default: `30`
|
84
|
+
- `$bm-step` - defines the distance from one class to the other; type: `number`; default: `5`
|
85
|
+
- `$bm-directions` - list of directions which classes will modify; type: `list`; default: `top, right, bottom, left, horizontal, vertical, all`
|
86
|
+
|
87
|
+
####Group variables
|
88
|
+
Define which group of classes will be generated.
|
89
|
+
|
90
|
+
- `$bm-positions` - type: `boolean`; default: `false`
|
91
|
+
- `$bm-margins`- type: `boolean`; default: `true`
|
92
|
+
- `$bm-borders` - type: `boolean`; default: false
|
93
|
+
- `$bm-paddings` - type: `boolean`; default: `true`
|
94
|
+
- `$bm-dimensions` - type: `boolean`; default: `false`
|
95
|
+
- `$bm-responsive` - type: `boolena`; default: `false`
|
96
|
+
|
97
|
+
####Responsive variables
|
98
|
+
Define breakpoints for responsive classes. Set `$bm-responsive` to `true` first.
|
99
|
+
|
100
|
+
- `$bm-screen-sm-min` - type: `number`; default: `768px`
|
101
|
+
- `$bm-screen-md-min` - type: `number`; default: `992px`
|
102
|
+
- `$bm-screen-lg-min` - type: `number`; default: `1200px`
|
103
|
+
- `$bm-screen-xs-max` - type: `number`; default: `($bm-screen-sm-min - 1)`
|
104
|
+
- `$bm-screen-sm-max` - type: `number`; default: `($bm-screen-md-min - 1)`
|
105
|
+
- `$bm-screen-md-max` - type: `number`; default: `($bm-screen-lg-min - 1)`
|
106
|
+
|
107
|
+
##Contributing
|
108
|
+
|
109
|
+
1. Fork it.
|
110
|
+
2. Create your feature branch (git checkout -b my-new-feature).
|
111
|
+
3. Commit your changes (git commit -am 'Add some feature').
|
112
|
+
4. Push to the branch (git push origin my-new-feature).
|
113
|
+
5. Create new Pull Request.
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
data/lib/boxmodel2.rb
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
dir = File.dirname(__FILE__)
|
2
|
+
$LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
|
3
|
+
|
4
|
+
unless defined?(Sass)
|
5
|
+
require 'sass'
|
6
|
+
end
|
7
|
+
|
8
|
+
module Boxmodel2
|
9
|
+
if defined?(Rails) && defined?(Rails::Engine)
|
10
|
+
class Engine < ::Rails::Engine
|
11
|
+
require 'boxmodel2/engine'
|
12
|
+
end
|
13
|
+
else
|
14
|
+
boxmodel2_path = File.expand_path("../../app/assets/stylesheets", __FILE__)
|
15
|
+
ENV["SASS_PATH"] = [ENV["SASS_PATH"], boxmodel2_path].compact.join(File::PATH_SEPARATOR)
|
16
|
+
end
|
17
|
+
end
|
data/lib/boxmodel2/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: boxmodel2
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Paweł Rosa
|
@@ -34,14 +34,16 @@ files:
|
|
34
34
|
- ".gitignore"
|
35
35
|
- LICENSE
|
36
36
|
- README.md
|
37
|
+
- app/assets/stylesheets/boxmodel2.scss
|
38
|
+
- app/assets/stylesheets/boxmodel2/_disabling_classes.scss
|
39
|
+
- app/assets/stylesheets/boxmodel2/_main_classes.scss
|
40
|
+
- app/assets/stylesheets/boxmodel2/_mixins.scss
|
41
|
+
- app/assets/stylesheets/boxmodel2/_responsive_classes.scss
|
42
|
+
- app/assets/stylesheets/boxmodel2/_vars.scss
|
37
43
|
- boxmodel2.gemspec
|
44
|
+
- lib/boxmodel2.rb
|
45
|
+
- lib/boxmodel2/engine.rb
|
38
46
|
- lib/boxmodel2/version.rb
|
39
|
-
- vendor/assets/stylesheets/boxmodel2.scss
|
40
|
-
- vendor/assets/stylesheets/boxmodel2/_disabling_classes.scss
|
41
|
-
- vendor/assets/stylesheets/boxmodel2/_main_classes.scss
|
42
|
-
- vendor/assets/stylesheets/boxmodel2/_mixins.scss
|
43
|
-
- vendor/assets/stylesheets/boxmodel2/_responsive_classes.scss
|
44
|
-
- vendor/assets/stylesheets/boxmodel2/_vars.scss
|
45
47
|
homepage: https://github.com/pawelrosa/boxmodel2
|
46
48
|
licenses:
|
47
49
|
- MIT
|
@@ -62,7 +64,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
62
64
|
version: '0'
|
63
65
|
requirements: []
|
64
66
|
rubyforge_project:
|
65
|
-
rubygems_version: 2.
|
67
|
+
rubygems_version: 2.2.2
|
66
68
|
signing_key:
|
67
69
|
specification_version: 4
|
68
70
|
summary: Boxmodel2, css classes modifying box model
|