Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stick Bootstrap into Polymer

Avatar for takanorip takanorip
April 23, 2018
Technology
0
72

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018
Tweet

More Decks by takanorip

See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
450
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
160
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
500
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
Avatar for takanorip takanorip
2
4k

Other Decks in Technology

See All in Technology
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
Avatar for MasahiroKawahara masahirokawahara
2
250
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
Avatar for ShuyaKinjo shuyakinjo
0
550
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
Avatar for ShinoP shinop
0
120
AI時代に非連続な成長を実現するエンジニアリング戦略
Avatar for SansanTech sansantech
PRO
2
710
Kiroと学ぶコンテキストエンジニアリング
Avatar for Oikon oikon48
3
570
Microsoft Fabric のネットワーク保護のアップデートについて
Avatar for Ryoma Nagata ryomaru0825
1
120
見てわかるテスト駆動開発
Avatar for Recruit recruitengineers
PRO
6
2.1k
Yahoo!広告ビジネス基盤におけるバックエンド開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
310
Jaws-ug名古屋_LT資料_20250829
Avatar for Azoo azoo2024
3
190
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.6k
つくって納得、つかって実感！ 大規模言語モデルことはじめ
Avatar for Recruit recruitengineers
PRO
30
11k
実践アプリケーション設計 ①データモデルとドメインモデル
Avatar for Recruit recruitengineers
PRO
5
1.2k

Featured

See All Featured
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
185
54k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
790
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k

Transcript

  1. Stick Bootstrap into Polymer Takanori Oki
 @Web Components Cafe 2018/04/23

  2. Self-Introduction • Takanori Oki ( @takanorip ) • SmartDrive Inc.

    • Frontend Developer • Nuxt.jsɺReactɺPolymer… • Love fonts
  3. None

  4. I want to use CSS Frameworks for example Bootstrap

  5. granite-bootstrap • Wrapping of Bootstrap CSS as Polymer shared styles

    modules • Replace and Update polymer-bootstrap
  6. None
  7. None
  8. None
  9. None

  10. If you write this way, the layout collapses…

  11. Solution?

  12. None
  13. None

  14. DEMO

  15. It is difficult to thinking about CSS in Polymer…

  16. Generate style modules • Use granite-css-modularizer • A small node

    script to generate Polymer style modules from CSS files

  17. Publicity

  18. I published a book about Web Font!

  19. None
  20. None
  21. None

  22. Thank you! (font : Metropolis)