bem-constructor 0.7.0 → 0.7.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/README.md +29 -2
- data/lib/bem-constructor.rb +1 -1
- data/stylesheets/_bem-constructor.scss +1 -0
- data/stylesheets/_debug.scss +102 -0
- metadata +10 -9
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4fe4ec78221810bb78a1625fec3a141f6b7dd16d
|
|
4
|
+
data.tar.gz: 79ffdfb0432371f4eb2758355c883c8a2c7b2bea
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ce9d8d8d20d4c3447c185261fcfd67d2cf9651c7554fd99041121df0bfe45f8d90b385087192d8e972c78956f63fad5e4cd83e3367adfe49b7598baa4e7d7f47
|
|
7
|
+
data.tar.gz: 2051bb9cc4e658a73b1c64c09de69f090c1033de6dbbbf25d626d55cca407f489019793130c86fa92c7cf1e7ac1856130c1aaf69732af30abb507adb09802798
|
data/README.md
CHANGED
|
@@ -267,6 +267,33 @@ The compiled CSS:
|
|
|
267
267
|
.o-burger.is-cold { taste: terrible; }
|
|
268
268
|
````
|
|
269
269
|
|
|
270
|
-
##
|
|
270
|
+
## Visual debugger
|
|
271
271
|
|
|
272
|
-
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
Perform a visual healthcheck against your UI using the debugger mixin.
|
|
275
|
+
|
|
276
|
+
### bem-debug($targets...)
|
|
277
|
+
|
|
278
|
+
````scss
|
|
279
|
+
@include bem-debug('modifiers', 'components'); // Outlines all modifiers and components
|
|
280
|
+
````
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
Available targets are `classes`,`modifiers`,`elements`,`objects`,`components`,`utilities` and `hacks`.
|
|
284
|
+
|
|
285
|
+
Use it empty to outline all target types: `@include bem-debug();`
|
|
286
|
+
|
|
287
|
+
Customize outline styles by overriding the `$bem-debug-styles` map.
|
|
288
|
+
|
|
289
|
+
````scss
|
|
290
|
+
$bem-debug-styles: (
|
|
291
|
+
'classes' : 5px solid #ddd,
|
|
292
|
+
'modifiers' : 5px solid #aaa,
|
|
293
|
+
'elements' : 5px solid #111,
|
|
294
|
+
'objects' : 5px solid #FFDC00,
|
|
295
|
+
'components' : 5px solid #FF851B,
|
|
296
|
+
'utilities' : 5px solid #0074D9,
|
|
297
|
+
'hacks' : 5px solid #FF4136,
|
|
298
|
+
);
|
|
299
|
+
```
|
data/lib/bem-constructor.rb
CHANGED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// -----------------------------------------------------------------------------
|
|
2
|
+
// Debug
|
|
3
|
+
// -----------------------------------------------------------------------------
|
|
4
|
+
// Table of contents:
|
|
5
|
+
// 1. Classes
|
|
6
|
+
// 2. Elements
|
|
7
|
+
// 3. Modifiers
|
|
8
|
+
// 4. Objects
|
|
9
|
+
// 5. Components
|
|
10
|
+
// 6. Hacks
|
|
11
|
+
|
|
12
|
+
$bem-debug-styles: (
|
|
13
|
+
'classes' : 5px solid #ddd,
|
|
14
|
+
'modifiers' : 5px solid #aaa,
|
|
15
|
+
'elements' : 5px solid #111,
|
|
16
|
+
'objects' : 5px solid #FFDC00,
|
|
17
|
+
'components' : 5px solid #FF851B,
|
|
18
|
+
'utilities' : 5px solid #0074D9,
|
|
19
|
+
'hacks' : 5px solid #FF4136,
|
|
20
|
+
) !default;
|
|
21
|
+
|
|
22
|
+
@mixin bem-debug($targets...) {
|
|
23
|
+
|
|
24
|
+
// If no targets are given, show them all.
|
|
25
|
+
$show_all: length($targets) == 0;
|
|
26
|
+
|
|
27
|
+
// -----------------------------------------------------------------------------
|
|
28
|
+
// 1. Classes
|
|
29
|
+
// -----------------------------------------------------------------------------
|
|
30
|
+
|
|
31
|
+
@if not not index($targets, 'classes') or $show_all {
|
|
32
|
+
[class] {
|
|
33
|
+
outline: map-get($bem-debug-styles, 'classes');
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// -----------------------------------------------------------------------------
|
|
38
|
+
// 2. Elements
|
|
39
|
+
// -----------------------------------------------------------------------------
|
|
40
|
+
|
|
41
|
+
@if not not index($targets, 'elements') or $show_all {
|
|
42
|
+
[class*="#{$bem-element-separator}"] {
|
|
43
|
+
outline: map-get($bem-debug-styles, 'elements');
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// -----------------------------------------------------------------------------
|
|
48
|
+
// 3. Modifiers
|
|
49
|
+
// -----------------------------------------------------------------------------
|
|
50
|
+
|
|
51
|
+
@if not not index($targets, 'modifiers') or $show_all {
|
|
52
|
+
[class*="#{$bem-modifier-separator}"] {
|
|
53
|
+
outline: map-get($bem-debug-styles, 'modifiers');
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// -----------------------------------------------------------------------------
|
|
58
|
+
// 3. Objects
|
|
59
|
+
// -----------------------------------------------------------------------------
|
|
60
|
+
|
|
61
|
+
@if not not index($targets, 'objects') or $show_all {
|
|
62
|
+
$c: map-get($bem-block-namespaces, 'object') + '-';
|
|
63
|
+
[class^="#{$c}"],
|
|
64
|
+
[class*=" #{$c}"] {
|
|
65
|
+
outline: map-get($bem-debug-styles, 'objects');
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// -----------------------------------------------------------------------------
|
|
70
|
+
// 4. Components
|
|
71
|
+
// -----------------------------------------------------------------------------
|
|
72
|
+
|
|
73
|
+
@if not not index($targets, 'components') or $show_all {
|
|
74
|
+
$c: map-get($bem-block-namespaces, component) + '-';
|
|
75
|
+
[class^="#{$c}"],
|
|
76
|
+
[class*=" #{$c}"] {
|
|
77
|
+
outline: map-get($bem-debug-styles, 'components');
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// -----------------------------------------------------------------------------
|
|
82
|
+
// 5. Utilities
|
|
83
|
+
// -----------------------------------------------------------------------------
|
|
84
|
+
|
|
85
|
+
@if not not index($targets, 'utilities') or $show_all {
|
|
86
|
+
$c: map-get($bem-block-namespaces, utility) + '-';
|
|
87
|
+
[class^="#{$c}"],
|
|
88
|
+
[class*=" #{$c}"] {
|
|
89
|
+
outline: map-get($bem-debug-styles, 'utilities');
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// -----------------------------------------------------------------------------
|
|
94
|
+
// 6. Hacks
|
|
95
|
+
// -----------------------------------------------------------------------------
|
|
96
|
+
|
|
97
|
+
@if not not index($targets, 'hacks') or $show_all {
|
|
98
|
+
[class^="#{$hack-namespace}"] {
|
|
99
|
+
outline: map-get($bem-debug-styles, 'hacks');
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bem-constructor
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.7.
|
|
4
|
+
version: 0.7.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Daniel Guillan
|
|
@@ -14,28 +14,28 @@ dependencies:
|
|
|
14
14
|
name: sass
|
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
|
16
16
|
requirements:
|
|
17
|
-
- -
|
|
17
|
+
- - ~>
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
19
|
version: '3.4'
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
|
-
- -
|
|
24
|
+
- - ~>
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
26
|
version: '3.4'
|
|
27
27
|
- !ruby/object:Gem::Dependency
|
|
28
28
|
name: compass
|
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
|
30
30
|
requirements:
|
|
31
|
-
- -
|
|
31
|
+
- - ~>
|
|
32
32
|
- !ruby/object:Gem::Version
|
|
33
33
|
version: '1.0'
|
|
34
34
|
type: :runtime
|
|
35
35
|
prerelease: false
|
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
|
37
37
|
requirements:
|
|
38
|
-
- -
|
|
38
|
+
- - ~>
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '1.0'
|
|
41
41
|
description: A Sass library for building immutable and namespaced BEM-style CSS objects
|
|
@@ -45,11 +45,12 @@ executables: []
|
|
|
45
45
|
extensions: []
|
|
46
46
|
extra_rdoc_files: []
|
|
47
47
|
files:
|
|
48
|
-
- CHANGELOG.md
|
|
49
48
|
- README.md
|
|
49
|
+
- CHANGELOG.md
|
|
50
50
|
- lib/bem-constructor.rb
|
|
51
51
|
- stylesheets/_bem-constructor.scss
|
|
52
52
|
- stylesheets/_block.scss
|
|
53
|
+
- stylesheets/_debug.scss
|
|
53
54
|
- stylesheets/_defaults.scss
|
|
54
55
|
- stylesheets/_element.scss
|
|
55
56
|
- stylesheets/_error-checks.scss
|
|
@@ -79,17 +80,17 @@ require_paths:
|
|
|
79
80
|
- lib
|
|
80
81
|
required_ruby_version: !ruby/object:Gem::Requirement
|
|
81
82
|
requirements:
|
|
82
|
-
- -
|
|
83
|
+
- - '>='
|
|
83
84
|
- !ruby/object:Gem::Version
|
|
84
85
|
version: '0'
|
|
85
86
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
86
87
|
requirements:
|
|
87
|
-
- -
|
|
88
|
+
- - '>='
|
|
88
89
|
- !ruby/object:Gem::Version
|
|
89
90
|
version: 1.3.6
|
|
90
91
|
requirements: []
|
|
91
92
|
rubyforge_project: bem-constructor
|
|
92
|
-
rubygems_version: 2.
|
|
93
|
+
rubygems_version: 2.0.14
|
|
93
94
|
signing_key:
|
|
94
95
|
specification_version: 4
|
|
95
96
|
summary: BEM Constructor is a Sass library for building immutable and namespaced BEM-style
|