Add mm-menu example and fix markdown headers

docs/articles/data_comps_creating_adapters.md

@@ -1,4 +1,4 @@
-#Creating Adapters
+# Creating Adapters
 
 ## Overview
 

docs/articles/grid_config.md

@@ -1,9 +1,9 @@
-#Configuring mm-grid
+# Configuring mm-grid
 
-##Overview
+## Overview
 `mm-grid` has a small set of configuration settings that are required in order to get it up and running. In order to create a basic grid we will first create an `<mm-grid>` custom element. On its own the grid cannot do much. We need to define what fields of our dataset that we want to display. We achieve this by adding `<mm-grid-column>` elements to our grid.
 
-###mm-grid-column
+### mm-grid-column
 `<mm-grid-column>` has an attribute `field` which maps to the fields or "keys" in our data objects. Defining a grid-column also has the benefit of rendering a human readable title into the header of our grid. This is achieved by adding a column title to the HTML content or "label" attribute of a grid-column.
 
 Let's imagine a dataset of users that has the fields "first_name", "last_name", and "email". We would define our grid like so:
@@ -28,9 +28,9 @@ For multi-line headers you can either add `<br/>` tags to the HTML content or `\
 This is one of the most basic forms of the grid we can generate. However, it is not hooked up to any data source - which we will cover in another tutorial.
 
 
-##Configuration Continued
+## Configuration Continued
 
-###mm-grid Attributes
+### mm-grid Attributes
 The grid has some other settings that make it really easy to get up and running with some common use-cases.
 
 A common case we encounter with grids is being able to select a range of items within the grid. `mm-grid` makes this extremely simple - by adding a `selectable` boolean flag to your grid like so:
@@ -51,36 +51,36 @@ In much the same way, grid has an `expandable` flag. This will enable a clickabl
 	<mm-grid expandable></mm-grid>
 ```
 
-###mm-grid-column Attributes
+### mm-grid-column Attributes
 `mm-grid-column` has a number of additional attributes to configure built-in functionality. 
 
-####Width
+#### Width
 The `width` attribute accepts a string which defines the width of a column. Use this to define a column with a fluid width percentage or fixed width in pixels.
 ```html
 	<mm-grid-column width="20%"></mm-grid-column>
 	<mm-grid-column width="200px"></mm-grid-column>
 ```
 
-####Align
+#### Align
 The `align` attribute will align the contents of the column header and the column data. Valid values are "left" or "right" (defaults to "left").
 
-####Resize
+#### Resize
 The `resize` flag will enable the resize functionality of a grid-column. This will activate a draggable area on the right side of the column header. (Note - currently fluid width columns will be converted to fixed width upon resizing)
 
-####Sort
+#### Sort
 The `sort` flag enables the firing of "column-sort" events. It works in tandem with the `field` and `sort-field` attributes to enable the sorting of data by higher-level components and functions. More about this in the data integration walkthrough.
 
 
-##Advanced Configuration
+## Advanced Configuration
 
-###Viewport Width
+### Viewport Width
 For grids that need to expand beyond the bounds of their containers / window, there is an attribute called `viewport-width`. This attribute takes a fixed width number in pixels, which will set its internal container width respectively.
 
 ```html
 	<mm-grid viewport-width="1500"></mm-grid>
 ```
 
-###Custom Item Templates - mm-grid-item
+### Custom Item Templates - mm-grid-item
 The grid is quite extendable and can utilize a user-defined template to generate grid items. We recommend utilizing the built-in `mm-grid-item` component, as it works in tandem with the grid. Things like resizable columns, selections, and expansions work out of the box.
 
 In order to use a custom template we define the `item-template` attribute of the grid. This can either be a string with the id of the template we are using, or can point directly to a template DOM fragment. We define the template inside our grid with a `<template>` tag. Here we define an `<mm-grid-item>` with the attributes `model` and `scope`. These are two special attributes that give us a particular grid item's model as well as giving us access to the "scope" of the grid itself.
@@ -103,4 +103,4 @@ Defining `<div field="...">` inside of an `mm-grid-item` allows us to override t
 	</mm-grid>
 ```
 
-####Continue Reading &#8594; [Data Integration with mm-grid](article_grid_data_integration.html)
+#### Continue Reading &#8594; [Data Integration with mm-grid](article_grid_data_integration.html)

docs/articles/grid_data_integration.md

@@ -1,9 +1,9 @@
-#Data Integration with mm-grid
+# Data Integration with mm-grid
 
-##Basic Data Integration
+## Basic Data Integration
 It is quite straightforward to get an array of data into the grid. And because of 2-way binding, there are no render or update methods to worry about. Any changes to your data will automatically be reflected in the grid.
 
-###Example
+### Example
 Given an array of data like this:
 
 ```javascript
@@ -24,10 +24,10 @@ All we have to do is assign the "userData" array to the `data` property on the g
 This will kick off the grid lifecycle and generate our item-recycled grid-items!
 
 
-##Data Components
+## Data Components
 `mm-grid` plays nicely with our set of [data components](article_data_comps_intro.html). With two-way binding we eliminate the boilerplate code that would be required to wire these components together. All that is required is a bit of up-front configuration. In order to get an understanding of how data components work, please read more about using them [here](article_data_comps_intro.html).
 
