bem-constructor 0.1 → 0.1.1

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