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

Stick Bootstrap into Polymer

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
5.9k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.6k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
890
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
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
8k

Other Decks in Technology

See All in Technology
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
Avatar for Go Takagi shimastripe
1
340
人間はどの意思決定を手放せるのか
Avatar for Yoshitaka Kawashima kawasima
15
7.4k
Slack上でインフラをトラブルシュートする！ Agentic Platform Engineeringの第一歩
Avatar for teru0x1 teru0x1
5
1.8k
ユーザー価値を届け続けるためにウォンテッドリーが大切にしている文化
Avatar for Kota Minato kotaminato
0
180
え、こんなに早く改修できるの？──新人エンジニアとスクラムマスターの2人が語る、AI×アジャイル開発の現場
Avatar for Yoshihiro Sasago ysasago
2
470
安心して変更できるWebフロントエンドの作り方
Avatar for Hiroyuki ANAI pirosikick
5
2.7k
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
Avatar for 10xinc 10xinc
0
2.1k
アクセスキーこわい やめかたと漏らさない工夫
Avatar for Yuichi Sato sassssan68
1
440
エージェントはローカル、検証はMicroVM — Lambda MicroVMsでつくるServerless CI
Avatar for fujioka-a fujioka6789
3
360
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
1
460
積み重なった技術負債への挑戦 〜初手としての全社ゴト化〜
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
1.3k
越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon
Avatar for VTRyo vtryo
0
150

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.1k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
730
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k

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)