Enviar búsqueda
Cargar
CSS Components
•
21 recomendaciones
•
3,399 vistas
拓樹 谷
Seguir
2014-06-21 Frontrend in Nagoya w/ HTML5 NAGOYA
Leer menos
Leer más
Diseño
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 114
Descargar ahora
Descargar para leer sin conexión
Recomendados
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
Why Sass?
Why Sass?
拓樹 谷
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
Professional Web Development
Professional Web Development
Joseph Chiang
Middleman 一小時完成你的專案原形
Middleman 一小時完成你的專案原形
Even Wu
Johny see book update
Johny see book update
Ahmad Syaifudin
Recomendados
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
Why Sass?
Why Sass?
拓樹 谷
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
Professional Web Development
Professional Web Development
Joseph Chiang
Middleman 一小時完成你的專案原形
Middleman 一小時完成你的專案原形
Even Wu
Johny see book update
Johny see book update
Ahmad Syaifudin
Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPress
SkillsAndMore
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
Takashi Uemura
Index
Index
grateful7
Code blogtangcan
Code blogtangcan
Quyên Lê
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Román Hernández
スマホウェブの本命 jQueryMobile
スマホウェブの本命 jQueryMobile
Manabu Uekusa
Patricia Ann Wigginton Medical Resume
Patricia Ann Wigginton Medical Resume
Patricia Wigginton
Jogos 3.0
Jogos 3.0
Fernanda Bernardo
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
Fernanda Bernardo
jQuery & jQuery Mobile
jQuery & jQuery Mobile
Mohammad Raju
Un juego creado en php
Un juego creado en php
Erwin Lobo
Programación Nativa de un CRUD
Programación Nativa de un CRUD
FUNDET ECUADOR
thiết kế website bằng blogspot
thiết kế website bằng blogspot
Làm seo blogspot miễn phí
Presentación WP Versión Keynote
Presentación WP Versión Keynote
José Fonseca
box model
box model
jay li
Allow remote conne
Allow remote conne
Siraj Ahmed
CSS 101
CSS 101
Sofish Lin
Template ku
Template ku
tworonggo
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
Loiane Groner
H2O Space. HTML Coding Rule.
H2O Space. HTML Coding Rule.
H2O Space. Co., Ltd.
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Más contenido relacionado
La actualidad más candente
Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPress
SkillsAndMore
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
Takashi Uemura
Index
Index
grateful7
Code blogtangcan
Code blogtangcan
Quyên Lê
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Román Hernández
スマホウェブの本命 jQueryMobile
スマホウェブの本命 jQueryMobile
Manabu Uekusa
Patricia Ann Wigginton Medical Resume
Patricia Ann Wigginton Medical Resume
Patricia Wigginton
Jogos 3.0
Jogos 3.0
Fernanda Bernardo
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
Fernanda Bernardo
jQuery & jQuery Mobile
jQuery & jQuery Mobile
Mohammad Raju
Un juego creado en php
Un juego creado en php
Erwin Lobo
Programación Nativa de un CRUD
Programación Nativa de un CRUD
FUNDET ECUADOR
thiết kế website bằng blogspot
thiết kế website bằng blogspot
Làm seo blogspot miễn phí
Presentación WP Versión Keynote
Presentación WP Versión Keynote
José Fonseca
box model
box model
jay li
Allow remote conne
Allow remote conne
Siraj Ahmed
CSS 101
CSS 101
Sofish Lin
Template ku
Template ku
tworonggo
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
Loiane Groner
H2O Space. HTML Coding Rule.
H2O Space. HTML Coding Rule.
H2O Space. Co., Ltd.
La actualidad más candente
(20)
Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPress
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
Index
Index
Code blogtangcan
Code blogtangcan
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
スマホウェブの本命 jQueryMobile
スマホウェブの本命 jQueryMobile
Patricia Ann Wigginton Medical Resume
Patricia Ann Wigginton Medical Resume
Jogos 3.0
Jogos 3.0
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
jQuery & jQuery Mobile
jQuery & jQuery Mobile
Un juego creado en php
Un juego creado en php
Programación Nativa de un CRUD
Programación Nativa de un CRUD
thiết kế website bằng blogspot
thiết kế website bằng blogspot
Presentación WP Versión Keynote
Presentación WP Versión Keynote
box model
box model
Allow remote conne
Allow remote conne
CSS 101
CSS 101
Template ku
Template ku
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
H2O Space. HTML Coding Rule.
H2O Space. HTML Coding Rule.
Más de 拓樹 谷
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Try Web Components
Try Web Components
拓樹 谷
High Performance Webdesign
High Performance Webdesign
拓樹 谷
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
Más de 拓樹 谷
(6)
Beyond CSS Architecture
Beyond CSS Architecture
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
Try Web Components
Try Web Components
High Performance Webdesign
High Performance Webdesign
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
CSS Components
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
11.
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>
13.
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; } …
15.
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>
17.
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 { ... } ...
19.
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>
21.
22.
.event > a
{ display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
23.
24.
25.
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>
27.
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; } …
31.
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 { ... } ...
33.
34.
.event > a
{ display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
35.
36.
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>
38.
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
45.
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>
48.
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.
☢
51.
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; }
53.
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>
56.
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
72.
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>
74.
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>
76.
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>
78.
79.
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>
81.
82.
<my-media src=“sugimoto.jpg" width=“120" class="speaker"> <p class=“speaker__name"> 杉本
吉章 </p> ... </my-media>
83.
84.
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>
86.
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:
Descargar ahora