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

Stick Bootstrap into Polymer

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
650
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
970
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
680
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.8k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
260
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
GCASアップデート（202601-202603）
Avatar for 高橋広和 techniczna
0
200
Keycloak を使った SSO で CockroachDB にログインする / CockroachDB SSO with Keycloak
Avatar for kota2and3kan kota2and3kan
0
150
頼れる Agentic AI を支える Datadog のオブザーバビリティ / Powering Reliable Agentic AI with Datadog Observability
Avatar for Kento Kimura aoto
PRO
0
190
アーキテクチャモダナイゼーションを実現する組織
Avatar for SatohJohn satohjohn
1
1k
Kiro Powers 入門
Avatar for Kazuki Adachi k_adachi_01
0
100
Lambda Web AdapterでLambdaをWEBフレームワーク利用する
Avatar for arakawsh sahou909
0
150
Claude Code 2026年 最新アップデート
Avatar for Oikon oikon48
13
10k
実践 Datadog MCP Server
Avatar for 株式会社ヌーラボ nulabinc
PRO
2
230
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
Avatar for ishii-takuya taku1418
0
180
AWSの資格って役に立つの？
Avatar for Hiroki Takatsuka tk3fftk
2
350
OpenClaw を Amazon Lightsail で動かす理由
Avatar for Uechi Shingo uechishingo
0
150
AWS CDK「読めるけど書けない」を脱却するファーストステップ
Avatar for Makky12 smt7174
3
160

Featured

See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
770
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
410
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
310
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
92
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
180
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
320
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
83
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k

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)