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.
Files changed (4) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +19 -30
  3. data/lib/bem-constructor.rb +2 -2
  4. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 8d21417bbbbf72744f4f58dbf75f61313f4f0c0f
4
- data.tar.gz: 4e6598835ffaaac7ed06cb3cfea6d8b9f14b0e7c
3
+ metadata.gz: 6a5f29c158ee72d70d4bea646b71b78f29b18952
4
+ data.tar.gz: e9b0a1cc67ad4210e097467dcf88c5acc9f424c8
5
5
  SHA512:
6
- metadata.gz: b6ea8f0194709514cf397580c63858d5c5a4ea54e2e2d9f3db9de0f049db8dcf1df6399267aa19a96020d6b022a16aafbe9da568d45748bf04fc5c2a0e9e988d
7
- data.tar.gz: 6e1f86e490a5d18ece7bfc4d9f68f9402b42de7f6595220fb0623f66daac14350a7c09db82f1ebceb2458c241f894d7b6063dc7bc9f512f0c223c519a382ddb5
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. Whethere 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:
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
- $bem-use-namespaces: false; // defaults to true
135
+ $bem-use-namespaces: false; // defaults to true
145
136
 
146
137
  Override the default block namespaces:
147
138
 
148
- $bem-block-namespaces: (
149
- 'object': 'obj', // defaults to 'o'
150
- 'component': 'comp', // defaults to 'c'
151
- 'utility': 'helper', // defaults to 'u'
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
- $bem-theme-namespace: 'theme'; // defaults to 't'
147
+ $bem-theme-namespace: 'theme'; // defaults to 't'
157
148
 
158
149
  Override the default state namespace:
159
150
 
160
- $bem-state-namespace: 'has'; // defaults to 'is'
151
+ $bem-state-namespace: 'has'; // defaults to 'is'
161
152
 
162
153
  Override the default hack namespace:
163
154
 
164
- $bem-hack-namespace: 'it-wasnt-me-'; // defaults to '_'
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
- $bem-element-separator: '-'; // Defaults to '__'
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
- ```` scss
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
- ```` css
230
+ ````css
242
231
 
243
232
  /* The main Burger object */
244
233
  .o-burger { texture: juicy; }
245
234
 
246
- /* lettuce and Tomato elements */
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 we are hackers and couldn't resist adding some Bacon back */
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 the burge Is Cold */
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
 
@@ -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 QuantityQueries
6
- VERSION = "0.1"
5
+ module BEMConstructor
6
+ VERSION = "0.1.1"
7
7
  DATE = "2015-03-24"
8
8
  end
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.1'
4
+ version: 0.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Daniel Guillan