bem-constructor 0.1 → 0.1.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 +19 -30
- data/lib/bem-constructor.rb +2 -2
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6a5f29c158ee72d70d4bea646b71b78f29b18952
|
4
|
+
data.tar.gz: e9b0a1cc67ad4210e097467dcf88c5acc9f424c8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e9f4bcdffc6e15a96e16e33413cf8a193d2084b06d2adb8012d3053f79f710102e57b64f176e4e75452a85ee950f63dd3936caa37641c822f74ea12691d739b3
|
7
|
+
data.tar.gz: 586343de875a9775945fb9b1a9955f27b9f5abf4a9d16b31b22d641c60486ba8da3aa870ad90845635bdfa8592539387334804b796e34011a59843f560ee4f75
|
data/README.md
CHANGED
@@ -6,8 +6,6 @@ By enforcing a consistent and programatic way of defining objects (blocks, eleme
|
|
6
6
|
|
7
7
|
Jump to [🍔 The Burger Example™](#example) to see the mixins in action.
|
8
8
|
|
9
|
-
----
|
10
|
-
|
11
9
|
## Key ideas
|
12
10
|
|
13
11
|
The key ideas behind this library are well explained by Harry Roberts in his articles [Immutable CSS](http://csswizardry.com/2015/03/immutable-css/), [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/) and [MindBEMding – getting your head ’round BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/),
|
@@ -18,7 +16,7 @@ Some CSS objects in your project shouldn't be able to change (mutate). They have
|
|
18
16
|
|
19
17
|
### 2. Namespacing
|
20
18
|
|
21
|
-
Objects have a clear function.
|
19
|
+
Objects have a clear function. Whether they are components, utilities o dirty hacks, we need a consistent way of telling them apart. By namespacing objects, our UI code becomes more transparent and understandable. BEM Constructor supports the following object types:
|
22
20
|
|
23
21
|
- Objects
|
24
22
|
- Components
|
@@ -35,8 +33,6 @@ Read [Harry's post on namespaces](http://csswizardry.com/2015/03/more-transparen
|
|
35
33
|
|
36
34
|
BEM objects are composed of a block and any number of elements and/or modifiers. Using the BEM syntax for naming classes you'll produce structured code that helps you and other developers understand at a glance the relationship between those classes. The BEM constructor takes care of generating bem-compliant selectors.
|
37
35
|
|
38
|
-
----
|
39
|
-
|
40
36
|
## Installation
|
41
37
|
|
42
38
|
There are 3 ways of installing BEM Constructor:
|
@@ -56,8 +52,6 @@ Run the following command:
|
|
56
52
|
1. `gem install bem-constructor`
|
57
53
|
2. Add `require 'bem-constructor'` to your `config.rb`
|
58
54
|
|
59
|
-
----
|
60
|
-
|
61
55
|
## Usage
|
62
56
|
|
63
57
|
Import it into your main stylesheet:
|
@@ -132,36 +126,33 @@ Scopes allow you to isolate code you don't have control over.
|
|
132
126
|
|
133
127
|
@include scope($name) { ... }
|
134
128
|
|
135
|
-
|
136
|
-
----
|
137
|
-
|
138
129
|
## Options
|
139
130
|
|
140
131
|
### Namespaces
|
141
132
|
|
142
133
|
Switch namespaces on/off by setting the following variable:
|
143
134
|
|
144
|
-
|
135
|
+
$bem-use-namespaces: false; // defaults to true
|
145
136
|
|
146
137
|
Override the default block namespaces:
|
147
138
|
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
139
|
+
$bem-block-namespaces: (
|
140
|
+
'object': 'obj', // defaults to 'o'
|
141
|
+
'component': 'comp', // defaults to 'c'
|
142
|
+
'utility': 'helper', // defaults to 'u'
|
143
|
+
);
|
153
144
|
|
154
145
|
Override the default theme namespace:
|
155
146
|
|
156
|
-
|
147
|
+
$bem-theme-namespace: 'theme'; // defaults to 't'
|
157
148
|
|
158
149
|
Override the default state namespace:
|
159
150
|
|
160
|
-
|
151
|
+
$bem-state-namespace: 'has'; // defaults to 'is'
|
161
152
|
|
162
153
|
Override the default hack namespace:
|
163
154
|
|
164
|
-
|
155
|
+
$bem-hack-namespace: 'it-wasnt-me-'; // defaults to '_'
|
165
156
|
|
166
157
|
|
167
158
|
|
@@ -173,20 +164,17 @@ By default BEM Constructor uses the following BEM convention:
|
|
173
164
|
|
174
165
|
You can customize them to whatever fits you needs:
|
175
166
|
|
176
|
-
|
177
|
-
|
178
|
-
$bem-modifier-separator: '-_-_'; // Defaults to '--'
|
167
|
+
$bem-element-separator: '-'; // Defaults to '__'
|
179
168
|
|
169
|
+
$bem-modifier-separator: '-_-_'; // Defaults to '--'
|
180
170
|
|
181
171
|
|
182
|
-
----
|
183
|
-
|
184
172
|
##<a name="example"></a> 🍔 The Burger Example™
|
185
173
|
|
186
174
|
|
187
175
|
*Disclaimer: the following Sass code may not compile into a real burger.*
|
188
176
|
|
189
|
-
````
|
177
|
+
````scss
|
190
178
|
|
191
179
|
@include object('burger') {
|
192
180
|
texture: juicy;
|
@@ -235,15 +223,16 @@ You can customize them to whatever fits you needs:
|
|
235
223
|
taste: terrible;
|
236
224
|
}
|
237
225
|
}
|
226
|
+
````
|
238
227
|
|
239
228
|
The compiled CSS:
|
240
229
|
|
241
|
-
````
|
230
|
+
````css
|
242
231
|
|
243
232
|
/* The main Burger object */
|
244
233
|
.o-burger { texture: juicy; }
|
245
234
|
|
246
|
-
/*
|
235
|
+
/* Lettuce and Tomato elements */
|
247
236
|
.o-burger__lettuce, .o-burger__tomato { quality: fresh; }
|
248
237
|
|
249
238
|
/* Cheese element */
|
@@ -267,15 +256,15 @@ The compiled CSS:
|
|
267
256
|
/* Veggie Burger block modifier modifies the Extra Topping element too */
|
268
257
|
.o-burger--veggie .o-burger__extra-topping { ingredient: avocado; }
|
269
258
|
|
270
|
-
/* But
|
259
|
+
/* But as hackers we couldn't resist the urge to add some Bacon back */
|
271
260
|
._o-burger--veggie .o-burger__extra-topping { ingredient: bacon; }
|
272
261
|
|
273
262
|
/* When the party Theme is Mexican, we make everything spicy */
|
274
263
|
.t-mexican .o-burger { spicy: hell-yeah; }
|
275
264
|
|
276
|
-
/* And we're all sad when
|
265
|
+
/* And we're all sad when a burger Is Cold */
|
277
266
|
.o-burger.is-cold { taste: terrible; }
|
278
|
-
|
267
|
+
````
|
279
268
|
|
280
269
|
## This is overkill, who is this for?
|
281
270
|
|
data/lib/bem-constructor.rb
CHANGED
@@ -2,7 +2,7 @@ require 'compass'
|
|
2
2
|
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
3
3
|
Compass::Frameworks.register('bem-constructor', :path => extension_path)
|
4
4
|
|
5
|
-
module
|
6
|
-
VERSION = "0.1"
|
5
|
+
module BEMConstructor
|
6
|
+
VERSION = "0.1.1"
|
7
7
|
DATE = "2015-03-24"
|
8
8
|
end
|