Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Stick Bootstrap into Polymer

Avatar for takanorip takanorip
April 23, 2018
Technology
87
0

Stick Bootstrap into Polymer

Avatar for takanorip

takanorip

April 23, 2018

More Decks by takanorip

See All by takanorip
今さら理解するウェブフォントver.2026
Avatar for takanorip takanorip
3
680
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
6.2k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.7k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
3.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.4k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
910
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.4k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
320
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.2k

Other Decks in Technology

See All in Technology
Kiro Crewをはじめよう
Avatar for t.kizawa kizawa2020
1
140
WasmをRustにする
Avatar for SansanTech sansantech
PRO
0
190
二歩目のフロントエンド・ウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
2
390
実体験から学ぶ分析エージェントの開発と運⽤
Avatar for Recruit recruitengineers
PRO
8
2.2k
ゲームのリアルタイム通信から見た QUIC と MoQ
Avatar for SEGADevTech segadevtech
0
110
ハードウェアコンペでもAI駆動開発が進んでいる話
Avatar for misoji engineer iotengineer22
1
690
脆弱性診断って、何をしているの？ 〜弱点を見つけて、会社の改善につなげるまで〜
Avatar for KeeG keeg
0
880
Cognition AI Japan - ウェビナー2_テストQA_運用監視
Avatar for Akira Shibata cogakira
0
140
使いこなすために知っておきたい Azure SRE Agent アンチパターン
Avatar for Toru Makabe torumakabe
2
480
Datadog の学び方 - あるいは、オブザーバビリティを学ぶとは何か
Avatar for iwa mananyuki
1
550
AIに攻撃される前に、AIに攻撃させる
Avatar for Kazuyoshi Tsuchiya tsuchikazu
0
170
全人類（ほぼ）AWS Organizations の上でAWSを利用している、その世界を知る話
Avatar for Hayato Tan htan
1
140

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.9k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
500
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.4k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
470
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
530
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.6k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k

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)