bem-constructor 0.1 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|