$30 off During Our Annual Pro Sale. View Details »

Stick Bootstrap into Polymer

Avatar for takanorip takanorip
April 23, 2018
Technology
0
76

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018
Tweet

More Decks by takanorip

See All by takanorip
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
2
1.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
810
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
590
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.5k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
220
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
980
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
540

Other Decks in Technology

See All in Technology
日本Rubyの会の構造と実行とあと何か / hokurikurk01
Avatar for Masayoshi Takahashi takahashim
4
1.1k
20251209_WAKECareer_生成AIを活用した設計・開発プロセス
Avatar for syobochim syobochim
7
1.5k
Edge AI Performance on Zephyr Pico vs. Pico 2
Avatar for misoji engineer iotengineer22
0
140
eBPFとwaruiBPF
Avatar for Satoru Takeuchi sat
PRO
4
2.6k
AWS re:Invent 2025で見たGrafana最新機能の紹介
Avatar for 濱田孝治 hamadakoji
0
370
regrowth_tokyo_2025_securityagent
Avatar for h-ashisan hiashisan
0
230
形式手法特論：CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
Avatar for y_taka_23 ytaka23
2
460
MLflowダイエット大作戦
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
110
新 Security HubがついにGA！仕組みや料金を深堀り #AWSreInvent #regrowth / AWS Security Hub Advanced GA
Avatar for MasahiroKawahara masahirokawahara
1
1.9k
Fashion×AI「似合う」を届けるためのWEARのAI戦略
Avatar for ZOZO Developers zozotech
PRO
2
310
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
1k
エンジニアとPMのドメイン知識の溝をなくす、 AIネイティブな開発プロセス
Avatar for Michiru Kato applism118
4
1.3k

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
510
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k

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)