iron-grid.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/utils/flattened-nodes-observer.html">
<script src="../resize-observer-polyfill/dist/ResizeObserver.js"></script>

<!--
# Iron Container

`iron-container` is not strictly part of iron-grid but is important in laying out content. It allows you to center your page content. `iron-container`'s default is set to ~90% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

### Styling

The following custom proporties are available for styling:

| Custom property          | Description            | Default |
| ------------------------ | ---------------------- | ------- |
| `--iron-container-width` | Width of the Container | `90%`   |
| `--iron-grid-element-style` | Permit to override grid style element | `null`   |

# Iron Grid

`iron-grid` helps you layout polymer elements in an ordered, easy fashion. We are using a standard 12 column fluid responsive grid system.
`iron-grid` is now designed to be used in each element you want to be responsive, not only the complete page. So if you want differents behaviors following screen size for each element, you can.
Now each compoment can manage its own responsiveness.

Please note that all the examples pictured below have the class 'example' on them. The class *is* included in the component. This class gives each grid column a 1px white border so that you can see the seperation.

### 12 Columns

Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.

![1](https://raw.githubusercontent.com/The5heepDev/iron-grid/master/img/1.png)

To get a feel of how the grid is used in HTML. Take a look at this code below which will produce a similar result as the one above.

```html
<iron-grid>
<div class="s1">1</div>
<div class="s1">2</div>
<div class="s1">3</div>
<div class="s1">4</div>
<div class="s1">5</div>
<div class="s1">6</div>
<div class="s1">7</div>
<div class="s1">8</div>
<div class="s1">9</div>
<div class="s1">10</div>
<div class="s1">11</div>
<div class="s1">12</div>
</iron-grid>
```

### Offsets

To offset, simply add `offset-s2` to the class where `s` signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.

![2](https://raw.githubusercontent.com/The5heepDev/iron-grid/master/img/2.png)

```html
<iron-grid>
<div class="s12">
<span>This div is 12-columns wide on all screen sizes</span>
</div>
<div class="s6 offset-s6">
<span>6-columns (offset-by-6)</span>
</div>
</iron-grid>
```

### Orders

You can change the normal element's order of appearance on the screen. To do this, simply add `order-s1` to the class where `s` signifies the screen class-prefix (s = small, m = medium, l = large) and the number is the appearance order (from 1 to 12). The default element order is 6, so the page will load in order of number (ie. order-s1 order-s2 order-s3 etc.), and if there are multiple element's with the same order number, then in consecutive order, as shown below.

![3](https://raw.githubusercontent.com/The5heepDev/iron-grid/master/img/4.png)

```html
<iron-grid>
<div class="s1">1</div>
<div class="s1">2</div> // Without the order tag, the `div` will default to order-s6.
<div class="s1">3</div>
<div class="s1">4</div>
<div class="s1">5</div>
<div class="s1">6</div>
<div class="s1">7</div>
<div class="s1">8</div>
<div class="s1">9</div>
<div class="s1">10</div>
<div class="s1">11</div>
<div class="s1 order-s1">12</div>
</iron-grid>
```

### Hiding elements

You can create hidden elements by using `s0`, `m0`, or `l0`.

```html
<iron-grid>
<div class="s0 m12">
<span>This div is hidden on small screen sizes and 12-columns wide on medium and large screen sizes.</span>
</div>
</iron-grid>
```

### Creating Responsive Layouts

Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.

|                       | Mobile Devices &lt;= 480px | Mobile Devices &lt;= 960px | Tablet Devices &lt;= 1280px | Desktop Devices &lt;= 1600px | Desktop Devices &gt; 1600px |
|-----------------------|----------------------------|----------------------------|----------------------------|-----------------------------|-----------------------------|
| **Class Prefix**      | .xs                        | .s                         | .m                         | .l                          | .xl                         |
| **Number of Columns** | 12                         | 12                         | 12                         | 12                          | 12                          |

### Adding Responsiveness

In the previous examples, we only defined the size for small screens using `s12`. This is fine if we want a fixed layout since the rules propogate upwards. By just saying s12, we are essentially saying `s12 m12 l12`. But by explicitly defining the size we can make our website more responsive.

![4](https://raw.githubusercontent.com/The5heepDev/iron-grid/master/img/3.png)

```html
<iron-grid>
<div class="s12">
<span>I am always full-width (s12)</span>
</div>
<div class="s12 m6">
<span>I am full-width on mobile (s12 m6)</span>
</div>
</iron-grid>
```

### Custom screen size format

For each usage of iron-grid you can change the default screen sizes of screen format management (xs, s, m, l, xl)
Each iron-grid instance will have its own screen size. Because of this, each seprate component can have it's own breakpoint.

```html
<iron-grid xs-max-width="400" s-max-width="600" m-max-width="900" l-max-width="1150">
<div class="s12">
<span>I am always full-width (s12)</span>
</div>
<div class="s12 m6">
<span>I am full-width on mobile (s12 m6)</span>
</div>
</iron-grid>
```

Note that xl is not set because it is the size above 'l' max width.

### Logging

You can log an iron-grid during you development adding `log` on iron-grid tag.

```html
<iron-grid log>
<div class="s12">
<span>I am always full-width (s12)</span>
</div>
<div class="s12 m6">
<span>I am full-width on mobile (s12 m6)</span>
</div>
</iron-grid>
```
Open your dev console and you will see during zomm/dezoom :

width : 375
screenFormat = s

It is recomended to only apply logging on iron-grid one at a time. If not, you will be disturb because each iron-grid can manage its screen formats. Because of the ability for an element to have it's own breakpoints, the console may become cluttered and confusing with multiple logs.

@group Iron Element

@customElement iron-grid
@polymer
@demo demo/index.html
@homepage http://the5heep.tk/
-->
<script>
	(() => {
		'use strict';
		class IronGrid extends Polymer.Element {
			constructor() {
				super();
			}

			static get properties() {
				return {
					log: {
						type: Boolean,
						value: false
					},

					xsMaxWidth: {
						type: Number,
						value: 480,
						reflectToAttribute: true
					},

					sMaxWidth: {
						type: Number,
						value: 960,
						reflectToAttribute: true
					},

					mMaxWidth: {
						type: Number,
						value: 1280,
						reflectToAttribute: true
					},

					lMaxWidth: {
						type: Number,
						value: 1600,
						reflectToAttribute: true
					},

					ratios: {
						type: Array,
						value: function () {
							return [0, 8.33333, 16.66667, 25, 33.33333, 41.66667, 50, 58.33333, 66.66667, 75, 83.33333, 91.66667, 100];
						}
					},

					screenFormats: {
						type: Array,
						value: function () {
							return ["xs", "s", "m", "l", "xl"];
						}
					},

					sizes: {
						type: Array,
						value: function () {
							return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
						}
					},

					prefixs: {
						type: Array,
						value: function () {
							return ["", "offset-", "order-"];
						}
					},

					currentScreenformat: {
						type: String,
						notify: true
					},

					ironGridDefaultStyle: {

						type: String,
						value: "margin-left: 0;order: 6;display : flex;flex-wrap: wrap;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;"
					}
				}
			}

			static get template() {
				return `
					<style>
						:host {

							width: 100%;
							display: flex;
							flex-wrap: wrap;
						}

						:host:after {
							content: "";
							display: table;
							clear: both;
						}
					</style>

					<slot id="slot"></slot>`;
			}

			ready() {
				super.ready();
				this.onResize();
			}

			connectedCallback() {
				super.connectedCallback();
				const resizeObserver = new ResizeObserver(this.onResize.bind(this));
				resizeObserver.observe(this);
			}

			constructClass(screen, size, prefix, suffix) {
				return prefix + screen + size + suffix;
			}

			onResize() {
				var newWidth = this.offsetWidth;

				if (newWidth == 0) {
					newWidth = this.parentNode.clientWidth;
				}

				var screenFormat = this.getScreenFormat(newWidth);

				if (screenFormat !== this.currentScreenformat) {
					var oldScreenformat = this.currentScreenformat;
					this.currentScreenformat = screenFormat;

					var d;
					var time1;
					if (this.log) {
						console.log('width : ' + newWidth);
						console.log("screenFormat = " + screenFormat);

						d = new Date();
						var time1 = d.getTime();

					}

					var screenFormatsSorted = this.screenFormats.slice();
					screenFormatsSorted.splice(this.screenFormats.indexOf(this.currentScreenformat), 1);
					screenFormatsSorted.push(this.currentScreenformat);

					for (var i = 0; i < screenFormatsSorted.length; i++) {
						var format = screenFormatsSorted[i];

						var importantSuffix = "";

						if (format == screenFormat) {

							importantSuffix = " !important";
						}
						for (var j = 0; j < this.sizes.length; j++) {
							var size = this.sizes[j];

							for (var k = 0; k < this.prefixs.length; k++) {
								var prefix = this.prefixs[k];

								var myClass = this.constructClass(format, size, prefix, "");
								var selector = "." + myClass;

								var elements = this.querySelectorAll(selector);

								for (var l = 0; l < elements.length; l++) {

									var style;

									if (prefix == "") {

										style = this.ironGridDefaultStyle;

										if (this.ratios[j] != 0) {
											style = style + "width:" + this.ratios[j] + "%" + importantSuffix + ";";
										} else {

											style = style + "display:none" + importantSuffix + ";";
										}

									} else if (prefix == "offset-") {

										style = elements[l].style.cssText + "margin-left:" + this.ratios[j] + "%" + importantSuffix + ";";

									} else if (prefix == "order-") {

										style = elements[l].style.cssText + "order:" + j + importantSuffix + ";";

									}

									elements[l].setAttribute('style', style);

								}

							}
						}
					}

					if (this.log) {
						d = new Date();
						var time2 = d.getTime();

						var totalTime = time2 - time1;

						console.log("Time to apply responsiveness = " + totalTime + "ms");
					}

				}
			}

			getScreenFormat(newWidth) {
				if (newWidth <= this.xsMaxWidth) {
					return "xs";
				} else if (newWidth <= this.sMaxWidth) {
					return "s";
				} else if (newWidth <= this.mMaxWidth) {
					return "m";
				} else if (newWidth <= this.lMaxWidth) {
					return "l";
				} else {
					return "xl";
				}
			}
		}
		customElements.define('iron-grid', IronGrid);
	})();
</script>