2014-06-21 Frontrend in Nagoya w/ HTML5 NAGOYA

1. Beyond the CSS Architecture
Components
CSS

2. Front-end Engineer
Hiroki Tani
github.com/hiloki
twitter.com/hiloki
inkdesign.jp

3. CSS
Mark-up

4. CSS
Mark-up
Designer
➡

5. CSS
Mark-up
Designer
➡
Engineer
⬅

6. 👎
CSS

7. Easy
.text {
color: red;
}

8. Hard
too
#main .article { ... }
#main .article .title { ... }
#main .breaking .title { ... }
#header #logo img { ... }
#header li#logoTop { ... }
#header li#logoTop:after {
.article-header .datetime s
ul.member-list li.member a
.widget p,.widget ul { ... }
#sidebar .widget { ... }
#sidebar li a.register{}
body.landing #main sectio
#slider #slider-control > di

9. CSS Architecture

10. http://codepen.io/hiloki/full/dnGeB

12. <div class="speaker">
<div class="image">
<img src="tani.jpg">
</div>
<div class="inner">
<p class=“name”>…</p>
<div class="biography">
<p>...</p>
</div>
</div>
</div>

14. .speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…

16. <div class="book">
<div class="cover">
<img src="book.jpg">
</div>
<div class="inner">
<p class="title">...</p>
<p class="info">
...
</p>
<div class="intro">
<p>...</p>
</div>
<ul class="shop">
<li>...</li>
</ul>
</div>
</div>

18. .book {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;
margin-right: 20px;
}
.book .inner {
overflow: hidden;
}
.book .title {
...
}
...

20. <div class="event">
<a href="event.html">
<div class="thumbnail">
<img src="event.jpg">
</div>
<div class="inner">
<p class="event__name">...</p>
</div>
</a>
</div>

22. .event > a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
…

26. <div class="media speaker">
<div class="media__image image">
<img src="tani.jpg">
</div>
<div class="media__body inner">
<p class="name">…</p>
<div class="biography">
<p>...</p>
</div>
</div>
</div>

28. /* Media */
.media {
overflow: hidden; /* Clearfix */
}
.media__image {
float: left;
margin-right: 15px;
}
.media__body {
overflow: hidden;
}

29. .speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…
.speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…

30. .speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…

32. .book {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;
margin-right: 20px;
}
.book .inner {
overflow: hidden;
}
.book .title {
...
}
...

34. .event > a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
…

37. <div class=“media book">
<div class=“media__image book__cover”>
<img src="book.jpg">
</div>
<div class=“media__body”>
<p class="book__name">...</p>
<p class="book__info">
...
</p>
<div class="book__intro">
<p>...</p>
</div>
<ul class="book__shop">
<li>...</li>
</ul>
</div>
</div>

39. .book {
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book__cover {
margin-right: 20px;
}
.book__title {
...
}
...

40. OOCSS
Nicole Sullivan
@stubbornella

41. OOCSS
SMACSS
BEM
MCSS
FLOCSS

42. CSS
Components

43. = encapsulation
Components

44. Not perfect
Components

46. <div class="book">
<div class="book__cover">
<p class=“book__name">
…
</p>
</div>
</div>

47. <div id="pickup">
<div class="book">
<div class="book__cover">
<p class="book__name">
CSS…</p>...
</div>
</div>
</div>
<div class="book">
<div class="book__cover">
<p class=“book__name">
…
</p>
</div>
</div>

49. #pickup .book__name {
color: #111;
font-size: 2em;
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
}

50. ☢

52. #pickup .book__name {
color: #111;
font-size: 2em;
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
background-color: #333;
padding: 6px;
}

54. #pickup .book__name {
color: #111;
font-size: 2em;
background-color: #FFF;
padding: 0;
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
background-color: #333;
padding: 6px;
}

55. <style scoped>

57. <div><!-- Scope -->
<style scoped>
.book__name {
background-color: #333;
padding: 6px;
}
</style>
<div class=“media book">
<div class=“media__body”>
<p class=“book__name”>
…
</p>
</div>
</div>
</div>

58. <style scoped>
⛼

59. <style scoped>
⛼

60. Components

61. Sharable
Maintainable
Easily-controlled

62. Components
Web

63. Web Components
Templates
Shadow DOM
HTML Imports
-
-
-
-
Custom Elements

64. Templates
<template
id="my-media-template">
<div class="media">
<div class="media__image">
<img>
</div>
<div class="media__body">
<content></content>
</div>
</div>
</template>

65. Custom
Elements
<google-map></google-map>
!
<x-calendar today></x-calendar>
!
<button is="like-button"></button>
!
<my-media src="tani.jpg"
width="120" height="120">

66. Custom
Elements
var element =
Object.create(
HTMLElement.prototype
);
document.registerElement(
'my-alert', {
prototype: element
}
);

