css components

114
Beyond the CSS Architecture Components CSS

Upload: -

Post on 17-Aug-2014

495 views

Category:

Design


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: CSS Components

Beyond the CSS Architecture

ComponentsCSS

Page 2: CSS Components

Front-end Engineer

Hiroki Tani

github.com/hiloki!" twitter.com/hiloki

inkdesign.jp

Page 3: CSS Components

CSSMark-up

Page 4: CSS Components

CSSMark-up

!Designer

Page 5: CSS Components

CSSMark-up

!Designer

Engineer#

Page 6: CSS Components

👎CSS

Page 7: CSS Components

Easy.text { color: red; }

Page 8: CSS Components

Hardtoo

#main .article { ... } #main .article .title { ... } #main .breaking .title { ... } #header #logo img { ... } #header li#logoTop { ... } #header li#logoTop:after { ... } .article-header .datetime span { ... } ul.member-list li.member a { ... } .widget p,.widget ul { ... } #sidebar .widget { ... } #sidebar li a.register{} body.landing #main section .photo { ... } #slider #slider-control > div { ... } #bannerList li div#rotate { ... }

Page 9: CSS Components

CSS Architecture

Page 10: CSS Components

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

Page 11: CSS Components
Page 12: CSS Components

<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>

Page 13: CSS Components
Page 14: CSS Components

.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; } …

Page 15: CSS Components
Page 16: CSS Components

<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>

Page 17: CSS Components
Page 18: CSS Components

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

Page 19: CSS Components
Page 20: CSS Components

<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>

Page 21: CSS Components
Page 22: CSS Components

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

Page 23: CSS Components

&

Page 24: CSS Components
Page 25: CSS Components
Page 26: CSS Components

<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>

Page 27: CSS Components
Page 28: CSS Components

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

Page 29: CSS Components

.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; } …

Page 30: CSS Components

.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; } …

Page 31: CSS Components
Page 32: CSS Components

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

Page 33: CSS Components
Page 34: CSS Components

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

Page 35: CSS Components

'

Page 36: CSS Components
Page 37: CSS Components

<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>

Page 38: CSS Components
Page 39: CSS Components

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

Page 40: CSS Components

OOCSSNicole Sullivan@stubbornella

Page 41: CSS Components

OOCSSSMACSSBEMMCSSFLOCSS

Page 42: CSS Components

CSSComponents

Page 43: CSS Components

= encapsulationComponents

Page 44: CSS Components

Not perfectComponents

Page 45: CSS Components
Page 46: CSS Components

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

Page 47: CSS Components

<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>

Page 48: CSS Components
Page 49: CSS Components

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

Page 50: CSS Components

Page 51: CSS Components
Page 52: CSS Components

#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; }

Page 53: CSS Components
Page 54: CSS Components

#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; }

Page 55: CSS Components

<style scoped> )

Page 56: CSS Components
Page 57: CSS Components

<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>

Page 58: CSS Components

<style scoped> ⛼

Page 59: CSS Components

<style scoped> ⛼

Page 60: CSS Components

Components

Page 61: CSS Components

Sharable

+

,

-

Maintainable

Easily-controlled

Page 62: CSS Components

ComponentsWeb

Page 63: CSS Components

Web ComponentsTemplates

Shadow DOMHTML Imports

- - - -

Custom Elements

Page 64: CSS Components

Templates

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

Page 65: CSS Components

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">

Page 66: CSS Components

Custom Elements

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

Page 67: CSS Components

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) ); };

Page 68: CSS Components

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

Page 69: CSS Components

HTML Imports

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

Page 70: CSS Components

Web Components

- - - -

Templates

Shadow DOMHTML Imports

Custom Elements

Page 71: CSS Components

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

Page 72: CSS Components
Page 73: CSS Components

<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>

Page 74: CSS Components
Page 75: CSS Components

<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>

Page 76: CSS Components
Page 77: CSS Components

<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>

Page 78: CSS Components

.

Page 79: CSS Components
Page 80: CSS Components

<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>

Page 81: CSS Components
Page 82: CSS Components

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

</p> ... </my-media>

Page 83: CSS Components
Page 84: CSS Components
Page 85: CSS Components

<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>

Page 86: CSS Components
Page 87: CSS Components

<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>

Page 88: CSS Components

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

Page 89: CSS Components

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

Page 90: CSS Components

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

Page 91: CSS Components

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

Page 92: CSS Components

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

Page 93: CSS Components

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

Page 94: CSS Components

::shadow 👻

Page 95: CSS Components

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

Page 96: CSS Components

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

Page 97: CSS Components

Shadow DOM= encapsulation

Custom Elements

<my-media></my-media>

Page 98: CSS Components

Shadow DOM= encapsulation

Custom Elements

Page 99: CSS Components

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>

Page 100: CSS Components

Shadow DOM= encapsulation

Custom Elements

<my-media> !!!!!!!!!!!!!!!! </my-media>

Page 101: CSS Components

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>

Page 102: CSS Components

Shadow DOM= encapsulation

Custom Elements

<my-media> !!!!!!!!!!!!!!!! </my-media>

Page 103: CSS Components

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> !

Page 104: CSS Components

Shadow DOM= encapsulation

Custom Elements

<my-media></my-media>

Page 105: CSS Components

HTML5 Rockshttp://www.html5rocks.com/

Page 106: CSS Components

Polymerhttp://www.polymer-project.org/

Page 107: CSS Components

X-Taghttp://www.x-tags.org/

Page 108: CSS Components

In future

Page 109: CSS Components

Polymer designerhttps://github.com/Polymer/designer

Page 110: CSS Components

Designer

Builder

Component

Component

Page 111: CSS Components

💎 Designer

Builder

Component

Component

Page 112: CSS Components

Component Designer.Be a

Page 113: CSS Components

Thank you.github.com/hiloki!

" twitter.com/hiloki

inkdesign.jp

💐

Page 114: CSS Components

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: