Updated demo and readme instructions

README.md

@@ -1,2 +1,126 @@
 # equalizer.js
-A JavaScript plugin for equalizing the height of elements
+A vanilla JavaScript plugin for equalizing the height of elements. No jQuery required, but if you're using jQuery that's just fine. 
+
+## Installation
+Insert the script into your HTML and initialize Equalizer. Initialization should be done using the load event for best results. 
+
+
+```
+<script src="equalizer.min.js"></script>
+<script>
+	window.addEventListener('load', function() {
+	    Equalizer.init();
+	});
+</script>
+```
+
+You may want to use your own breakpoints for your project. To do so, pass those values in the settings object when you initialize Equalizer. Breakpoints are calculated in a mobile first format, so you don't need to include a breakpoint for `0px`.
+
+```
+Equalizer.init({
+	breakpoints: {
+		small: 480,
+		medium: 640,
+		large: 1024,
+		xlarge: 1200
+	}	
+});
+
+```
+
+
+
+## Usage
+
+Start by adding the `data-equalizer-row` attribute to an element that contains the elements you want to equalize. If you want the elements to only equalize on some breakpoints and not others, including the `data-equalizer-on` attribute and pass it a comma separated list of breakpoint names to equalize on.
+
+
+
+Add the attribute `data-equalizer` to all elements that should be equalized.
+
+### Groups
+
+You may also specify a "group" of elements to equalize. This is helpful if you want to equalize multiple groups of elements in the same container.
+
+To create an equalizer group, simply pass the name of the group to the `data-equalizer-row` attribute.
+
+```
+<div class="my-element" data-equalizer-row="my-group">
+	...
+</div>
+```
+
+From there, you must enter the group name into the `data-equalizer` attribute for each element you want associated with that group.
+
+*Note: Elements can only have one `data-equalizer-row` attribute.*
+
+## Examples
+
+Equalize only on all breakpoints.
+
+```
+<div class="demo_row" data-equalizer-row>
+	<div class="demo_item" data-equalizer>
+		<img src="//picsum.photos/500?random" width="500" height="500" alt="demo image">
+	</div>
+	
+	<div class="demo_item" data-equalizer>
+		<img src="//picsum.photos/500/900?random" width="500" height="900" alt="demo image">					
+	</div>
+	
+	<div class="demo_item" data-equalizer>
+		<img src="//picsum.photos/500/250?random" width="500" height="250" alt="demo image">					
+	</div>
+</div>
+```
+
+
+Equalize only on `medium` and `xlarge`.
+
+```
+<div class="demo_row" data-equalizer-row data-equalizer-on="medium,xlarge">
+	<div class="demo_item" data-equalizer>
+		<img src="//picsum.photos/500?random" width="500" height="500" alt="demo image">
+	</div>
+	
+	<div class="demo_item" data-equalizer>
+		<img src="//picsum.photos/500/900?random" width="500" height="900" alt="demo image">					
+	</div>
+	
+	<div class="demo_item" data-equalizer>
+		<img src="//picsum.photos/500/250?random" width="500" height="250" alt="demo image">					
+	</div>
+</div>
+```
+
+Equalize multiple groups of elements.
+
+```
+<div class="demo_row" data-equalizer-row="group1" data-equalizer-on="medium,xlarge">
+	<div class="demo_item" data-equalizer="group1">
+		<img src="//picsum.photos/500?random" width="500" height="500" alt="demo image">
+	</div>
+	
+	<div class="demo_item" data-equalizer="group1">
+		<img src="//picsum.photos/500/900?random" width="500" height="900" alt="demo image">					
+	</div>
+	
+	<div class="demo_item" data-equalizer="group1">
+		<img src="//picsum.photos/500/250?random" width="500" height="250" alt="demo image">					
+	</div>
+</div>
+<div class="demo_row" data-equalizer-row="group2">
+	<div class="demo_item demo_item--green" data-equalizer="group2">
+		<img src="//picsum.photos/150?random" width="150" height="150" alt="demo image">
+	</div>
+	
+	<div class="demo_item demo_item--green" data-equalizer="group2">
+		<img src="//picsum.photos/75?random" width="75" height="75" alt="demo image">					
+	</div>
+	
+	<div class="demo_item demo_item--green" data-equalizer="group2">
+		<img src="//picsum.photos/250?random" width="250" height="250" alt="demo image">					
+	</div>
+</div>	
+```
+

config.codekit3

@@ -48,8 +48,8 @@
 		},
 	"\/equalizer.js": {
 		"ft": 64,
-		"ma": 1,
-		"mi": 0,
+		"ma": 0,
+		"mi": 1,
 		"oA": 0,
 		"oAP": "\/equalizer.min.js",
 		"oF": 0,
@@ -88,9 +88,9 @@
 		"ema": 1,
 		"eSQ": 1,
 		"ft": 4096,
-		"oA": 0,
+		"oA": 1,
 		"oAP": "\/README.html",
-		"oF": 0,
+		"oF": 1,
 		"oFM": 0,
 		"oS": 0,
 		"pHT": 0,

demo/demo.scss

@@ -31,4 +31,9 @@ img {
 			background: green;	
 		}
 	}
+
+	&_row {
+		display: inline-block;
+		width: 100%;
+	}
 }