Browse files

Update documentation to reflect neatened syntax

  • Loading branch information...
1 parent 4618488 commit e20b331e334bcd0d866cbee3f513e6e88c25ed53 @csswizardry committed Mar 25, 2013
Showing with 38 additions and 1 deletion.
  1. +37 −0 README.md
  2. +1 −1 csswizardry-grids.scss
View
37 README.md
@@ -47,6 +47,43 @@ Simply fill in/adjust the relevant variables.
csswizardry-grids is incredibly simple to implement, its classes are all
human-readable and follow the same pattern.
+### Patterns
+
+csswizardry-grids’ classes are based on [a modified BEM
+syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).
+
+* `.grid` is a **B**lock
+* `.grid__item` is an **E**lement
+* `.grid--rev` is a **M**odifier
+
+Classes include your breakpoint namespaces (e.g. `.palm--one-half`,
+`.desk--two-thirds` and so on); your push and pull classes (`.push--one-third`,
+`.pull--desk--one-quarter` and so on); your regular classes (`.one-tenth`,
+`.three-quarters` etc).
+
+Knowing these patterns will allow you to create hundreds of different
+combinations. A few examples:
+
+ /**
+ * Sets an item to be one half across all breakpoints.
+ */
+ .one-half{}
+
+ /**
+ * Pushes an item one third of the way to the right across all breakpoints.
+ */
+ .push--one-third{}
+
+ /**
+ * Sets an item to be ten twelfths wide only at the desk breakpoint.
+ */
+ .desk--ten-twelthfs{}
+
+ /**
+ * Pulls an item one half of the way to the left only at the palm breakpoint.
+ */
+ .pull--palm--one-half{}
+
### Classes in markup
If you are using traditional classes then an example, basic usage might look
View
2 csswizardry-grids.scss
@@ -117,7 +117,7 @@ $use-markup-fix: true!default;
/**
* Define your breakpoints. The first value is the prefix that shall be used for
- * your classes (e.g. `.palm-one-half`), the second value is the media query
+ * your classes (e.g. `.palm--one-half`), the second value is the media query
* that the breakpoint fires at.
*/
$breakpoints: (

0 comments on commit e20b331

Please sign in to comment.