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

Stick Bootstrap into Polymer

Avatar for takanorip takanorip
April 23, 2018
Technology
84
0

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018

More Decks by takanorip

See All by takanorip
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1.1k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.8k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
790
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
300
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.3k

Other Decks in Technology

See All in Technology
[2026-07-15] AI Ready なはずだったアーキテクチャと、見えてきた課題・次に目指す状態
Avatar for 和田 悠佑 wxyzzz
6
3.3k
シンガポールで登壇してきます
Avatar for Yuuki Yamashita yama3133
0
130
ボーイスカウトルールでメモリやスキルを改善しよう
Avatar for azukiazusa azukiazusa1
3
1.1k
Data + AI Summit 2026 イベントレポート： 「AIがビジネスで意思決定するデータ基盤」へ
Avatar for KJ(Kenji Matsuda) nek0128
0
130
最適な自走を最小限の支援で — M&Aで拡大する組織で少人数SREが挑んだ1年 / SRE NEXT 2026
Avatar for GENDA genda
0
1.1k
非定型なドキュメントを効率よくリファクタする 〜えぇ！？仕様書27本の移行が1日で終わったって！？〜
Avatar for subroh_0508 subroh0508
1
390
Foxgloveについて 実際にExtensionを開発して公開するまでの話 / About Foxglove: The Story of Developing and Releasing an Extension
Avatar for Ryo Kabutan ry0_ka
0
230
SRE Next 2026 何でも屋からの脱却
Avatar for Masato Bito bto
0
690
インフラと開発の垣根を超えていき！〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
Avatar for da-hatakeyama hatahata021
2
180
世界、断片、モデル。そして理解
Avatar for SAKO Hiroshi ardbeg1958
1
110
End-to-Endで考える信頼性 — LINEアプリにおける クライアント開発×SRE連携の実践
Avatar for maru maruloop
4
4.2k
10年目を迎えた「ABEMA」がどのように AI 活用を推進して、AI 駆動開発にシフトしているのか / How ABEMA, entering its 10th year, is promoting the use of AI and shifting toward AI-driven development
Avatar for Yusei Yamanaka miyukki
0
140

Featured

See All Featured
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.8k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
420
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
490
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
240
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
230
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
760
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
350
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k

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)