Your SlideShare is downloading. ×
CSS Components
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS Components

1,714
views

Published on

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

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

Published in: Design, Technology

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,714
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
16
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. <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>
  • 12. .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; } …
  • 13. <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>
  • 14. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 15. <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>
  • 16. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 17. <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>
  • 18. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 19. .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; } …
  • 20. .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; } …
  • 21. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 22. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 23. <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>
  • 24. .book { padding: 20px; background-color: #9DBCB8; color: #FFF; } .book__cover { margin-right: 20px; } .book__title { ... } ...
  • 25. OOCSS Nicole Sullivan @stubbornella
  • 26. OOCSS SMACSS BEM MCSS FLOCSS
  • 27. CSS Components
  • 28. = encapsulation Components
  • 29. Not perfect Components
  • 30. <div class="book"> <div class="book__cover"> <p class=“book__name"> … </p> </div> </div>
  • 31. <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>
  • 32. #pickup .book__name { color: #111; font-size: 2em; } ! .book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; }
  • 33.
  • 34. #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; }
  • 35. #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; }
  • 36. <style scoped>
  • 37. <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>
  • 38. <style scoped> ⛼
  • 39. <style scoped> ⛼
  • 40. Components
  • 41. Sharable Maintainable Easily-controlled
  • 42. Components Web
  • 43. Web Components Templates Shadow DOM HTML Imports - - - - Custom Elements
  • 44. Templates <template id="my-media-template"> <div class="media"> <div class="media__image"> <img> </div> <div class="media__body"> <content></content> </div> </div> </template>
  • 45. 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">
  • 46. Custom Elements var element = Object.create( HTMLElement.prototype ); document.registerElement( 'my-alert', { prototype: element } );
  • 47. 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) ); };
  • 48. 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
  • 49. HTML Imports <head> <link rel="import" href=“components/my-media.html"> </head>
  • 50. Web Components - - - - Templates Shadow DOM HTML Imports Custom Elements
  • 51. http://codepen.io/hiloki/full/obFui
  • 52. <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>
  • 53. <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>
  • 54. <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>
  • 55. <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>
  • 56. <my-media src=“sugimoto.jpg" width=“120" class="speaker"> <p class=“speaker__name"> 杉本 吉章 </p> ... </my-media>
  • 57. <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>
  • 58. <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>
  • 59. /* <head> <style>…</style> </head> */ .media { display: block; overflow: hidden; /* Clearfix */ color: indianred; } ❓
  • 60. /* <head> <style>…</style> </head> */ .media { display: block; overflow: hidden; /* Clearfix */ color: indianred; }
  • 61. /* <head> <style>…</style> </head> */ .media { display: block; overflow: hidden; /* Clearfix */ color: indianred; }
  • 62. /* <template> <style>…</style> </template> */ .media { display: block; overflow: hidden; /* Clearfix */ color: skyblue; } ❓
  • 63. /* <template> <style>…</style> </template> */ .media { display: block; overflow: hidden; /* Clearfix */ color: skyblue; }
  • 64. /* <template> <style>…</style> </template> */ .media { display: block; overflow: hidden; /* Clearfix */ color: skyblue; }
  • 65. ::shadow 👻
  • 66. /* <head> <style>…</style> </head> */ .speaker::shadow .media { display: block; overflow: hidden; /* Clearfix */ background-image: url(orion.jpg); background-size: cover; } ❓
  • 67. /* <head> <style>…</style> </head> */ .speaker::shadow .media { display: block; overflow: hidden; /* Clearfix */ background-image: url(orion.jpg); background-size: cover; }
  • 68. Shadow DOM = encapsulation Custom Elements <my-media></my-media>
  • 69. Shadow DOM = encapsulation Custom Elements
  • 70. 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>
  • 71. Shadow DOM = encapsulation Custom Elements <my-media> ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media>
  • 72. 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>
  • 73. Shadow DOM = encapsulation Custom Elements <my-media> ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media>
  • 74. 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> !
  • 75. Shadow DOM = encapsulation Custom Elements <my-media></my-media>
  • 76. HTML5 Rocks http://www.html5rocks.com/
  • 77. Polymer http://www.polymer-project.org/
  • 78. X-Tag http://www.x-tags.org/
  • 79. In future
  • 80. Polymer designer https://github.com/Polymer/designer
  • 81. Designer Builder Component Component
  • 82. 💎 Designer Builder Component Component
  • 83. Component Designer. Be a
  • 84. Thank you. github.com/hiloki twitter.com/hiloki inkdesign.jp 💐
  • 85. 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: