The future of responsive web design

Web component queries

Nikos Zinas

@nzinas

http://github.com/zinas

www.prevent-default.com

Chapter 1

Web components

Web Components are a set of technologies, aimed at giving the developers the tools to create and share custom HTML tags, which fully encapsulate their functionality and style.

Custom Elements

Twitter Bootstrap

http://getbootstrap.com/javascript/#static-example

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">×</span>
		</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Web components

<twbs-modal animation="fade">
	<twbs-modal-header>
		<button is="twbs-modal-button-close">Close<button>
		<h4>Modal title</h4>
	</twbs-modal-header>
	<p>One fine body…</p>
	<twbs-modal-footer>
		<button is="twbs-modal-button-close" class="btn btn-default">
                    Close
                </button>
		<button class="btn btn-primary">Save changes</button>
	</twbs-modal-footer>
</twbs-modal>

Registering elements

// Create an object based on the HTMLElement prototype
var modal = Object.create(HTMLElement.prototype);

// Register the element
document.register('twbs-modal', {
    prototype: modal
});

// You can also extend existing objects
document.register('twbs-button', {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: 'button'
});

Per-element APIs

// Create an object based on the HTMLElement prototype
var modal = Object.create(HTMLElement.prototype);

// Define your own functions
modal.hide = function () {
    // do stuff...
};

// Register the element
document.register('twbs-modal', {
    prototype: modal
});

Lifecycle callbacks

// Fires when an instance of the element is created
modal.createdCallback = function() {};

// Fires when an instance was inserted into the document
modal.attachedCallback = function() {};

// Fires when an instance was removed from the document
modal.detachedCallback = function() {};

// Fires when an attribute was added, removed, or updated
modal.attributeChangedCallback = function(attr, oldVal, newVal) {};

Templates

<script type="text/template">
    -- Some HTML content --
</script>

<template id="profile-template">
    <div class="profile">
        <img 
            src="assets/default.png" 
            alt="a faceless profile icon" 
            title="Default Avatar" />
        <h3 class="profile__name"></h3>
        <a href="" class="profile__email"></a>
    </div>
</template>

var content = document.getElementById('profile-template').content;
var node = document.importNode(content, true);

// treat clone as any other node
// eg. document.body.appendChild(node);

<template id="profile-template">
    <div class="profile">
        <img 
            src="assets/default.png" 
            alt="a faceless profile icon" 
            title="Default Avatar" />
        <h3 class="profile__name"></h3>
        <a href="" class="profile__email"></a>
    </div>
</template>

Content is not part of the document

var content = document.getElementById('profile-template').content;
var node = document.importNode(content, true);

// treat clone as any other node
// eg. document.body.appendChild(node);

Shadow DOM

DOM Tree encapsulation

<div id="host-element"></div>

<script>
// Create your shadow root
var root = document.querySelector('#host-element').createShadowRoot();

// add content like in any other node
root.innerHTML = '...';
</script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-default">
    <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
    </a>
</nav>

var shadowRoot, templateContent, node;

// Handle template
templateContent = document.querySelector('#navbar-template').content;
node = document.importNode(templateContent, true);

// Add to Shadow DOM
shadowRoot = document.querySelector('.navbar').createShadowRoot();
shadowRoot.appendChild(node);

HTML Imports

<link 
    rel="import" 
    href="twbs-modal.html"
    id="twbs-modal-import"
    onload="handleSuccess()"
    onerror="handleError()"
    async>

var content = document.getElementById('twbs-modal-import').import;

// treat content like any other document. eg.
content.querySelector('...');

• HTML is fetched but not inserted in the importing document
• Requests are de-duped
• Scripts are executing in the context of the importing document
• Styles are applied to the importing document

HTML Imports

The modular web

Chapter 2

Responsive Web Design

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

A bit of history...

Fluid grids

Flexible images

Media queries

Chapter 3

Element Queries

?

Element query is the method of adapting an element's styling, based on the size of its container and not the size of the viewport

Conceptual example

.profile .avatar {
    float: left;
    width: 180px;
}

.profile ( max-width: 320px ) .avatar {
    display: block;
    float: none;
    width: auto;
}

Don't get too excited...

Circular dependency

.container {
    display: inline-block;
}

.container .block {
    width: 200px;
}

.container ( min-width: 150px ) .block {
    width: 100px;
}

Can I do anything today?

eq.js

https://github.com/Snugug/eq.js

.profile .avatar {
    float: left;
    width: 180px;
}

.profile[data-eq-state$="small"] .avatar {
    display: block;
    float: none;
    width: auto;
}

<div class="profile" data-eq-pts="small: 300, medium: 600, large: 900">
    <div class="avatar"></div>
</div>

css-element-queries

https://github.com/marcj/css-element-queries

.profile .avatar {
    float: left;
    width: 180px;
}

.profile[max-width="200px"] .avatar {
    display: block;
    float: none;
    width: auto;
}

elementQuery

https://github.com/tysonmatanich/elementQuery

.profile .avatar {
    float: left;
    width: 180px;
}

.profile[max-width~="200px"] .avatar {
    display: block;
    float: none;
    width: auto;
}

boomqueries

https://github.com/BoomTownROI/boomqueries

.profile .avatar {
    display: block;
}

.profile--large .avatar {
    float: left;
    width: 180px;
}

boomQueries.add('.profile', [
    [180, 'profile--large']
]);

Resources

Tab Atkins - 2014 State of Element Queries

RICG - Use Cases and Requirements for “Element Queries”

Ian Storm Taylor - Media Queries are a Hack

Think in components

Think responsively

Thank you

Nikos Zinas - @nzinas