67. Shadow
DOM
// カスタム要素のインスタンスが生成された時に実行する
element.createdCallback = function() {
var template =
document.querySelector('#my-media-
template');
!
// templateのDocumentFragmentからcontentを取得する
var content = template.content;
!
// Shadow Rootにcontentを追加する（ShadowDOMの形成）
var shadowRoot =
this.createShadowRoot();
shadowRoot.appendChild(
document.importNode(content, true)
);
};

68. Shadow
DOM
// カスタム要素のインスタンスが生成された時に実行する
element.createdCallback = function() {
var template =
document.querySelector('#my-media-
template');
!
// templateのDocumentFragmentからcontentを取得する
var content = template.content;
!
// Shadow Rootにcontentを追加する（ShadowDOMの形成）
var shadowRoot =
this.createShadowRoot();
shadowRoot.appendChild(
document.importNode(content, true)
);
};
= encapsulation

69. HTML
Imports
<head>
<link
rel="import"
href=“components/my-media.html">
</head>

70. Web Components
-
-
-
-
Templates
Shadow DOM
HTML Imports
Custom Elements

71. http://codepen.io/hiloki/full/obFui

73. <my-media src=“sensui.jpg"
width=“120"
height=“120"
class="speaker">
<p class=“speaker__name">
泉水 翔吾
</p>
<div class="speaker__bio">
<p>…</p>
</div>
</my-media>

75. <my-media src="sensui.jpg"
width="120"
height="120"
class="speaker">
<p class=“speaker__name">
泉水 翔吾
</p>
<div class="speaker__bio">
<p>…</p>
</div>
</my-media>

77. <my-media src=“book.jpg"
width=“100"
height=“100"
class="book">
<p class=“book__name">
フロントエンド…
</p>
<div class=“book__info”>
<p>…</p>
</div>
…
</my-media>

80. <div class="media speaker">
<divclass=“media__image
speaker__image”>
<img src="tani.jpg" width="120">
</div>
<div class="media__body">
<p class=“speaker__name">
谷 拓樹
</p>
...
</div>
</div>

82. <my-media src=“sugimoto.jpg"
width=“120"
class="speaker">
<p class=“speaker__name">
杉本 吉章
</p>
...
</my-media>

85. <my-media src="sugimoto.jpg"
width="120" class="speaker">
<div class="media">
<div class=“media__image">
<img src="tani.jpg" width="120">
</div>
<div class="media__body">
<p class="speaker__name">杉本
吉章</p>
...
</div>
</div>
</my-media>

87. <div class="media speaker">
<div class="media__image
speaker__image">
<img src="tani.jpg" width="120">
</div>
<div class="media__body">
<p class="speaker__name">谷 拓樹
</p>
...
</div>
</div>

88. /* <head>
<style>…</style>
</head> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: indianred;
}
❓

89. /* <head>
<style>…</style>
</head> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: indianred;
}

90. /* <head>
<style>…</style>
</head> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: indianred;
}

91. /* <template>
<style>…</style>
</template> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: skyblue;
}
❓

92. /* <template>
<style>…</style>
</template> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: skyblue;
}

93. /* <template>
<style>…</style>
</template> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: skyblue;
}

94. ::shadow
👻

95. /* <head>
<style>…</style>
</head> */
.speaker::shadow .media {
display: block;
overflow: hidden; /* Clearfix */
background-image: url(orion.jpg);
background-size: cover;
}
❓

96. /* <head>
<style>…</style>
</head> */
.speaker::shadow .media {
display: block;
overflow: hidden; /* Clearfix */
background-image: url(orion.jpg);
background-size: cover;
}

97. Shadow
DOM
= encapsulation
Custom
Elements
<my-media></my-media>

98. Shadow
DOM
= encapsulation
Custom
Elements

99. Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
<style>
.media {
display: block;
overflow: hidden; /* Clearfix */
}
.media__image {
float: left;
margin-right: 10px;
}
.media__body {
overflow: hidden;
}
</style>
<div class="media">
<div class=“media__image"></div>
<div class="media__body"></div>
</div>
</my-media>

100. Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>

101. Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>
!
<style>
.media {
display: table;
}
.media__image {
display: table-cell;
vertical-align: top;
padding-right: 10px;
}
</style>
<div class="media">
<div class=“media__image"></div>
<div class="media__body"></div>
</div>

102. Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>

103. Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>
!
<style>
.media {
display: flex;
align-items: flex-start;
}
.media__image {
margin-right: 10px;
}
.media__body {
flex: 1;
}
</style>
<div class="media">
<div class=“media__image"></div>
<div class="media__body"></div>
</div>
!

104. Shadow
DOM
= encapsulation
Custom
Elements
<my-media></my-media>

105. HTML5 Rocks
http://www.html5rocks.com/

106. Polymer
http://www.polymer-project.org/

107. X-Tag
http://www.x-tags.org/

108. In future

109. Polymer designer
https://github.com/Polymer/designer

110. Designer
Builder
Component
Component

111. 💎 Designer
Builder
Component
Component

112. Component Designer.
Be a

113. Thank you.
github.com/hiloki
twitter.com/hiloki
inkdesign.jp
💐

114. https://www.flickr.com/photos/premshree/3444104640/
-
-
-
-
https://www.flickr.com/photos/ltdemartinet/8331549172/
https://www.flickr.com/photos/horiavarlan/4839454263/
https://www.flickr.com/photos/drewmaughan/8209503226/
Photos: