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

Other Decks in Technology

See All in Technology
NAB Show 2026 動画技術関連レポート / NAB Show 2026 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
0
140
なぜ Platform Engineering の土台に Kubernetes を選ぶのか
Avatar for Ray r4ynode
1
510
ルールやカスタム機能、どう活かす?ハンズオンで体感するIBM Bobの出力コントロール
Avatar for mu (Mizuho Uehara) muehara
1
110
スキルと MCP ツール、責務をどう分けるか？ AI が迷わないインターフェース設計の戦略
Avatar for CData Software Japan cdataj
1
850
AGENTS.mdとSkillsで始めるAIエージェント活用
Avatar for そのだ sonoda_mj
2
170
チームで進めるAI駆動アジャイル×ウォーターフォール
Avatar for 熊井悠 kumaiu
0
140
非定型業務をAI slackbotで自動化する ~ 社内要望を自動壁打ちするbotを作った ~/automating-ad-hoc-work-with-ai-slackbot
Avatar for shibayu36 shibayu36
0
550
製造業のクラウド活用最適解〜AI，DXを加速するデータ基盤の作り方〜
Avatar for 濱田孝治 hamadakoji
0
430
日本 Fintech 未来予測レポート 2027〜2028年（手動編集版）
Avatar for 8maki 8maki
0
300
2026.06.13_AI時代に事業会社が「SIer出身エンジニア」を求める理由 / Why Businesses Seek Engineers with a System Integrator Background in the AI ​​Era
Avatar for jumpei_ikegami jumtech
0
990
実装は速くなった、レビューはどうする？ ― 自身のレビューをAIで再現させるサーヴァントエンジニアリングのすゝめ / Implementation got faster. So what about reviews? — An invitation to Servant Engineering: Recreating your own code reviews with AI
Avatar for nrs nrslib
8
4.5k
生成 AI × MCP で切り拓く次世代 SRE！自律型運用への挑戦と開発者体験の進化
Avatar for _awache _awache
0
190

Featured

See All Featured
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.5k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
210
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
430
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
140
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.9k

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)