-###Searchable Grid Example
+### Searchable Grid Example
 Let's imagine that we have a service that provides a collection of "users" that we can retrieve. We can easily set up a searchable grid. We will add an `mm-collection` — configured to retrieve what we need, our `mm-grid` — configured to display the data fields we need, and an `mm-input` with its value bound to our mm-collection's `<queryParam>` tags. Changes to the input value will automatically trigger a change in the collection, which will fetch the appropriate results and update the grid — all through two-way binding.
 
 ```html
@@ -52,7 +52,7 @@ Let's imagine that we have a service that provides a collection of "users" that
 
 Data components also have the ability to take care of things like paging in the grid. As a user scrolls down the grid, the collection will automatically fetch the next set of results to display. This is handled by binding the `index` properties of the collection and grid together (as seen above).
 
-###Sortable Grid Example
+### Sortable Grid Example
 Another grid use case that ties in nicely with data components is sorting. Like searching, it can be achieved solely by two-way binding. Adding the appropriate binds to the `sort-order` and `sort-field` attributes on the grid, and enabling the `sort` flags on the desired grid-columns will get this running. Example below:
 
 ```html

docs/articles/grid_intro.md

@@ -12,4 +12,4 @@ Sub-components that are used with mm-grid:
 * [mm-item-recycler](mm-item-recycler.html): reuses DOM elements to boost rendering performance
 
 
-####Continue Reading → [Configuring mm-grid](article_grid_config.html)
+#### Continue Reading → [Configuring mm-grid](article_grid_config.html)

docs/articles/migration_guide.md

@@ -1,7 +1,7 @@
 # Migration Guide
 Strand is now built on <a href="https://www.polymer-project.org/1.0/docs/" target="_blank">Polymer 1.0</a>. This article will only document breaking changes to the Strand APIs. For breaking changes between the 0.5 and 1.0 release of Polymer, see the <a href="https://www.polymer-project.org/1.0/docs/migration.html" target="_blank">Polymer migration guide</a>.
 
-##Setting Properties via Attributes
+## Setting Properties via Attributes
 Previously, Polymer 0.5 accepted camel cased attributes. Currently, camel cased attributes are no longer accepted. Any camel case property will need to be set via a hyphenated (or 'kebab-case') attribute. For example the attribute that was previously set as `maxItems` will now be set as `max-items`. When setting properties via JS, there is no difference. In the documentation for each component, not that all properties which can be set as attributes will list the hypenated attribute name. 
 
 Before:
@@ -21,17 +21,17 @@ After:
 
 ---
 
-##Use WebComponentsReady instead of polymer-ready
+## Use WebComponentsReady instead of polymer-ready
 Some examples found in the Strand documentation demonstrate setting data or properties when the component has been initalized. Previously, a `polymer-ready` event was used for this purpose. This has changed to `WebComponentsReady`. See the <a href="https://www.polymer-project.org/1.0/docs/migration.html#polymer-ready" target="_blank">Polymer 1.0 migration guide</a> for more details.  
 
 ---
 
-##Removal of the bindModel method
+## Removal of the bindModel method
 Previously, a `bindModel` method was provided as a convenience to bind a property on the given model to the input's value. The `bindModel` method has been deprecated. The components affected are: <a href="/mm-dropdown.html">mm-dropdown</a>, <a href="/mm-checkbox.html">mm-checkbox</a>, <a href="/mm-input.html">mm-input</a>, <a href="/mm-textarea.html">mm-textarea</a>, and <a href="/mm-group.html">mm-group</a>.
 
 ---
 
-##Removal of unresolved attribute
+## Removal of unresolved attribute
 Previously, if an attribute of `unresolved` was added to a component, that attribute would be removed by Polymer 0.5 when the component was upgraded. Currently, the `unresolved` attribute may be used on the `body` element only.
 
 Before:
@@ -53,7 +53,7 @@ After:
 
 ---
 
-##mm-icon
+## mm-icon
 `primaryColor` and `hoverColor` properties have been deprecated. Color should instead be configured in stylesheets.
 
 Before:
@@ -76,7 +76,7 @@ After:
 
 ---
 
-##mm-input
+## mm-input
 Autocompleting `mm-input` is now a separate component, `mm-autocomplete`
 
 Before:
@@ -119,7 +119,7 @@ After:
 
 ---
 
-##mm-popover
+## mm-popover
 Previously, to set the direction of a popover, the attribute (or Property) `valign` was used to specify vertical alignment, and `align` was used to specify horizontal alignment. Currently, these properties have been deprecated in favor of a Cardinal direction positioning system using the property `direction` with arguements `'n', 'e', 's', 'w'`.
 
 Before:
@@ -142,7 +142,7 @@ After:
 
 ---
 
-##mm-scroll-panel
+## mm-scroll-panel
 The `scope` property has been deprecated. Previously, all dom mutations were handled by a separate internal Polymer component, which needed to be passed the appropriate scope in order to capture dom mutations. Currently, all dom mutation are handled at the component level, so the scope of the light dom will be accurate.
 
 Before:
@@ -167,7 +167,7 @@ After:
 
 ---
 
-##mm-tooltip
+## mm-tooltip
 `mm-tooltip` no longer requires a template tag. The tooltip's target should be moved outside of the component, and a selector should be passed to tooltip using the `target` attribute.
 
 Before:

src/mm-menu/example.html

@@ -0,0 +1,8 @@
+<mm-icon type="actions" height="15" width="15" id="cpb2"></mm-icon>
+<mm-menu id="testMenu" direction="s" offset="15" target="#cpb2">
+	<mm-list-item value="m1">menu item 1</mm-list-item>
+	<mm-list-item value="m2">menu item 2</mm-list-item>
+	<mm-list-item value="m3">menu item 3</mm-list-item>
+	<mm-list-item value="m4">menu item 4</mm-list-item>
+	<mm-list-item value="m5">menu item 5</mm-list-item>
+</mm-menu>