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

Stick Bootstrap into Polymer

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for takanorip takanorip
April 23, 2018
Technology
0
78

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018
Tweet

More Decks by takanorip

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

Other Decks in Technology

See All in Technology
形式手法特論：SMT ソルバで解く認可ポリシの静的解析 #kernelvm / Kernel VM Study Tsukuba No3
Avatar for y_taka_23 ytaka23
1
730
2026年もソフトウェアサプライチェーンのリスクに立ち向かうために / Product Security Square #3
Avatar for GMO Flatt Security flatt_security
1
740
Phase04_ターミナル基礎
Avatar for overflow ,Inc overflowinc
0
1.5k
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
Avatar for Koji Yoshida kyoshidaxx
4
1.7k
「通るまでRe-run」から卒業！落ちないテストを書く勘所
Avatar for asumikam asumikam
2
460
【Λ（らむだ）】最近のアプデ情報 / RPALT20260318
Avatar for Λ lambda
0
150
AWS CDK「読めるけど書けない」を脱却するファーストステップ
Avatar for Makky12 smt7174
3
210
Kiroで見直す開発プロセスとAI-DLC
Avatar for Kazuki Adachi k_adachi_01
0
110
Phase05_ClaudeCode入門
Avatar for overflow ,Inc overflowinc
0
1.4k
Phase11_戦略的AI経営
Avatar for overflow ,Inc overflowinc
0
970
スピンアウト講座05_実践活用事例
Avatar for overflow ,Inc overflowinc
0
730
夢の無限スパゲッティ製造機 #phperkaigi
Avatar for hideki kinjyo o0h
PRO
0
330

Featured

See All Featured
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
820
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
160
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
800
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k

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)